Personalização
Locale
Tudo o que um componente diz vem de um único objeto, e números e datas também são lidos com ele.
Um componente nunca guarda uma string. Tudo o que ele diz (“Limpar”, “Nenhum resultado”, os nomes dos meses, o resumo da paginação, o nome do botão de fechar) vem do locale da configuração, e a configuração é reativa, então mudá-la muda a página.
Definindo um
main.ts
import { Vitral, ptBR } from '@vitral/vue';
createApp(App).use(Vitral, { locale: ptBR });en e ptBR vêm prontos. e abra um DatePicker ou um DataGrid.
Em tempo de execução
Bar.vue
const { locale, setLocale } = useLocale();
setLocale(ptBR); // every component follows, reactivelyUm locale só seu
Um locale é um objeto simples, então um terceiro é só um literal: espalhe en e escreva as diferenças.
fr.ts
import { en } from '@vitral/vue';
const frFR = {
...en,
firstDayOfWeek: 1,
dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
clear: 'Effacer',
emptyMessage: 'Aucun résultat'
};Mais do que strings
- Números são formatados e lidos conforme o locale: um
InputNumberem pt-BR lê “1.234,56” como 1234.56. - Datas usam os nomes de dias e meses do locale, o seu primeiro dia da semana e o seu formato de data, nos dois sentidos.
- Filtros ignoram acentos e maiúsculas, então “São” encontra “sao” e “Sao” encontra “São”.
- Mensagens com placeholders passam por
formatMessage, como em'{first} to {last} of {total}'.