Здесь лежат компоненты и утилиты, предназначенные для работы в веб-окружении.
Установка
$ npm i @qlean/york-web
Для нормальной работы компонентов в CSS должен быть доступен шрифт Museo Sans.
Респонсивность
В любом компоненте ряд пропсов может быть респонсивными, т.е. поддерживать разные значения для разных разрешений. Это не обязательно должно быть реализовано для каждого пропса. Респонсивные пропсы передаются в компонент через наборы со специальными именами — mobileProps
, baseProps
и wideProps
. Пример:
<Button
rank={1}
mobileProps={{
rank: 2,
}}
/>
Эта кнопка будет использовать ранг 1
по умолчанию, но в мобильной версии это будет перекрыто рангом 2
. Это должно работать для всех компонетов и пропсов, где это вообще осмыслено.
Расширение и композиция
Лучший способ расширить стили компонента, которые не поддерживаются пропсами — создать на его основе другой компонент с помощью styled
:
const StyledText = styled(Text)`
color: tomato;
text-decoration: underline;
`
В некоторых случаях это неудобно. Например, мы хотим чтобы <Text>
наследовал цвет родителя, тогда спасет color="inherit"
. Другой кейс — нужно расширить <Button/>
, но не хочется возиться с переписыванием всех стилей, которые генерируются по умолчанию. Для этого в компоненте предусмотрен rank={0}
который сбрасывает стили, но не устанавливает свои.
Если нужно переопределить стандартный html-тег компонента, то можно воспользоваться пропом as
https://www.styled-components.com/docs/api#as-polymorphic-prop
<Text preset="header1" as="h1">
Заголовок
</Text>