Как сделать адаптив таблицы для мобильной версии
HTML-код
- Опубликовано: 17 окт 2024
- Как сделать адаптив таблицы для мобильной версии. Объясняю простым языком и публикую исходники в Figma Community
Ссылка на дизайн систему таблицы Figma Community www.figma.com/...
Ссылка на статью / %d0%b0%d0%b4%d0%b0%d0%...
👉 Смотрите видео до конца, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
►Мой гайд в Figma Community: cutt.ly/HWcW3Tm
►Instagram - cutt.ly/jWcQ3Mk
Добавляйтесь в друзья:
★ Facebook - cutt.ly/nWcWecJ
★ Вконтакте - cutt.ly/5WcWu2W
★ Linkedin - cutt.ly/DWcWb5q
Вступайте в сообщества:
★ Полезные публикации о дизайне Вконтакте - cutt.ly/0WcEtXP
★ Telegram канал t.me/joinchat/...
★ Telegram чат: t.me/joinchat/...
Мои работы:
★ Dribbble: cutt.ly/1WcEx6E
★ Behance: cutt.ly/UWcEW0I
#figma #webdesign #uxui
Спасибо блоьшое! Ваше видео очень помогло)
Валерия, спасибо за труд, очень полезно!
Очень рада, что полезно 🍀
Супер! Спасибо, за ответ на мой комментарий!)
Клёвое видео, за статью по адаптиву таблиц спасибо
Ееее, я знала, что статью оценят. 😁
Спасибо! 🌷
Спасибо за видео! Жду видео о работе в мейл ру!
В следующую пятницу выйдет этот ролик 😉
Скажите пожалуйста, а почему горизонтальный скролл в таблице плох? Вы упоминули это относительно адаптива под планшет на шоте с дриббла
Если например, много столбцов и они не помещаются на экран
Горизонтальный плох, потому что это не удобно. Нужно делать нормальный адаптив.
круто! спасибо вам! я бы только поменяла в адаптивках местами инфу из таблицы и название столбцов, ибо глазами когда ведешь от названия карточки ниже, то встречаешь заголовок строки, который по сути ниже будет таким же и в следующих карточках, поэтому придется туда сюда глазами мотать (то на инфу, то на название карточки), и тем более выравнивание по правой стороне читается тяжелее. название столбца - это же второстепенная информация, которая чаще всего и так понятна (в случае со второй таблицей, где контактные данные)
в общем суть в том, чтобы было так: название карточки, ниже сразу данные по левой стороне, а по правой стороне, как доп инфа, уже название строки (в десктопе название столбцов)
Спасибо за мнение. Но на мой взгляд это не очень логично. Я бы не сказала, что название столбца это второстепенная информация. Без него пользователь может вообще не понять что происходит в таблице.
Спасибо за ролик! Я всегда делала таблицу иначе. "Верхушку" отдельным компонентом и ряд отдельным компонентом, и потом для мобильных версий создавала варианты, но в таком случае она была не очень адаптивной, отступы нужно было менять вручную. Сейчас нужно делать дизайн, в котором будет пять видов различных таблиц и я прямо задумалась не воспользоваться ли вашим способом, показанном в прошлом видео. Но получается в таком случае для мобильных нужно создавать отдельные компоненты, вариантами уже не получится?
Да, для мобилки лучше создавать отдельную таблицу. Но я тут подумала, может попробовать сделать таблицу не колонами, а строками. Не знаю будет ли это удобно. Возможно для разных задач нужен свой подход.
Круто)
Но как по мне, в таблице с аватарками надо было поднять иконки на уровне с аватарками
Первая же ссылка в статье, которую вы рекламируете (сайт какого-то Мельникова) ведет на сайт с порнухой.