diff --git a/docs/pt/reference/default-theme-badge.md b/docs/pt/reference/default-theme-badge.md new file mode 100644 index 00000000..820a77cd --- /dev/null +++ b/docs/pt/reference/default-theme-badge.md @@ -0,0 +1,69 @@ +# Emblema (Badge) + +O emblema permite adicionar status aos seus cabeçalhos. Por exemplo, pode ser útil especificar o tipo da seção ou a versão suportada. + +## Uso + +Você pode usar o componente `Badge` que está disponível globalmente. + +```html +### Title +### Title +### Title +### Title +``` + +O código acima é apresentado como: + +### Title +### Title +### Title +### Title + +## Filiação Personalizada + +`` aceita `children` (filhos), que serão exibidos no emblema. + +```html +### Title custom element +``` + +### Title custom element + +## Personalize o Tipo de Cor + +Você pode personalizar o estilo dos emblemas sobrepondo variáveis ​​CSS. Os seguintes são os valores padrão: + +```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); +} +``` + +## `` + +O componente `` aceita as seguintes propriedades: + +```ts +interface Props { + // Quando `` é passado, esse valor é ignorado. + text?: string + + // O padrão é `tip`. + type?: 'info' | 'tip' | 'warning' | 'danger' +} +```