Vue шаг за шагом. Таблица - трансформер под настольные и мобильные версии. Пример#7
Таблица - трансформер
В этом примере продолжаем дорабатывать компонент client.
Поскольку web - приложение должно нормально работать и на мобильных устройствах, сегодня займемся отображением таблицы. На мобильных устройствах табличное представление данных приносит пользователям страдания и при малой ширине экрана крайне не удобны в работе. Я сделал несколько компонент, с помощью которых можно легко сделать универсальную адаптивную таблицу. Она будет выглядеть как таблица на десктопной версии и как «плиточки» на мобильных устройствах.
Чтобы реализовать такую универсальную таблицу я сделал компоненты u-table, u-tr, u-th, u-td
И использую их вместо тегов table, tr, th, td соответственно. Вот и все.
Сделайте окно браузера меньше до ширины мобильного телефона :) и посмотрите как преобразуется таблица. Заголовок табличных колонок в мобильной версии исчезает - он не имеет смысла, сортировка теперь доступна в меню таблицы. Вот зачем мы делали меню таблицы в предыдущем примере.
Для того чтобы видеть наименования полей в мобильной версии используется параметр label.
В мобильной версии осталась пагинация. Можно сделать подгрузку с сервере когда пользователь домотал до низа страницы. Компонент пагинатора, предусматривает такую возможность, но разбираться с ней мы будем уже при наличии реального бекенда во второй серии примеров.
Ссылки
Bootstrap: https://getbootstrap.com/docs/4.4/getting-started/introduction/
Резюме
В этом примере сделан адаптивный дизайн для вывода табличных данных используя возможности Bootstrap. Таблица - трансформер подстраивается под настольные или мобильные устройства автоматически.
В следующем примере
Создание стандартной таблицы для отображения табличных данных. Минимизации усилий для построения интерфейсов.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Додати коментар

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- Golang + Vue + PostgreSQL #2
- Golang + Vue + SQLite #1
- FOC Position Control. Векторне управління - Стабілізація положення
- Flask & Vue. Завантаження файлів. Приклад № 2.10
- Рекуперація. FOC і цікаві досліди
- Flask & Vue. OAuth. Приклад№ 2.9
- Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
- Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
Tags
stm32 bkp soldering eeprom eb-500 led hih-4000 bme280 bmp280 3d-printer usb ethernet html git docker barometer raspberry-pi remap dc-dc rfid java-script nodemcu mpu-6050 rtc capture gpio avr brushless foc options flash flask atmega python displays rs-232 solar st-link ssd1331 dma adc bluetooth web ssd1306 wifi exti mpu-9250 pwm pmsm mongodb programmator i2c battery max1674 piezo css meteo watchdog books websocket servo dht11 ngnix mpx4115a lcd motor uart sensors nvic encoder usart sms smd bldc esp8266 tim timer gps examples
Архіви
