Estilização

• Tailwind CSS
  • Construindo seu próprio tema Tailwind CSS
  • Sobrescritas de estilos adicionais
• Instalando o tema Genesis CSS legado
• Atributos externos
• Classes personalizadas
• Anexando classes
• Redefinindo classes
• Removendo classes
• Propriedades de classe da seção-chave
• Propriedade Classes
• Configuração de Classes
  • Configuração de classe global
  • Configuração de classe em um grupo, lista ou formulário
• Usando generateClasses de @formkit/themes
• A função rootClasses
• Modificando classes dentro do esquema
  • Props de classe de seção-chave dentro do esquema
  • Propriedade Classes dentro do esquema
  • Config dentro do esquema

O FormKit vem com uma marcação robusta e acessível — mas sem suposições sobre os estilos desejados. O FormKit fornece temas opcionais que você pode usar em seu projeto — ou você pode criar o seu próprio.

Tailwind CSS

Usando a Interface Web

A maneira mais fácil de começar a usar os Temas do FormKit (para Tailwind) é acessar diretamente https://themes.formkit.com, personalizar um tema escolhido ao seu gosto e, em seguida, escolher Download theme para receber comandos específicos para executar na raiz do seu projeto.

Temas FormKit

Temas Tailwind versáteis, configuráveis e licenciados pelo MIT para uso em seus projetos. Gaste menos tempo estilizando — mais tempo construindo.

Usando o CLI

Alternativamente, você pode usar o cli do FormKit para gerar temas para o seu projeto. Para começar, execute o seguinte comando no mesmo diretório do seu arquivo formkit.config.{ts|js}:

npx formkit theme

Você será guiado na escolha de um tema existente como ponto de partida para o seu projeto. Este comando criará um arquivo formkit.theme.{ts|js} na raiz do seu projeto. Para completar a configuração, você precisará usar as rootClasses deste arquivo de tema no seu formkit.config.{ts|js}:

// formkit.config.ts
import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'

export default defaultConfig({
  locales: { fr },
  locale: 'fr',
  config: {
    rootClasses,
  },
})

Finalmente, você precisará adicionar o arquivo formkit.theme.{ts|js} à propriedade de conteúdo do seu arquivo de configuração do Tailwind. Isso garantirá que os estilos do tema sejam incluídos no CSS do seu projeto:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app.vue",
    "./formkit.theme.ts" // <-- adicione seu arquivo de tema
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Se você executar o comando novamente, será levado para https://themes.formkit.com, onde poderá personalizar o tema escolhido.

# com o arquivo formkit.theme existente na raiz do seu projeto
> npx formkit theme
? Encontrado arquivo de tema local para <themeName>, editar este tema? › (Y/n)

Construindo seu próprio tema Tailwind CSS

Quer criar seu próprio tema Tailwind? Confira nosso tema inicial — que é altamente comentado — para começar. Você também pode seguir nosso guia, "Criar um tema Tailwind CSS" para acompanhar passo a passo o processo de criação do tema.

Sobrescritas de estilos adicionais

Continue lendo para aprender como sobrescrever ainda mais as classes que vêm com o tema FormKit escolhido em níveis globais, de formulário e de entrada.

Instalando o tema Genesis CSS legado

Uso via CDN

Para carregar o genesis via CDN, forneça-o à propriedade theme de seu defaultConfig.

...
defaultConfig({
  theme: 'genesis' // será carregado do CDN e injetado no cabeçalho do documento
})
...

Importação direta

Para instalar o Genesis, primeiro instale o pacote @formkit/themes.

npm install @formkit/themes

Depois, em seu main.js (onde você inicia o Vue), inclua o theme.css do Genesis (isso supõe que você está usando uma ferramenta de build como Vite, Webpack, Snowpack ou Nuxt):

import '@formkit/themes/genesis'

Atributos externos

Para fins de estilização, alguns atributos são automaticamente adicionados e removidos da seção outer de todas as entradas FormKit:

• data-type — O tipo de entrada, text, select, checkbox etc.
• data-multiple — Para entradas que aceitam o atributo multiple, isso será anexado quando a entrada tiver o atributo múltiplo (como a entrada select).
• data-disabled — Presente quando uma entrada está desabilitada.
• data-complete — Presente quando a entrada está "completa". Destinado a ser usado para estilizar a entrada quando um usuário terminou de preenchê-la (como um visto verde). Leia sobre context.state.complete para informações sobre quais condições fazem isso ser true.
• data-invalid — Presente quando a entrada tem regras de validação falhando e as mensagens para as regras falhas estão visíveis.
• data-errors — Presente quando a entrada tem erros explicitamente definidos.

Você pode usar os atributos acima para fornecer facilmente feedback visual em tempo real para os usuários que estão preenchendo seus formulários:

Classes personalizadas

A maioria dos usuários vai querer aplicar seus próprios estilos e classes à marcação fornecida pelo FormKit. O FormKit oferece diversos métodos para aplicar classes ao seu projeto.

As classes podem ser modificadas para todas as seções usando qualquer um dos seguintes métodos (da maior para a menor especificidade):

• As props {section-key}-class. (mais específico)
• A prop classes.
• A opção de configuração classes.
• A função de configuração rootClasses. (menos específico)

As classes seguem uma hierarquia estrita. Inicialmente, as classes são produzidas pela função rootClasses. Em seguida, podem ser modificadas pela opção de configuração classes, depois pela prop classes e, finalmente, pela prop {section-key}-class. Em cada um desses estágios, as classes podem ser anexadas, redefinidas ou modificadas seletivamente.

Anexando classes

Para anexar uma classe, basta retornar a string que você deseja anexar ou fornecer um objeto de classes com valores booleanos — propriedades true serão anexadas:

Redefinindo classes

Classes produzidas por todos os passos anteriores da hierarquia podem ser completamente removidas fornecendo uma classe especial (não renderizada) $reset em formato de string ou objeto:

Removendo classes

Classes produzidas por um passo anterior na hierarquia de classes podem ser seletivamente removidas fornecendo um objeto com o valor false para a classe que você deseja remover ou fornecendo um nome de classe para uma prop {section-key}-class que começa com $remove: e corresponde a uma classe existente na lista de classes. Isso inclui a remoção das classes padrão do formkit com prefixo formkit-:

Propriedades de classe da seção-chave

A maneira mais simples de modificar as classes de um elemento dentro de um input do FormKit é através das propriedades {section-key}-class. Para adicionar uma classe a um elemento de seção específico, como label, você simplesmente adiciona a propriedade label-class:

Propriedade Classes

A propriedade classes é semelhante à propriedade de classe da seção-chave, exceto que permite definir classes em todas as seções ao mesmo tempo:

Configuração de Classes

A opção de configuração de classes é semelhante à propriedade classes, exceto que se aplica a todos os inputs aos quais a configuração é aplicada. O sistema de configuração único do FormKit permite que você aplique classes globalmente em seu projeto ou apenas em inputs dentro de um determinado grupo ou formulário:

Configuração de classe global

Configuração de classe em um grupo, lista ou formulário

Usando generateClasses de @formkit/themes

O FormKit vem com uma função auxiliar chamada generateClasses incluída em @formkit/themes.

A função generateClasses recebe um objeto javascript chaveado pelo tipo de input com valores de um sub-objeto chaveado por ${sectionKey} com valores de strings. Com essa função, você pode rapidamente aplicar listas de classes a seções dentro de inputs baseados no tipo de input fornecido.

A função rootClasses

rootClasses é uma função de configuração responsável por produzir as classes padrão para cada elemento. Esta função já tem um valor padrão que produz todas as classes padrão (como formkit-outer e formkit-label) que acompanham o FormKit — então, substituir essa única função permite que você substitua facilmente todas as classes iniciais. Isso a torna uma candidata ideal para escrever temas personalizados ao usar frameworks de utilidades como o Tailwind.

A função rootClasses recebe 2 argumentos (respectivamente):

• A chave da seção (como label ou input).
• O nó do input.

A função será chamada uma vez para cada seção e deve retornar um objeto de classes com valores booleanos.

Embora o uso típico de rootClasses seja no nível de configuração global para aplicar classes em todo o seu projeto - você também pode usá-la com a propriedade config para sobrescrever um formulário específico ou input dentro do seu projeto com uma lista de classes calculada a partir da lógica dentro da função fornecida:

Modificando classes dentro do esquema

Além de modificar classes via configuração ou props em um componente <FormKit>, você pode usar as mesmas técnicas dentro de esquema:

Props de classe de seção-chave dentro do esquema

Dentro do esquema, você também pode modificar as classes de um elemento dentro de uma entrada usando as propriedades {section-key}Class. Por exemplo, para adicionar uma classe à seção de rótulo, você pode adicionar a propriedade labelClass:

{
  $formkit: 'text',
  name: 'email',
  // adiciona 'appended-class' à seção "label"
  labelClass: 'appended-class'
},

Propriedade Classes dentro do esquema

Assim como a propriedade classes em um componente <FormKit>, você pode modificar a lista de classes para qualquer seção de uma entrada com a propriedade classes em um nó de esquema:

{
  $formkit: 'text',
  name: 'email',
  // modifica classes nas seções "outer" e "inner" desta entrada
  classes: {
    outer: 'new-outer-class',
    inner: {
      $reset: true, // reseta as classes na seção "inner"
      'new-inner-class': true
    }
  },
},

Config dentro do esquema

Uma vez que a configuração é passada para entradas descendentes, você pode alterar classes via configuração em um pai, como um form, list ou um group, e isso afetará todos os descendentes em qualquer profundidade: