SStatus

Текстовый статус (как правило с иконкой).

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Привязка к FontAwesome, который бесплатен и оптимально решает задачи иконок для стартапов.
2. Привязка к стандартым цветам проекта, упрощает семантику до минимальных настроек и унифицирует цвета.

Базовый пример

Работает

Остановлен

Не запущен

<SStatus color="green" icon="check">Работает</SStatus>
<SStatus color="red-dark" icon="triangle-exclamation">Остановлен</SStatus>
<SStatus color="text-light" icon="pause">Не запущен</SStatus>

<template>
    <SStatus color="green" icon="check">Работает</SStatus>
    <SStatus color="red-dark" icon="triangle-exclamation">Остановлен</SStatus>
    <SStatus color="text-light" icon="pause">Не запущен</SStatus>
</template>

<script setup>
import { SStatus } from 'startup-ui'
</script>

Различные цвета

Помимо иконок можно кастомизировать цвет статуса по стандартной палитре цветов:

text

text-light

primary

primary-dark

primary-darkest

red

red-dark

yellow

yellow-dark

green

green-dark

<SStatus color="text" icon="check">text</SStatus>
<SStatus color="text-light" icon="check">text-light</SStatus>
<SStatus color="primary" icon="check">primary</SStatus>
<SStatus color="primary-dark" icon="check">primary-dark</SStatus>
<SStatus color="primary-darkest" icon="check">primary-darkest</SStatus>
<SStatus color="red" icon="check">red</SStatus>
<SStatus color="red-dark" icon="check">red-dark</SStatus>
<SStatus color="yellow" icon="check">yellow</SStatus>
<SStatus color="yellow-dark" icon="check">yellow-dark</SStatus>
<SStatus color="green" icon="check">green</SStatus>
<SStatus color="green-dark" icon="check">green-dark</SStatus>

<template>
    <SStatus color="text" icon="check">text</SStatus>
    <SStatus color="text-light" icon="check">text-light</SStatus>
    <SStatus color="primary" icon="check">primary</SStatus>
    <SStatus color="primary-dark" icon="check">primary-dark</SStatus>
    <SStatus color="primary-darkest" icon="check">primary-darkest</SStatus>
    <SStatus color="red" icon="check">red</SStatus>
    <SStatus color="red-dark" icon="check">red-dark</SStatus>
    <SStatus color="yellow" icon="check">yellow</SStatus>
    <SStatus color="yellow-dark" icon="check">yellow-dark</SStatus>
    <SStatus color="green" icon="check">green</SStatus>
    <SStatus color="green-dark" icon="check">green-dark</SStatus>
</template>

<script setup>
import { SStatus } from 'startup-ui'
</script>

Интерфейс компонента

Свойства (Props)

Название	Тип	По умолчанию	Описание
color	string	undefined	Цвет текста и иконки из стандартной палитре: text, text-light, primary, primary-dark, primary-darkest, red, red-dark, yellow, yellow-dark, green, green-dark и др.
icon	string | string[]	undefined	Имя иконки FontAwesome (например, 'check', 'triangle-exclamation').

Слоты (Slots)

Название	Описание
default	Текстовое содержимое, отображаемое рядом с иконкой.