Skip to content
Share
Explore

Documentação — Sistema de Tags

Visão Geral

O sistema de Tags permite a criação e personalização de etiquetas visuais reutilizáveis em diferentes componentes do site. As tags são configuradas no arquivo apps/site.ts e oferecem opções completas de personalização visual.
⁠

Estrutura da Tag

Cada tag possui a seguinte estrutura:
import type { ImageWidget } from "apps/admin/widgets.ts";

interface Tag {
name: string; // Nome/texto da tag (obrigatório)
color?: Color; // Cor de fundo (opcional)
textColor?: Color; // Cor do texto (opcional)
borderRadius?: number; // Arredondamento da borda, em pixels (opcional)
borderColor?: Color; // Cor da borda (opcional)
icon?: ImageWidget; // Ícone exibido ao lado do texto (opcional)
}

⁠

Detalhamento das Propriedades

name (obrigatório): Texto que será exibido na tag.
color (opcional): Cor de fundo da tag.
textColor (opcional): Cor do texto.
borderRadius (opcional): Valor em pixels do arredondamento das bordas.
borderColor (opcional): Cor da borda da tag.
icon (opcional): Imagem (via ImageWidget) a ser exibida como ícone ao lado do texto da tag.
⁠

Como Configurar Tags

1. Local da Configuração

As tags são definidas dentro da propriedade customConfigs, no arquivo apps/site.ts:
export interface CustomConfigs {
tags?: Tag[];
}

2. Estrutura do Componente

export type Props = {
customConfigs: CustomConfigs;
}

3. Exemplo de Configuração

customConfigs: {
tags: [
{
name: "Promoção",
color: "#FF6B6B",
textColor: "#FFFFFF",
borderRadius: 12,
borderColor: "#FF5252",
icon: "https://www.exemplo.com/icones/promocao.svg"
},
{
name: "Novidade",
color: "#4ECDC4",
textColor: "#2C3E50",
borderRadius: 8,
borderColor: "#26A69A"
}
]
}

⁠

Tipos de Cores Suportadas

O tipo Color aceita os seguintes formatos:
Hexadecimal: "#FF6B6B", "#4ECDC4"
RGB: "rgb(255, 107, 107)"
RGBA: "rgba(255, 107, 107, 0.8)"
Nomes de cores: "red", "blue", "green"
⁠

Uso das Tags

Interface de Administração

No painel administrativo do Deco, as tags aparecem com o nome configurado em name por meio da anotação:
/**
* @title {{name}}
*/
export interface Tag {
// propriedades da tag
}

⁠

Considerações Importantes

Acessibilidade: Garanta contraste suficiente entre color e textColor.
Responsividade: O borderRadius deve funcionar bem em diferentes tamanhos de tela.
Consistência Visual: Mantenha padrões de estilo coerentes para tags semelhantes.
Performance: Evite criar um número excessivo de variações desnecessárias de tags.
Otimização de Imagem: Utilize imagens leves e otimizadas para o icon, garantindo carregamento rápido.
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.