diff --git a/docs/ru/reference/default-theme-badge.md b/docs/ru/reference/default-theme-badge.md new file mode 100644 index 00000000..fc546436 --- /dev/null +++ b/docs/ru/reference/default-theme-badge.md @@ -0,0 +1,72 @@ +# Значки {#badge} + +С помощью значков удобно добавлять статус к заголовкам. Например, может быть полезно указать тип раздела или поддерживаемую версию. + +## Использование {#usage} + +Вы можете использовать компонент `Badge`, который доступен глобально. + +```html +### Заголовок ### Заголовок + ### Заголовок + ### Заголовок + +``` + +Приведённый выше код даёт такой результат: + +### Заголовок {#title} + +### Заголовок {#title-1} + +### Заголовок {#title-2} + +### Заголовок {#title-3} + +## Дочерние элементы {#custom-children} + +`` принимает параметр `children`, который будет отображаться внутри значка. + +```html +### Заголовок вложенный элемент +``` + +### Заголовок вложенный элемент + +## Настройка стиля значков {#customize-type-color} + +Вы можете настроить стиль значков, переопределив переменные CSS. Ниже приведены значения по умолчанию: + +```css +:root { + --vp-badge-info-border: transparent; + --vp-badge-info-text: var(--vp-c-text-2); + --vp-badge-info-bg: var(--vp-c-default-soft); + + --vp-badge-tip-border: transparent; + --vp-badge-tip-text: var(--vp-c-brand-1); + --vp-badge-tip-bg: var(--vp-c-brand-soft); + + --vp-badge-warning-border: transparent; + --vp-badge-warning-text: var(--vp-c-warning-1); + --vp-badge-warning-bg: var(--vp-c-warning-soft); + + --vp-badge-danger-border: transparent; + --vp-badge-danger-text: var(--vp-c-danger-1); + --vp-badge-danger-bg: var(--vp-c-danger-soft); +} +``` + +## `` {#badge-1} + +Компонент `` принимает следующие параметры: + +```ts +interface Props { + // Когда передается ``, это значение игнорируется. + text?: string + + // По умолчанию: `tip`. + type?: 'info' | 'tip' | 'warning' | 'danger' +} +```