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. Финальный пример
Недавні записи
- Selenium
- Комп'ютерний зір (Computer Vision)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
Tags
raspberry-pi st-link bldc timer max1674 bluetooth eb-500 python ngnix rtc atmega servo avr pwm web tim uart remap brushless bme280 smd esp8266 eeprom bkp capture dht11 ethernet sensors websocket mongodb 3d-printer piezo rs-232 led css meteo i2c options exti html battery soldering bmp280 wifi mpu-9250 examples dma adc gpio sms motor solar hih-4000 lcd docker ssd1306 encoder dc-dc displays pmsm barometer watchdog java-script flask git gps mpu-6050 flash nvic books foc nodemcu programmator usb usart rfid mpx4115a stm32 ssd1331
Архіви