Element ui: Как работать с Element UI во Vue.js и без нее? — Хабр Q&A

32 User interface элементов для UI дизайнеров — bool.dev

User interface (UI) элементы — это части, которые дизайнеры используют для создания приложений или веб-сайтов. Они добавляют интерактивность в пользовательский интерфейс, предоставляя пользователю точки соприкосновения при навигации по ним. Кнопки, полосы прокрутки, пункты меню и чекбоксы.

Как дизайнер пользовательского интерфейса (UI), вы будете использовать UI элементы для создания визуального языка и обеспечения согласованности вашего продукта, что делает его удобным для пользователя и простым в навигации без особых усилий со стороны юзера.

В этом руководстве мы рассмотрим некоторые из наиболее распространенных элементов пользовательского интерфейса, когда и почему вы можете их использовать.

UI элементы:

UI элементы обычно делятся на одну из следующих четырех категорий:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

Input Controls

Navigation Components

Navigation Components помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

Informational Components

Informational Components делятся информацией с пользователями.

Containers

Containers содержат связанный контент вместе.

Словарь UI элементов:

Аккордеоны (Accordion)

Аккордеоны позволяют пользователям расширять и сворачивать разделы контента. Они помогают пользователям быстро перемещаться по материалам и позволяют дизайнеру пользовательского интерфейса включать большие объемы информации в ограниченном пространстве.

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

Типы иконок меню, которые названы в честь блюд. Используются очень часто в качестве отображения меню.

Хлебные крошки (Breadcrumb)

Хлебные крошки (навигационная цепочка, англ. Breadcrumbs) – это элемент навигации по сайту, который представляет собой путь от корня сайта, до текущей страницы, на которой в настоящий момент находится пользователь. Хлебные крошки обычно представляют собой полосу в верхней части страницы, обычно под шапкой сайта.

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

Карточки на данный момент довольно популярны среди UI/UX. Карточки – это небольшие прямоугольные или квадратные модули, которые содержат различную информацию — в виде кнопок, текста, мультимедиа и т.д. Карточки — отличный выбор дизайна пользовательского интерфейса, если вы хотите разумно использовать доступное пространство и предоставить пользователю несколько вариантов содержимого, не заставляя их прокручивать традиционный список.

Карусель (Carousel)

Карусели позволяют пользователям просматривать наборы контента, такие как изображения или открытки, часто гиперссылки на большее количество контента или источников. Самым большим преимуществом использования каруселей в дизайне UI является то, что они позволяют нескольким фрагментам контента занимать одну и ту же область пространства на странице или экране. 

Checkbox

Комментарий думаю в этом случае не нужен. Чекбокс это флаг который позволяет выбрать учитывать этот элемент или нет (например при выборе параметров товара).

Комментарий (Comment)

Dropdown

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео. 

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

Loader’ы могут принимать самые разные формы. Дизайнеры любят с ними экспериментировать. Loader’ы предназначены для отображения индикатора загрузки, пока на фоне отрабатывает какой-то экшн.

Модальное окно (popup)

Модальное окно — это блок, содержащий контент или сообщение, которое требует от вас взаимодействия с ним, прежде чем вы сможете закрыть его и вернуться к основному контенту.

Уведомления

Нотификации дают юзеру понять, что есть что-то новое, например, сообщение или какое-то системное уведомление.

Пагинация (Pagination)

Обычно находящийся в нижней части страницы. Пагинация помогает легко «браузить» страницы сайта находя нужную вам страницу.

Picker

Преимущество использования пикеров над полями ввода  (input field) заключается в том, что все пользователи выбырают данные и они в нужном формате сохраняются в базе данных, что делает информацию управляемой и легкой для доступа.  В инпуте ж нужно писать парсеры и распознаватели разных типов введенных данных.

Progress Bar

Progress Bar помогает визуализировать, на каком шаге находится пользователь. Обычно вы найдете их на оформлении заказов, отмечая различные этапы, которые пользователь должен выполнить для завершения покупки, такие как выставление счетов и отгрузка.

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов. 

Поле поиска (Search Field)

Боковая панель (Sidebar)

Sidebar нужен для отображения дополнительного контента, который не предназначен для основного блока

Ползунок (Slider Controls)

Slider это общий элемент пользовательского интерфейса, используемый для выбора значения или диапазона значений. Перетаскивая ползунок пальцем или мышью, пользователь может постепенно и точно регулировать значение — например, объем, яркость или желаемый диапазон цен при совершении покупок.

Stepper

Stepper — это элементы управления, которые позволяют пользователям регулировать значение. Однако, в отличие от ползунков, они позволяют пользователям изменять значение только в заранее определенных диапазонах, с заранее установленым шагом.

Тэг (Tag)

В дизайне пользовательского интерфейса теги — это, по сути, метки, которые помогают маркировать и классифицировать контент. Обычно они состоят из релевантных ключевых слов, которые облегчают поиск и просмотр соответствующего фрагмента контента. Тэги часто используются на социальных сайтах и в блогах.

Tab Bar

Панели вкладок отображаются в нижней части мобильного приложения и позволяют пользователям быстро перемещаться между основными разделами приложения.

Tooltip

Tooltip — это небольшие подсказки, которые помогают пользователям понять часть или процесс в интерфейсе.

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Источник: https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/

Эти пользовательские интерфейсы: командная строка как элемент UI

Элементы пользовательского интерфейса (UI) | Данил Фимушкин

Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ — это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер — это пользовательский интерфейс.

Основные элементы пользовательского интерфейса

Сейчас буду пояснять те слова, которые написал выше. Должно все встать на свои места. Рассказываю про пользовательский интерфейс не просто так. Эта информация нужна для того, чтобы вы не забывали в макетах прорисовывать все эти элементы. Если верстальщик что-то из этого в макете не найдет он сделает это так, как ему это кажется правильным.

Тексты (заголовки)

Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются h2, h3 … Hn, потому что так они называются в тегах html. В данном случае первый заголовок — это h2, далее h3 и так далее. Первый — это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.

Ссылки

Здесь текст, заголовок и выделена ссылка. Ссылки имеют 4 состояния: обычное, при наведении (может менять цвет, подчеркиваться или что-то еще, эффект), нажатие и посещенное состояние (нажали и потом вернулись на сайт, откуда ушли).

Кнопки

Они похожи на физические кнопки, по крайней мере задумывались так, как кнопки на магнитофоне. Поэтому имеют состояния: наведение и нажатие. Это нужно все прорабатывать.

Радиобаттон и чек-боксы

Слева радиобаттон (по-русски радиокнопка, но буду называть ее радиобаттон поскольку у дизайнеров так принято), справа чек-бокс. В радиобаттоне можно выбрать только 1 вариант, у нас выбран енот. В чек-боксе возможность множественного выбора, у нас выбран тюлень и енот.

Формы

Формы нужно прорабатывать сразу в нескольких видах. Неактивная форма (наверху), активная (вторая сверху), форма с ошибкой (третья сверху), форма успешно заполненная (четвертая сверху). Иногда при ошибке в форме лучше справа сделать всплывающую выноску, где явно указать ошибку. Например, если в форме для ввода телефона посетитель ввел буквы, сделать на выноске надпись «в этом поле можно вводить только цифры». Это очень поможет людям заполнить форму и повысит ее конверсию.

Попап

Попапы или всплывающие окна авторизации (входа) на сайт нужно всегда прорисовывать. На этой картинке нет, но вообще принято делать крестик справа для выхода из формы.

Пагинация

Пагинация — постраничная навигация, которая позволяет быстро переключаться между большим количеством товара, листов или чего-либо. Сейчас распространена такая форма пагинации как лента новостей в вк, когда вы прокручиваете до низа и подгружаются еще новости. Так же можно сделать в интернет-магазине. В этом случае все равно нужно предусмотреть кнопку «показать больше товаров». Если их уже загружено очень много и показать какой-то прелоадер, то есть элемент, который показывает загрузку страницы.

Хлебные крошки

Часто можно встретить в интернет-магазине. Например, слева написано интернет-магазин, справа мужские вещи, еще правей спортивная верхняя одежда, далее куртки. Она позволяет перейти при клике на желаемый уровень вверх. По-другому называется навигационная цепочка.

Прелоадер

Штука, которая показывает, что что-то загружается. Они бывают очень разные. Можно нагуглить «прелоадер гиф» и посмотреть разнообразие и использовать понравившиеся. Есть специальный прелоад генератор, где можно выбрать как он будет выглядеть, какого цвета, в каком формате его сохранять  и так далее. Советую использовать стандартные вещи, такие как кружки и полосочки, для особых проектов можно ипользовать что-то необычное, а можно нарисовать самому в фотошопе и сделать гиф анимацию. Не переусердствуй, это конечно важный элемент, но сильно много времени на него тратить все же не стоит.

Таблицы

Часто дизайнеры забывают рисовать таблицу. Например, если делаешь интернет-магазин производственного оборудования, то в описании и в карточке товара появляются сравнительные характеристики, веса и еще что-то. Удобно использовать таблицы, когда строчки чередуются цветом, это очень хорошо воспринимается зрителем. В данном случае изображена таблица с чек-боксами, это не обязательно. Не забывайте про таблицы.

Меню

Меню — это навигация по всему сайту. В данном случае показал, что есть всплывающее меню при наведении курсора. Это нужно прорисовывать. Обрати внимание как я показал наведение и интерактивность. Просто скачал курсор png и поставил его на место. Если у тебя большой макет, поставь много курсоров. Например, чтобы показать как работает меню, как выглядят кнопка и ссылка при наведении. При этом не забывай про обычное состояние. Таким образом в статичном макете можно легко показывать как ведут себя элементы юзер интерфейса в интерактивном состоянии.
Помни, что курсоры бывают разные: для PC и для мака.
Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.

Вот основные вещи про элементы пользовательского интерфейса. Эта информация для того, чтобы узнать все термины, которые используются при проектировании сайтов. И чтобы не забывать прорисовывать такие вещи как всплывающие меню, интерактивность кнопок и так далее. Пусть твои сайты после верстки выглядят такими, как ты их отрисовал. Аминь 🙂

элемент-пользовательский-фрагмент

не стесняйтесь отправлять пул реквест, если хотите внести свой вклад.

Описание: Это расширение фрагментов кода для библиотеки Element-UI в текстовом редакторе Atom.

Примечание: необходимо установить расширение language-vue или подобное.

Установка:

Чтобы установить это расширение, нужно выполнить несколько шагов.

1. Откройте «Атом» и найдите раздел «Установить пакеты».

     Пакеты -> Просмотр настроек -> Установить пакеты / темы
     

2. Найдите расширение element-ui-snippets и установите его

Список компонентов

• Основы
• Форма
• Данные
• Уведомление
• Навигация
• Другое

Фрагменты:

Базовый

Столбец

• элкол

• elcolr

   
    
  : xs = "" 
   
  : sm = "" 
   
  : md = "" 
   
  : lg = "" 
   
  : xl = "" 
   
  > 
   
   
   
    
   

• elcolsp

• элколфулл

   
    
  : span = "" 
   
  : offset = "" 
   
  : push = "" 
   
  : pull = "" 
   
  : xs = "" 
   
  : sm = "" 
   
   : md = "" 
   
  : lg = "" 
   
  : xl = "" 
   
   tag = "" 
   
  > 
   
   
   
    
   

Строка

• элров

• элровфлекс

   
    
   type = "flex" 
   
   align = "" 
   
   justify = "" 
   
  > 
   
   
   
    
   

• elrowc2

• элровг

• elrowfull

   
    
  : gutter = "0" 
   
   type = "" 
   
   tag = "div" 
   
   justify = "start" 
   
   align = "top" 
   
  > 
   
   
   
    
   

Контейнер

• элконтейнер

   
    
   
    
   
    
   
   
   
    
   
    
   
   < el-header height = ""> 
   
    
   
   
   
    
   
    
   
    
   
   
   
    
   
    
   
    
   

Кнопка

• elbtn

   
    
   type = "text" 
   
   @click. native = "" 
   
  > 
   
   
   
    
   

• elbtnfull

   
    
   size = "medium" 
   
   type = "primary" 
   
  : plain = "false" 
   
  : round = "false" 
   
  : circle = "false" 
   
  : loading = " false "
   
  : disabled =" false "
   
   icon =" "
   
  : autofocus =" false "
   
   native-type =" button "
   
   @ click.native =" "
   
  > 
   
   
   
   < / el-button> 
   

Ссылка на сайт

 
  
 href = "url" 
 
 target = "_ self" 
 
> 
 
 
 
  
 

 
  
 type = "primary" 
 
 underline = "true" 
 
 disabled = "false" 
 
 href = "url" 
 
 target = "_ self" 
 
 icon = "" 
 
> 
 
 
 
  
 

Форма

Радио

• Эльрадио

   
    
   v-model = "" 
   
   label = "" 
   
  > 
   
   
   
    
   

• elradio2

   
    
   v-model = "" 
   
   label = "" 
   
  > 
   
   вариант A 
   
    
   
   
   
    
   v-model = " "
   
   label =" "
   
  > 
   
   вариант B 
   
    
   

• эльрадиофулл

   
    
   v-model = "" 
   
   label = "" 
   
  : disabled = "false" 
   
  : border = "false" 
   
   size = "medium" 
   
   name = "" 
   
   @ change = "" 
   
  > 
   
   
   
    
   

• Эльрадиогруппа

   
    
   v-model = "" 
   
   @ change = "" 
   
  > 
   
   
   
    
   

• элрадиогруппполный

   
    
   v-model = "" 
   
   size = "medium" 
   
  : disabled = "false" 
   
   text-color = "# FFFFFF" 
   
   fill = "# 409EFF" 
   
   @ change = "" 
   
  > 
   
   
   
    
   

Флажок

• elcheck

• elcheckgr

   
    
   v-model = "" 
   
   size = "small" 
   
  > 
   
   
   
    
   

• elcheckfull

   
    
   v-model = "" 
   
   label = "" 
   
   true-label = "" 
   
   false-label = "" 
   
  : disabled = "false" 
   
  : border = " false "
   
   size =" medium "
   
   name =" "
   
  : checked =" false "
   
  : indeterminate =" false "
   
   @ change =" "
   
  > 
   
   
   
    
   

• elcheckgrfull

   
    
   v-model = "" 
   
   size = "medium" 
   
  : disabled = "false" 
   
  : min = "" 
   
  : max = "" 
   
   цвет текста = "# FFFFFF" 
   
   fill = "# 409EFF" 
   
   @ change = "" 
   
  > 
   
   
   
    
   

• elcheckbtn

   
    
  : label = "" 
   true-label = "" 
   
   false-label = "" 
   
  > 
   
   
   
    
   

• elcheckbtnfull

   
    
   label = "" 
   
   true-label = "" 
   
   false-label = "" 
   
  : disabled = "false" 
   
   name = "" 
   
  : checked = " false "
   
  > 
   
   
   
    
   

Входы

• elinput

   
    
   v-model = "" 
   
   placeholder = "" 
   
   /> 
   

• elinputpicon

   
    
   v-model = "" 
   
   placeholder = "" 
   
   prefix-icon = "" 
   
   /> 
   

• значок

   
    
   v-model = "" 
   
   placeholder = "" 
   
   suffix-icon = "" 
   
   /> 
   

• eltextarea

   
    
   type = "textarea" 
   
  : rows = "" 
   
   placeholder = "" 
   
   v-model = "" 
   
   /> 
   

• eltextareaauto

   
    
   type = "textarea" 
   
  : rows = "" 
   
   placeholder = "" 
   
   v-model = "" 
   
   autosize 
   
   /> 
   

• eltextareanr

   
    
   type = "textarea" 
   
  : rows = "" 
   
   placeholder = "" 
   
   v-model = "" 
   
   resize = "none" 
   
   /> 
   

• elinputnum

   
    
   v-model = "" 
   
   size = "small" 
   
  : precision = "" 
   
  : step = "" 
   
  : max = "" 
   
  : controls = " true "
   
   /> 
   

Выбирать

• иначе

   
    
   v-model = "" 
   
   placeholder = "" 
   
  > 
   
    
   v-for = "item in Array" 
   
  : key = "item. значение "
   
  : label =" item.label "
   
  : value =" item.value "
   
  : disabled =" item.disabled "
   
   /> 
   
    
   

• сбежал

   
    
   label = "" 
   
   value = "" 
   
  : disabled = "false" 
   
   /> 
   
    
   

Каскадер

Выключатель

Слайдер

Сборщик времени

• eltimepicker

   
    
   v-model = "" 
   
  : picker-options = "{
   
   selectableRange: '18: 30: 00 - 20:30:00 ', 
   
  }" 
   
   заполнитель = "Произвольное время" 
   
   /> 
   

• eltimeselect

   
    
   v-model = "" 
   
  : picker-options = "{
   
   начало: '08: 30 ', 
   
   шаг: '00: 15', 
   
   конец: ' 18:30 ', 
   
  } "
   
   placeholder =" Выбрать время "
   
   /> 
   

Выбор даты и времени

Загрузить

• элюплоад

   
    
   action = "" 
   
  : on-preview = "" 
   
  : on-remove = "" 
   
  : multiple = "true" 
   
  : limit = "" 
   
  : on- превышайте = "" 
   
  : file-list = "" 
   
  > 
   
    
   size = "small" 
   
   type = "primary" 
   
  > 
   
   загрузить файл 
   
    
   
   
   
   slot = "tip" 
   
   class = "el-upload__tip" 
   
  > 
   
   Только файлы jpg / png размером менее 500 КБ 
   
   
   
   
    
   

• элуплоадаватар

   
    
   action = "" 
   
   list-type = "picture-card" 
   
  : on-preview = "handlePictureCardPreview" 
   
  : on-remove = "handleRemove" 
   
  > 
   
     
   
    
   
    sync = "dialogVisible"> 
   
    
   
    
   

Показатель

• elrate

Палитра цветов

Перевод

Форма

• elform

   
    
  : model = "" 
   
  : rules = "" 
   
   ref = "" 
   
   @ submit.native.prevent 
   
   @keyup.enter.native = "" 
   
  > 
   
    
   
   
   
    
   
    
   
    
   type = "primary" 
   
   @ click = "" 
   
  : loading = "false" 
   
  > 
   
   
   
    
   
    
   
    
   

• эльформитм

Данные

Таблица

Тег

Прогресс

Дерево

Пагинация

• elpagination

   
    
   @ size-change = "sizeChange" 
   
   @ current-change = "currentChange" 
   
  : current-page = "currentPage" 
   
  : page-sizes = "[20, 40, 80 , 100] "
   
  : page-size =" pageSize "
   
   layout =" total, sizes, prev, pager, next, jumper "
   
  : total =" totalNum "background> 
   
    
   

Значок

Уведомление

Тревога

Навигация

Меню

• elmenu

   
    
  : default-active = "" 
   
   mode = "horizontal" 
   
   @ select = "handleSelect" 
   
  > 
   
   
   
    
   

• elmenuitm

   
    
   
   Параметр навигации 
   
    
   

• elsubmenu

   
    
   
    
   
    
   
   элемент 1 
   
    
   
    
   

• elmenuv

   
    
   mode = "vertical" 
   
  : default-active = "" 
   
  : collapse = "false" 
   
   background-color = "# 304156" 
   
   text-color = "# bfcbd9" 
   
   active-text-color = "# 409EFF" 
   
  > 
   
   
   
    
   

Вкладки

Панировочные сухари

• elbreadcrumb

   
    
   
    
  : to = "{path: '/'}" 
   
  > 
   
   
   
    
   
    
   

• elbreadcrumbitm

Заголовок страницы

Падать

• элдропад

   
    
   
    
   
   Раскрывающийся список 
   
    
   
    
   
    
   
    Действие 1  
   
    
   
    
   

• eldropdownmenu

• eldropdownitm

Шаги

Другое

Диалог

• элдиалог

   
    
   title = "Советы" 
   
  : видим.sync = "dialogVisible" 
   
   width = "30%" 
   
  : before-close = "handleClose" 
   
  > 
   
   
   
    
   
    
   
   Отмена 
   
    
   
    
   type = "primary" 
   
   @ click = "dialogVisible = false" 
   
  > 
   
   Подтвердить 
   
    
   
    
   
    
   

Подсказка

Трещать

• предыдущее время

   
    
   place = "top-start" 
   
   title = "Title" 
   
   width = "200" 
   
   trigger = "hover" 
   
   content = "это контент, это контент, это is content "
   
  > 
   
    
   
   Наведите указатель мыши для активации 
   
    
   
    
   

Popconfirm

• elpopconfirm

   
    
   title = "Вы действительно хотите удалить это?" 
   
  > 
   
    
   
   Удалить 
   
    
   
    
   

• elpopconfirmfull

   
    
   title = "Вы действительно хотите удалить это?" 
   
   confirmButtonText = "YES" 
   
   cancelButtonText = "NO" 
   
   confirmButtonType = "primary" 
   
   cancelButtonType = "text" 
   
   icon = "el-icon-question" 
   
   iconColor2 = " hideIcon = "false" 
   
  > 
   
    
   
   Удалить 
   
    
   
    
   

Карта

Карусель

Крах

График

• eltimeline

• eltimelinefull

   
    
   timestamp = "YYYY-MM-DD" 
   
  : hide-timestamp = "false" 
   
   Placement = "bottom" 
   
   type = "primary" 
   
   color = "" 
   
   size = "normal" 
   
   icon = "" 
   
  > 
   
   
   
    
   

• eltimelineitem

   
    
   timestamp = "YYYY-MM-DD" 
   
  > 
   
   
   
    
   

Делитель

Календарь

Изображение

• elimage

   
    
   src = "" 
   
   fit = "contain" 
   
  > 
   
   
   
    
   

• полный

   
    
   src = "" 
   
   fit = "contain" 
   
   alt = "image" 
   
   referrer-policy = "" 
   
  : lazy = "false" 
   
   scroll-container = "" 
   
  : preview-src-list = "[]" 
   
  : z-index = "2000" 
   
   @ load = "" 
   
   @ error = "" 
   
  > 
   
   
   
    
   

Backtop

• элбэктоп

• elbacktopfull

   
    
   target = "" 
   
  : visibility-height = "200" 
   
  : right = "40" 
   
  : bottom = "40" 
   
   @ click = "" 
   
  > 
   
   
   
    
   

Бесконечная прокрутка

Аватар

• элаватар

   
    
   shape = "circle" 
   
   size = "medium" 
   
   src = "" 
   
  > 
   
   
   
    
   

• полный

   
    
   icon = "" 
   
   size = "medium" 
   
   shape = "circle" 
   
   src = "" 
   
   srcSet = "" 
   
   alt = "" 
   
   fit = "cover "
   
   @error =" () => {} "
   
  > 
   
   
   
    
   

Выдвижной ящик

• элдравер

   
    
   title = "" 
   
  : visible = "false" 
   
   direction = "rtl" 
   
  > 
   
   
   
    
   

• eldrawerfull

   
    
  : append-to-body = "false" 
   
  : before-close = "" 
   
  : close-on-press-escape = "" 
   
   custom-class = "" 
   
   : destroy-on-close = "false" 
   
  : modal = "true" 
   
  : modal-append-to-body = "true" 
   
   direction = "rtl" 
   
  : show-close = "true" 
   
   size = "30%" 
   
   title = "" 
   
  : visible = "false" 
   
  : wrapperClosable = "true" 
   
  : withHeader = "true" 
   
   @open = "() => {}" 
   
   @opened = "() => {}" 
   
   @close = "() => {}" 
   
   @closed = "() => {}" 
   
  > 
   
   
   
    
   

JavaScript

• Elnoti

   
   это.$ notify ({
   
   title: 'Заголовок', 
   
   message: 'Message', 
   
   type: 'success', 
   
   duration: 2500, 
   
  }); 
   

• сообщение

   
   this. $ Message ({
   
   type: '', 
   
   message: '', 
   
   showClose: false, 
   
  }); 
   

• Elloading

   
   this. $ Loading ({
   
   lock: true, 
   
   text: 'loading ...', 
   
   spinner: 'el-icon-loading', 
   
   background: 'rgba (0, 0, 0, 0.7) ', 
   
  }); 
   

• Elalert

   
   this. $ Alert ('Это сообщение', 'Заголовок', {
   
   confirmButtonText: 'OK', 
   
   callback: (action) => {}, 
   
  }); 
   

• elconfirm

   
   this. $ Confirm ('Message', 'Title', {
   
   confirmButtonText: 'OK', 
   
   cancelButtonText: 'Cancel', 
   
   type: 'warning', 
   
  }). Then (() = > {
   
   
   
  }). Catch (() => {
   
   
   
  }); 
   

• elmsgbox

   
   это.$ msgbox ({
   
   title: 'Title', 
   
   message: 'Title', 
   
   showCancelButton: true, 
   
   confirmButtonText: 'OK', 
   
   cancelButtonText: 'Cancel', 
   
   beforeClose: (действие, экземпляр , Выполнено) => {
   
   if (action === 'confirm') {
   
   instance.confirmButtonLoading = true; 
   
   instance.confirmButtonText = 'Loading ...'; 
   
   setTimeout (() => {
   
   done (); 
   
   setTimeout (() => {
   
   instance._` {|} ~ -] +) * @ (?: [w] (?: [w -] * [w])?.) + [w] (?: [w -] * [w])? /}, 
   
   inputErrorMessage: 'Invalid Email' 
   
  }). Then (data) => {
   
   // Сделайте что-нибудь 
   
  }). Catch (() => {
   
   // Сделайте что-нибудь 
   
  } ); 
   

🎉 Element UI для Vue 3.0 уже скоро! | автор: iamkun

Element Plus, первая библиотека компонентов пользовательского интерфейса, написанная на TypeScript + Vue 3.0 Composition API, выпущена сегодня!

Пользовательский интерфейс Element, появившийся 13 марта 2016 года, вырос из внутренней библиотеки компонентов Ele.меня за 4 года до одной из самых популярных библиотек компонентов пользовательского интерфейса с открытым исходным кодом в экосистеме Vue.

На данный момент Element получил 48800 Github Stars и 1000000 загрузок NPM в месяц. Более 530 участников сообщества сделали 4400 коммитов, чтобы участвовать в обслуживании с нашей командой.

* Element team 40000 Github Star Празднование

Vue выпустила свою версию 3.0 в сентябре 2020 года. Для поддержки новейшего синтаксиса Vue 3.0 это прекрасная возможность для Element UI выпустить новый основной выпуск с множеством внутренних изменений и улучшений .

После 23 альфа-версий тяжелой разработки, мы рады сообщить, что доступна бета-версия Element Plus для Vue 3.0 СЕГОДНЯ !

Element Plus для Vue 3.0 — это новый проект, использующий TypeScript + Composition API. Мы переписали почти каждую строку кода, используя способ Vue 3.0, в основном включая:

• Используйте TypeScript для лучшего опыта разработки и предоставляем полное определение типа
• Используйте Vue 3.0 Composition API для упрощения и повторного использования логики
• Использовать Телепорт, новая функция, представленная в Vue 3.0 для рефакторинга компонентов
• Используйте Day.js, более легкую и лучшую библиотеку даты и времени
• Используйте Lerna для управления подпроектами
• Обновление основных зависимостей, таких как Popper.js, Async-validator
• Улучшение поддержки i18n для 52 языки

Что-то еще:

• Классный язык дизайна
• Оптимизированный API компонентов
• Дополнительные возможности настройки
• Более подробная и понятная документация

Есть много способов попробовать Element Plus для Vue 3.0 сегодня.

Вам нравится Element Plus? Не стесняйтесь давать нам звезду ❤️, чтобы поддержать нас.

В течение последних 4 лет мы очень ценим вашу пользу и поддержку, которые делают Element UI лучше и лучше. Element UI не может процветать без сообщества, мы тепло приветствуем вас присоединиться к нам на Github и сделать Element UI великолепным.

🎉 Интерфейс Element UI для Vue 3.0 уже скоро!

Сегодня выпущен

Element Plus, первая библиотека компонентов пользовательского интерфейса, написанная на TypeScript + Vue 3.0 Composition API!

Element UI, который родился 13 марта 2016 года, вырос из внутренней библиотеки компонентов Ele.меня за 4 года до одной из самых популярных библиотек компонентов пользовательского интерфейса с открытым исходным кодом в экосистеме Vue.

На данный момент Element получает 48800 звезд Github и 1000000 загрузок NPM в месяц. Более 530 участников сообщества сделали 4400 коммитов, чтобы участвовать в обслуживании с нашей командой.

* Команда элементов 40000 Празднование звезды Github

Element Plus для Vue 3.0

Vue выпустил его 3.0 в сентябре 2020 года. Для поддержки новейшего синтаксиса Vue 3.0 у Element UI есть прекрасная возможность выпустить новый крупный выпуск с множеством внутренних изменений и улучшений.

После 23 альфа-версий тяжелой разработки, мы рады сообщить, что доступна бета-версия Element Plus для Vue 3.0 СЕГОДНЯ !

Element Plus для Vue 3.0 — это новый проект, использующий TypeScript + Composition API. Мы переписали почти каждую строчку кода, используя Vue 3.0 способ, в основном в том числе:

• Используйте TypeScript для лучшего опыта разработки и предоставьте полное определение типа
• Используйте Vue 3.0 Composition API для упрощения и повторного использования логики
• Используйте Teleport, новую функцию, представленную в Vue 3.0 для рефакторинга компонентов.
• Используйте Day.js, более легкую и лучшую библиотеку даты и времени
• Используйте Лерну для управления подпроектами
• Обновление основных зависимостей, таких как Popper.js, Async-validator
• Улучшить поддержку i18n для 52 языков

Что-то еще:

• Классный язык дизайна
• Оптимизированный компонент API
• Дополнительные возможности настройки
• Более подробная и понятная документация

Начать

Есть много способов попробовать Element Plus для Vue 3.0 сегодня.

Вам нравится Element Plus? Не стесняйтесь давать нам звезду ❤️, чтобы поддержать нас.

В течение последних 4 лет мы очень ценим вашу пользу и поддержку, которые делают Element UI лучше и лучше. Element UI не может процветать без сообщества, мы тепло приветствуем вас присоединиться к нам на Github и сделать Element UI великолепным.

новых вопросов ‘element-ui’ — переполнение стека

  


  
  
  


  

   <электронный контейнер>

 
 
 
 поиск 


  
 
  
  
<сценарий>
  новый Vue ({
      el: '#app'
  });


  

  span> i {
   отступ: 12 пикселей 20 пикселей;
}
  

   
 
 
 поиск 
  

  13213 
1465 
  

  data () {
    возвращаться {
      нефильтрованное: '',
      список: '',
фильтры: {},
      chunkedList: [],
      всего: 0,
      listQuery: {
        Страница 1,
        предел: 20,
      },
    };
  },  

 
chunkList (список) {
      const result = []
      var i, j, temparray, chunk = this.listQuery.limit;
      for (i = 0, j = list.length; i  {
        const filterValues ​​= фильтры [ключ]
        пусть filterRows

        if (filterValues.length! == 0) {
          areFiltersActive = true
          filterValues.forEach ((значение, y) => {
            const listToFilter = я === 0? список: filterList
            filterRows = listToFilter.filter (row => {
                строка возврата [ключ] === значение
                
            })

            if (i! == 0 && y === 0) {
              filterList = filterRows
            } еще {
              filterList.push (... filterRows)
            }
          })
          я ++
        }
      })

      const result = areFiltersActive? filterList: список

      this.list = результат
      this.chunkList (результат)
    },  

  <эл-стол
 v-loading = "listLoading"
 : data = "chunkedList [listQuery.page - 1]"
 граница
 соответствовать
 выделить текущую строку 
 @ selection-change = "handleSelectionChange"
 @ filter-change = "handleFilterChange"
>        ...