Tipos de entrada são usados para definir como as configurações aparecem e se comportam no editor de tema. Eles permitem criar uma interface amigável para personalizar suas seções de tema.

Uso

Tipos de entrada são definidos no array settings do seu schema de seção. Cada configuração deve ter uma propriedade type que especifica qual tipo de entrada usar. No exemplo abaixo, definimos uma seção com três tipos de entrada diferentes: uma entrada de texto para o cabeçalho, um grupo de alternância para o layout e um controle deslizante de intervalo para o espaçamento.
{
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Hello, world!"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "full_width",
          "label": "Full width",
          "kiwi_extra": {
            "icon": "fa fa-arrows-alt-h"
          }
        },
        {
          "value": "contained",
          "label": "Contained",
          "kiwi_extra": {
            "icon": "fa fa-compress"
          }
        }
      ],
      "default": "full_width",
      "kiwi_extra": {
        "labeled": true
      }
    },
    {
      "type": "range",
      "id": "padding",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Padding",
      "default": 15
    }
  ]
}
Resulting fields in editor
Confira documentação detalhada para cada tipo de entrada:

Propriedades Comuns

Todos os tipos de entrada compartilham essas propriedades comuns:
type
string
required
O tipo de entrada a usar. Veja tipos disponíveis acima.
id
string
required
Identificador único para a configuração. Deve ser único dentro da seção.
label
string
required
O rótulo mostrado no editor de tema.
default
any
Valor padrão para a configuração. O tipo depende do tipo de entrada.
info
string
Informações adicionais mostradas abaixo da entrada.
kiwi_extra
object
Propriedades adicionais para a configuração. Atualmente suportadas:
  • hidden: Valor booleano, indica se esta configuração deve ser exibida na barra de configuração do Editor de Tema
  • validations: Aplica validações a esta configuração antes de salvar. Atualmente suportadas:
    • required: Valor booleano. Se verdadeiro, esta configuração deve ser preenchida com um valor válido.