Элемент 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
Изменение внешнего вида, расположения и геометрии блока.
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> в качестве статуса.
Все четыре вида статусов на одной иконке.
