предисловие
element-uiПопулярность библиотеки компонентов обусловлена не только богатым набором компонентов и удобной документацией, но и красивым дизайном. Как упоминалось в общей статье о дизайне библиотеки компонентов,element-uiЗа этим стоит сильная команда дизайнеров, и они разработали набор спецификаций дизайна для библиотеки компонентов.
анализ спроса
Когда мы ходим в дизайн компонентной библиотеки, первое, что следует учитывать цвета дизайна, шрифты, границы, значки этих основных элементов, которые являются краеугольным камнем различных компонентов, если не выполнено эти базовые конструкции, так что посмотрите из библиотеки компонентов До должен быть очень коттедж.
Эти базовые проекты должны соответствовать определенным спецификациям дизайна. Опытные дизайнеры формулируют набор спецификаций при проектировании. Как программисты, при реализации этого набора спецификаций дизайна мы также можем следовать определенным спецификациям на уровне кода.
Дизайн и реализация
Далее мы представим дизайн и реализацию этих четырех основных элементов с точки зрения кода.
цвет
Элемент Чтобы избежать различий в визуальной коммуникации, используйте определенный набор цветовых палитр для указания цветов, чтобы обеспечить единообразный внешний вид создаваемых вами продуктов.
основной цвет
Основной фирменный цвет Element — яркий, дружелюбный синий.
как показано на рисунке,element-uiПредоставляет набор цветов на основе синего, вы можете видеть, что в дополнение к основному цвету#409EFFКроме того, есть серия градиентного синего цвета, так как же она реализована в коде?
element-uiОпределение цвета находится вpackages/theme-chalk/src/common/var.scssсередина:
$--color-primary: #409EFF !default;
определено здесь$--color-primaryпеременная со значением#409EFF, обратите внимание, что использование!defaultключевое слово, его значение здесь в том, что снаружи было определено$--color-primary, то используется заданное значение, в противном случае присваивание#409EFF. Причина этого должна быть связана с пользовательским цветом темы.Если пользователь определяет новый цвет темы, эта переменная может указывать на новый цвет темы.
Для градиентного цвета темы синий,element-uiРеализация выглядит следующим образом:
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
Здесь определены 9 переменных, все они используютсяmixфункция,mixЭта функция встроена в sass, она представляет собой смесь двух цветов, а третий параметр представляет пропорцию каждого из двух цветов, при этомmix($--color-white, $--color-primary, 10%)Например, это означает$--color-white(белый) на 10%, в то время как$--color-primary(основной цвет) составляет 90%.
В этом случае,element-uiДоминирующие цвета различной глубины цвета легко достигаются.
вторичный цвет
Цвета сцены, отличные от основного цвета, необходимо использовать в разных сценах (например, опасные цвета указывают на опасные операции).
Реализация этих вспомогательных цветов аналогична, удачный цвет мы берем для примера, остальные повторяться не будем.
$--color-success: #67C23A !default;
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
также черезmixСпособ смешивания белого для создания удачных цветов разной глубины цвета.
нейтральный цвет
Нейтральные цвета используются для цвета текста, фона и границ. Иерархия выражается использованием различных нейтральных цветов.
Что касается цвета текста, определены четыре переменные от темного к светлому:
/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;
Что касается цвета границы, определены четыре переменные от темного к светлому:
/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;
Что касается цвета фона, определены три переменные:
/// color|1|Background Color|4
$--color-black: #000000 !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--background-color-base: #F5F7FA !default;
Обратите внимание, что третья переменная здесь отличается от прозрачного цвета на рисунке, потому что теоретически прозрачный фон не нужно настраивать.backgroundДа, по умолчанию он прозрачный. Здесь третья переменная также представляет базовый белый цвет, который используется в нескольких компонентах.
шрифт
element-uiШрифты унифицированы и стандартизированы и стремятся обеспечить наилучший эффект отображения в каждой операционной системе.
шрифт
На рисунке показаны различные стили шрифтов, некоторые из которых знакомы нашим пользователям Mac.PingFang SC, и некоторые привычные для победы пользователиMicroSoft YaHei.
существуетpackages/theme-chalk/src/reset.scssГлобальный стиль шрифта определяется в:
body {
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
font-weight: 400;
font-size: $--font-size-base;
color: $--color-black;
-webkit-font-smoothing: antialiased;
}
мы знаемfont-familyВы можете указать список шрифтов через запятую, и браузер выберет первый в списке шрифт, который установлен на компьютере.
размер шрифта
element-uiОпределено 6 размеров шрифта, они определены вpackages/theme-chalk/src/common/var.scssсередина:
/// fontSize|1|Font Size|0
$--font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$--font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$--font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$--font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$--font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$--font-size-extra-small: 12px !default;
Минимум 12px, максимум 20px. Обычно в дизайне не рекомендуется использовать шрифты меньше 12 пикселей, слишком маленькие шрифты будут неудобны для людей с плохим зрением.
высота строки
Как показано на рисунке, обычно, когда мы сталкиваемся с многострочным текстом, мы устанавливаем разныеline-heightБудут различные эффекты рендеринга, обычно установленные как минимум на 1,5. Это поможет улучшить работу в условиях плохой видимости, а также поможет людям с когнитивными нарушениями, такими как дислексия.
element-uiсуществуетpackages/theme-chalk/src/common/var.scssЕсть только 2 высоты строки, определенные в :
/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-secondary: 16px !default;
element-uiРазмер высоты строки напрямую жестко запрограммирован в большинстве реализаций компонентов, но обычно лучше использовать безразмерное значение вместо определенного размера, потому что после изменения размера шрифта вам не нужно использовать безразмерное значение. Затем вручную измените высоту строки. Другим особым случаем является то, что если размер текста будет меняться по мере увеличения страницы, использование безразмерного значения гарантирует, что высота строки также будет масштабироваться пропорционально.
Рамка
element-uiЕдиная спецификация границ, которую можно использовать в таких компонентах, как кнопки, карточки и всплывающие окна.
Границы и закругленные углы
element-uiПредоставляет ряд определений для стиля границы с закругленными углами, вpackages/theme-chalk/src/common/var.scssсередина:
/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|1|Radius|0
$--border-radius-base: 4px !default;
/// borderRadius|1|Radius|0
$--border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$--border-radius-zero: 0 !default;s
Который включает в себя толщину границы, цвет, стиль, переменный размер скругления, а также цвет наведения при сборке.
проекция
element-uiПредоставляет несколько часто используемых методов проецирования, определенных вpackages/theme-chalk/src/common/var.scssсередина:
/// boxShadow|1|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
// boxShadow|1|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
/// boxShadow|1|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
если правильноbox-shadowСтуденты, которые не понимают соответствующие значения атрибутов, могут перейти на mdn, чтобы проверить соответствующую информацию и узнать; они также могут отлаживать значения его атрибутов в Интернете, чтобы увидеть различные эффекты рендеринга.
значок
element-uiПредоставляется набор часто используемых значков.
инструкции
Вы можете использовать его напрямую, установив имя класса el-icon-iconName. Например:
Соответствующий код:
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
Нам нужно только просто установить имя класса, чтобы представить эти значки шрифта (околоbuttonРеализация будет упомянута в следующей статье), как это делается?
Метод реализации
фактическиelement-uiПредоставленные значки сделаны с использованиемIconFontтехнологии, вpackages/theme-chalk/src/icon.scssОпределено в:
@font-face {
font-family: 'element-icons';
src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: $--font-display;
font-style: normal;
}
[class^="el-icon-"], [class*=" el-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'element-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-edit:before {
content: "\e78c";
}
// ...
Во-первых, используйте@font-faceПользовательский шрифт определен, его источникpackages/theme-chalk/src/fonts/Файлы значков шрифтов, определенные в каталоге.
Во-вторых, используйте селектор атрибутов, чтобы отфильтровать его.el-icon-начиная с или сel-icon-элементы имени класса, которые соответствуютfont-familyэто пользовательский шрифтelement-icons.
Затем, в соответствии с разными значками, определите разныеel-icon-xxxимя класса и пройтиbeforeПсевдокласс указывает соответствующийcontentзначение, так что пользователям нужно только использоватьel-icon-xxxИмя класса может ссылаться на соответствующий значок.
Наконец, я рекомендую 2 веб-сайта для создания библиотек иконок шрифтов.Iconfontа такжеicomoon.
Суммировать
Эта статья, как правило, очень проста.Для спецификаций дизайна, предоставленных дизайнером,element-uiОсновной метод реализации — определить множество переменных в публичном файле sass, а стили в компонентах будут вводить эти переменные в будущем, что эквивалентно программному написанию CSS, без прописывания мертвых шрифтов и цветов внутри каждого компонента. значение границы. Преимуществами этого являются не только сильная семантика, но и хорошая ремонтопригодность.После изменения дизайна этих основных элементов я могу просто изменить эти значения переменных без изменения компонентов.Кроме того, общий пользовательский дизайн темы компонентов также предусмотрено.Очень большое удобство.
Изучив эту статью, вы также можете попробовать определить общие файлы стилей и переменные в своих проектах, а затем импортировать их в компоненты. Конечно, если ваша библиотека компонентов поддерживает пост-компиляцию, вы даже можете напрямую импортировать переменные, определенные в библиотеке компонентов.
Если вы узнаете то, чего не знаете, вы добьетесь прогресса Если вы найдете этот тип статей полезным, вы можете порекомендовать его своим друзьям.
Следующее превью: Секреты технологии Element-UI (6) - Кнопочный компонент.
Добро пожаловать на мой официальный аккаунт "Фронтальная частная кухня Лао Хуанга". Серия статей "Раскрытая технология Element-UI" будет обновлена и опубликована в официальном аккаунте как можно скорее. Кроме того, я часто буду делиться некоторыми продвинутыми фронтами -конечные знания. , галантереи и иногда делитесь некоторыми навыками мягкого качества.