smart-icon

Элемент Smart Icon может быть представлен в виде иконки-текста, иконки из набора Font Awesome, иконки управления, спиннера или изображения.

Свойства

text: string

Текст содержимого иконки.

name: string | Array<string>
Название иконки из набора Font Awesome. Доступно большое количество иконок.

Имеет приоритет над параметром text — его значение будет проигнорировано.

Примеры значений:
'user'
['fas','shopping-cart']
['system','android-back']

url: string
Адрес картинки иконки. Имеет приоритет над параметрами text и name — их значения будут проигнорированы.

size: number | Size
По-умолчанию: "md"
Размер иконки. Может быть произвольное число или таковой из заданного набора.
Возможные значения: "sm", "md", "lg", "xl", "2xl", "3xl", number

class: string
По-умолчанию: "square"
Форма иконки: квадрат или окружность. Квадрат по-умолчанию.
Возможные значения: "square", "circle"

badges: Array<T>

Дополнительные иконки-статусы. Где T может быть Badge или <smart-icon> в качестве статуса.

Badge: { badge, position, style }

badge: string
- Текст статуса.
position: Position
- Расположение статуса относительно основной иконки. Четыре заданных расположения или возможность задать произвольное значение как custom - тогда расположения задаётся через style свойства left, right, top и bottom.
- Это же свойство может быть использовано для позиционирования иконки-статуса <smart-icon>.
- Возможные значения: top-left, top-right, botton-left, bottom-right, custom
style: Style
- Стиль статуса.

style

Изменение внешнего вида, расположения и геометрии блока.

padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
Внутренние отступы контейнера. Подробнее.
margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
Внешние отступы блока. Подробнее.
position
Метод позиционирования блока: relative или absolute. Подробнее.
top, right, bottom, left
Смещение относительно исходной позиции. Подробнее.
border
Задание границ для блока по всем четырём сторонам: толщина стиль и цвет. Подробнее.
borderTop, borderRight, borderBottom, borderLeft
Задание индивидуальных границ для сторон блока: толщина и цвет. Подробнее.
borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
Скругление углов границ. Подробнее.
borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
Толщина границ. Подробнее.
borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
Цвет границ. Подробнее.
backgroundColor
Цвет фона блока. Подробнее.
opacity
Непрозрачность всего блока с его содержимым. Подробнее.
elevation
Высота тени. Подробнее.
shadowColor
Цвет тени блока. Подробнее.
alignSelf
Выравнивание конкретного блока поперёк главной оси контейнера. Подробнее.
transform
Преобразование геометрии блоков и контейнеров в 2D и 3D пространстве. Подробнее.

Примеры

Пример иконок из набора Font Awesome. Доступно много больше иконок на выбор.

Доступные спиннеры

Системные кнопки управления

Круглая и квадратная иконки и Иконки текстом, значком и картинкой.

Варианты цвета, фона и рамки иконки. Для рамки используется цвет иконки, если не задан свой собственнй.

Текстовые иконки-статусы. Статус может выходить за границы иконки. В таком случае важно чтобы в контейнере содержащем иконку было достаточно для него места. Иначе статус будет обрезан.

Размер статуса подбирается соответственно размеру иконки.

Позиционирование статуса.

Стилизация текстового статуса. Обратите внимание на разницу в прозрачности двух статусов. У одного статуса прозрачен только фон, а у дрогого прозрачно всё, включая текст.

<smart-icon> в качестве статуса.

Все четыре вида статусов на одной иконке.

Предложить изменения