STag

Тег (может также использоваться как отображение статуса).

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

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

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

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

Новый

<STag>Новый</STag>

<template>
    <STag>Новый</STag>
</template>

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

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

Атрибутом color можно передать значение цвета из палитры цветов:

gray

primary

primary-dark

primary-darkest

primary-light

primary-lightest

red

red-dark

red-light

red-lightest

yellow

yellow-dark

yellow-light

yellow-lightest

green

green-dark

green-light

green-lightest

<STag color="gray">gray</STag>
<STag color="primary">primary</STag>
<STag color="primary-dark">primary-dark</STag>
<STag color="primary-darkest">primary-darkest</STag>
<STag color="primary-light">primary-light</STag>
<STag color="primary-lightest">primary-lightest</STag>

<STag color="red">red</STag>
<STag color="red-dark">red-dark</STag>
<STag color="red-light">red-light</STag>
<STag color="red-lightest">red-lightest</STag>

<STag color="yellow">yellow</STag>
<STag color="yellow-dark">yellow-dark</STag>
<STag color="yellow-light">yellow-light</STag>
<STag color="yellow-lightest">yellow-lightest</STag>

<STag color="green">green</STag>
<STag color="green-dark">green-dark</STag>
<STag color="green-light">green-light</STag>
<STag color="green-lightest">green-lightest</STag>

<template>
    <STag color="gray">gray</STag>
    <STag color="primary">primary</STag>
    <STag color="primary-dark">primary-dark</STag>
    <STag color="primary-darkest">primary-darkest</STag>
    <STag color="primary-light">primary-light</STag>
    <STag color="primary-lightest">primary-lightest</STag>

    <STag color="red">red</STag>
    <STag color="red-dark">red-dark</STag>
    <STag color="red-light">red-light</STag>
    <STag color="red-lightest">red-lightest</STag>

    <STag color="yellow">yellow</STag>
    <STag color="yellow-dark">yellow-dark</STag>
    <STag color="yellow-light">yellow-light</STag>
    <STag color="yellow-lightest">yellow-lightest</STag>

    <STag color="green">green</STag>
    <STag color="green-dark">green-dark</STag>
    <STag color="green-light">green-light</STag>
    <STag color="green-lightest">green-lightest</STag>
</template>

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

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

Свойства (Props)

Название	Тип	По умолчанию	Описание
color	string	'gray'	Цвет фона и текста. Поддерживает значения из палитры: gray, primary, primary-dark, primary-darkest, primary-light, primary-lightest, red, red-dark, red-light, red-lightest, yellow, yellow-dark, yellow-light, yellow-lightest, green, green-dark, green-light, green-lightest.

Слоты (Slots)

Название	Описание
default	Текстовое содержимое или HTML внутри тега.