Спецификация для функциональных компонентов пользовательского интерфейса
https://standard-components.com
Библиотеки компонентов пользовательского интерфейса бывают разных форм и размеров. Эта спецификация предназначена как способ стандартизации соглашений об именах и API -интерфейсах для создания экосистемы взаимозаменяемых компонентов пользовательского интерфейса и поощрения большей повторной способности кода.
Чтобы создать библиотеки взаимозаменяемых компонентов пользовательского интерфейса, следует использовать следующее соглашение о именовании. Этот список преднамеренно ограничен и предназначен для того, чтобы стать отправной точкой для демонстрации. Больше компонентов, вероятно, будет добавлено с течением времени.
Компонент коробки представляет собой примитивный компонент макета модели, который обрабатывает маржу, прокладку, ширину и другие стили макета.
Гибкий компонент является расширением компонента коробки со специфическими свойствами Flexbox.
Текстовый компонент представляет собой примитивный типографский компонент, который обрабатывает размер шрифта, вес, высоту линии, выравнивание и другие типографские стили.
Компонент заголовка - это расширение текстового компонента, предназначенного для заголовков.
Компонент изображения - это компонент содержимого, который отображает изображения.
FounalImage - это расширение компонента коробки с реквизитом для отображения фоновых изображений.
Компонент кнопки - это интерактивный компонент со стилями, которые похожи на кнопку.
Компонент ссылки - это интерактивный компонент, предназначенный для навигации.
Стиль реквизит-это абстракция более высокого уровня в верхней части CSS, предназначенных для гибкости, и для решения проблемы стиля для каждого срока. Стилевые реквизиты в значительной степени основаны на свойствах CSS, с сокращенным реквизитом для края и прокладки.
Некоторые компоненты, такие как кнопки, используют варианты стиля для отображения различных версий, таких как primary и secondary стили кнопок. Варианты должны быть обработаны с variant опоры с сокращенным логическим реквизитом для primary и secondary вариантов.
Смотрите реквизит для большего.
Темы - это объекты, которые определяют значения, используемые стильными реквизитами. Темы обеспечивают постоянную маржу, заполнение, цвета, размеры шрифтов и другие константы пользовательского интерфейса.
Смотрите темы для большего.
Придерживаясь строгой структуры типа компонентов, компоненты в системе могут быть связаны с единственной целью и позволяют обеспечить большую взаимозаменяемость между библиотеками.
Компоненты компонента Ширина управления, высота и расстояние. Они не пытаются контролировать типографику или другие соображения.
Типографские компоненты связаны с семействами шрифтов, размерами, весами, ведущими, отслеживающими и другими свойствами. Типографские компоненты не связаны с макетом.
Компоненты контента отображают такие вещи, как изображения, видео и диаграммы, не влияя на макет, типографию или другие проблемы с стилем.
Интерактивные элементы, такие как ссылки, кнопки и элементы формы, требуют ввода пользователя и обычно не обрабатывают макет или типографские проблемы.
Компоненты стиля обрабатывают другие стили пользовательского интерфейса, такие как границы, радиусы, тени и градиенты, не влияя на макет или типографику.
Компоненты положения удаляют своих детей из обычного потока документов и должны использоваться экономно.
Сделано композитором | GitHub | MIT Лицензия