Element 2.0 был выпущен в прошлую пятницу, и вместе с тем веб-сайт был обновлен, чтобы отображать документацию 2.0 по умолчанию (и, конечно же, вы все еще можете выбрать документы 1.x из раскрывающегося меню).

Element 2.0 содержит 210 коммитов, в том числе более 90 новых функций и оптимизаций. Их можно условно разделить на следующие категории:

Компонентные функции

  • Прежде всего, мы улучшили удобство использования. Вот несколько примеров: в 1.x, если вам нужно изменить размер компонентов по умолчанию, вам нужно будет добавить атрибут size для каждого компонента. Теперь вы можете настроить размер по умолчанию для всех компонентов с помощью всего одной строчки кода. Другой пример: новая тема написана на SCSS, поэтому пользователи SCSS могут легко изменять переменные стиля, чтобы получить собственную тему. В то же время мы также добавили некоторые методы для компонентов, чтобы вы могли программно запускать какое-то поведение компонентов. Например, мы добавили методы open и close для Menu, чтобы открывать и закрывать SubMenus, и теперь у Table есть метод toggleRowExpansion, который используется для разворачивания или сворачивания расширяемых строк.
  • Во-вторых, теперь мы поддерживаем некоторые из популярных требований, которые задают наши пользователи. Чтобы назвать несколько, теперь Dialog может быть вложен в шаблон, Table поддерживает rowspan и colspan, а MessageBox может отображать строки HTML.
  • В-третьих, мы обогатили API-интерфейсы компонентов, чтобы их можно было использовать в более широком бизнес-сценарии. Например, теперь вы можете настроить, в каком углу экрана появляется всплывающее уведомление, и использовать настраиваемый значок в разделе «Загрузка».
  • И последнее, но не менее важное: мы исправили некорректный дизайн в 1.x и улучшили согласованность API. Одно большое изменение заключается в том, что событие change компонентов формы теперь срабатывает только при взаимодействии с пользователем, сохраняя его согласованность с собственным событием change.

Пожалуйста, обратитесь к журналу изменений за подробностями.

Новая тема

В элементе 2.0 появилась новая тема: theme-chalk. Каков принцип дизайна этой темы? Послушаем, что говорит наш дизайнер Нико Сюэ:

В соответствии с текущими тенденциями дизайна, обновленный Element 2.0 адаптируется к текущей эстетике. Чтобы отказаться от избыточных модификаций конструкции, мы придерживаемся принципа проектирования «меньше значит больше». Например, с появлением все большего количества экранов с высоким разрешением мы делаем Element «больше», чем 1.x, чтобы удобнее было читать. В то же время, помимо размера компонентов по умолчанию, мы также предлагаем различные размеры для удовлетворения различных потребностей.

Кроме того, при разработке 2.0 одним из основных принципов является соблюдение согласованности компонентов. Например, мы сначала определили четыре высоты кнопки (40 px, 36 px, 32 px, 28 px); после этого значения Input, Select и других компонентов сохраняются с одинаковой высотой. Это позволяет выводить проект на основе Element 2.0 для обеспечения высокой степени единства.

В целом 2.0 более современный и дружелюбный, чем 1.х.

Доступность

Мы также улучшили доступность компонентов в версии 2.0. Следующее - от @ maranran, ответственного за эту работу:

Доступность означает, что компоненты, поведение и структуры DOM на странице являются семантически правильными, поэтому устройства AT могут передавать информацию о странице людям с ограниченными возможностями, в том числе слепым, физическим и когнитивным.

Как UI-библиотека базовых компонентов, Element инкапсулирует базовую структуру DOM. В версии 2.0 мы проделали базовую работу по обеспечению доступности, чтобы помочь людям с ограниченными возможностями понимать страницу и взаимодействовать с ней. В то же время мы упростили разработчикам возможность постоянно улучшать доступность в своих проектах.

То, что мы сделали, состоит из двух частей: повышения работоспособности клавиатуры и улучшения семантики компонентов. Функциональность клавиатуры позволяет людям с ограниченными возможностями переходить к каждому компоненту с помощью клавиатуры и взаимодействовать с ними, используя влево, вправо, вверх, вниз, ввод, esc и т. Д. Что касается семантики, мы использовали технологию WAI-ARIA для добавления ролей, состояний , свойства для разных компонентов, чтобы UA и AT могли правильно передавать семантику компонентов.

Документация

Веб-сайт 2.0 и документация также были обновлены, и, надеюсь, вы найдете их более простыми в использовании.

Основными участниками Element 2.0 являются (в алфавитном порядке): @ baiyaaaaa @ Dreamacro @ Leopoldthecoder @l iril-net @ maranran @ wacky6 @ waynecz. Кроме того, есть много пользователей сообщества, которые внесли свои предложения по 2.0, и мы им благодарны.

Выпуск версии 2.0 знаменует собой новую эру для Element, и это также означает, что версия 1.x переходит в режим обслуживания. Мы продолжим поддерживать его до 1 декабря 2017 года.

Надеемся, вам понравится Element 2.0.