Краткий обзор общего стиля библиотеки компонентов

внешний интерфейс дизайн

предисловие

Как интерфейсная библиотека компонентов пользовательского интерфейса, с точки зрения стиля, она должна соответствовать двум требованиям:последовательностьа такженастраиваемый[1].

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

последовательность

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

настраиваемый

По размеру настраиваемой детализации ее можно разделить на настраиваемую на уровне компонентов и настройку темы всей библиотеки компонентов. Учащиеся, имеющие опыт использования компонентов, знают, что при использовании определенных компонентов мы можем передавать определенные параметры или параметры темы, и компоненты могут представлять различные характеристики. Кроме того, некоторые известные библиотеки компонентов также предоставляютНастройка темыСвязанные методы, такие как antd-mobile, Vant и Element, особенно Element, предоставляют множество способов настройки темы.

Спецификация проекта сначала

Упомянутая выше согласованность гарантируется «спецификацией дизайна», которая на самом деле включает в себя много контента. На наш взгляд, это может быть набор образов в библиотеке компонентов.杂乱无序изУниверсальная переменная(Спецификация проекта ≠ общая переменная), но в нем все же есть некоторые рутины. Также рекомендуется много общаться с дизайнерами, чтобы генерировать мыслительные коллизии. В процессе написания кода вы найдете некоторое другое мышление. В процессе общения с дизайнерами этот опыт очень глубокий.

Что содержит техническое задание на проектирование?

Какие спецификации дизайна тесно связаны с библиотекой компонентов? Ele.me несколько дней назад, фронтенд-архитекторЛиньсиВ разделе «Практика создания библиотеки компонентов Vue» упоминается следующее содержание:

  • Единый визуальный стиль
    • цвет
    • макет
    • шрифт
    • значок
  • Единое взаимодействие
    • продолжительность, медленно
    • движущийся путь
    • морфинг, аранжировка

Как реализуются проектные спецификации?

На самом деле, есть ключевое слово выше:Объединить. Как мы обеспечиваем единообразие стиля? Да, это общая переменная, упомянутая только что (но я все еще не согласен с «техническое задание = общая переменная», трудно выразить это чувство), взяв в качестве примера antd-mobile, она включает в себя следующее содержание[2]:

  • Цвет (шрифт, заливка, общий, граница, прозрачность)
  • размер шрифта
  • семейство шрифтов
  • закругленные углы
  • размер границы
  • Расстояние (горизонтальное, вертикальное)
  • высоко
  • Размер значка
  • Некоторые стили компонентов

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

Связанные расширения:

Настройка темы

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

  1. С помощью подключаемых модулей, связанных с инструментами упаковки, таких как gulp/webpack, настроить переменные стиля, которые необходимо настроить, и переопределить соответствующие значения переменных во время упаковки;
  2. Вручную измените общие переменные или напишите новый набор файлов стилей, чтобы переопределить стили библиотеки компонентов.

За подробностями обращайтесь к практике известных библиотек компонентов:

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

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

Другие распространенные стили

В дополнение к связанным стилям в спецификации дизайна, он фактически включает, помимо прочего, следующие общие/повторно используемые стили:

  • reset / normalize
  • hairline
  • animation
  • util / mixins
  • clearfix
  • ...

Здесь не только библиотеки компонентов, но и общие стили в общих проектах, я думаю, все это понимают и не будут здесь представляться. Но это также важно и является частью стиля библиотеки компонентов!

структура кода

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

style
├── core
|   ├── animation.scss
|   ├── color-card.scss
|   ├── hairline.scss
|   ├── mixins.scss
|   └── normalize.scss
├── themes
|   ├── skin
|   |   ├── _brown.scss
|   |   ├── _green.scss
|   |   ├── _pink.scss
|   |   ├── ……
|   |   └── _white.scss
|   └── default.scss
├── core.scss
└── index.scss

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

Перспектива

Есть также некоторые вопросы, связанные со стилем, которые следует учитывать:

  1. Icon
  2. HD-решение
  3. Совместимость (например, совместимость с flex и т. д.)
  4. нагрузка по требованию
  5. ...

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

Ссылаться на

Категории