aperte s para abrir a busca
Storybook Storybook
v1.81.11

# Theme Provider

O Theme Provider provê um tema a ser aplicado em todos os componentes filhos.

Temas permitem que você aplique um tom consistente na sua aplicação. Ele permite que você customize todos os aspectos do design do seu projeto, para atender as necessidades específicas do seu negócio ou marca.

Para promover uma maior consistência entre os aplicativos, os temas claro e escuro estão disponíveis para escolha. Por padrão, os componentes usam o tema escuro.

Três temas estão disponíveis para uso: Educacional, Concursos e Medicina.

Para especificar o tema a ser aplicado basta informar usando a prop theme.

# Educacional

Digite seu nome 
  <theme-provider theme="educacional">
    <div class="ui-p-4">
      <div class="ui-flex ui-space-x-4">
        <div class="ui-w-4/12">
          <c-input label="Digite seu nome"  />
        </div>
        <div class="ui-w-4/12">
          <c-button class="ui-w-4/12"> Prosseguir </c-button>
        </div>
        <div class="ui-w-4/12">
          <div class="ui-flex ui-mt-4">
            <icon name="settings" />
            <icon name="slides" />
            <icon name="tag" />
            <icon name="notebook" />
            <icon name="label" />
            <icon name="send" />
          </div>
        </div>
      </div>
    </div>
  </theme-provider>

# Concursos

Digite seu nome 
<theme-provider theme="concursos">
    <div class="ui-p-4">
      <div class="ui-flex ui-space-x-4">
        <div class="ui-w-4/12">
          <c-input label="Digite seu nome"  />
        </div>
        <div class="ui-w-4/12">
          <c-button class="ui-w-4/12"> Prosseguir </c-button>
        </div>
        <div class="ui-w-4/12">
          <div class="ui-flex ui-mt-4">
            <icon name="settings" />
            <icon name="slides" />
            <icon name="tag" />
            <icon name="notebook" />
            <icon name="label" />
            <icon name="send" />
          </div>
        </div>
      </div>
    </div>
</theme-provider>

# Medicina

Digite seu nome 
<theme-provider theme="medicina">
    <div class="ui-p-4">
      <div class="ui-flex ui-space-x-4">
        <div class="ui-w-4/12">
          <c-input label="Digite seu nome"  />
        </div>
        <div class="ui-w-4/12">
          <c-button class="ui-w-4/12"> Prosseguir </c-button>
        </div>
        <div class="ui-w-4/12">
          <div class="ui-flex ui-mt-4">
            <icon name="settings" />
            <icon name="slides" />
            <icon name="tag" />
            <icon name="notebook" />
            <icon name="label" />
            <icon name="send" />
          </div>
        </div>
      </div>
    </div>
</theme-provider>

# Dark mode

Para habilitar o modo escuro na sua aplicação, configure a prop isDark.

Digite seu nome 
<theme-provider :isDark="true" theme="educacional">
    <div class="ui-p-4">
      <div class="ui-flex ui-space-x-4">
        <div class="ui-w-4/12">
          <c-input label="Digite seu nome"  />
        </div>
        <div class="ui-w-4/12">
          <c-button class="ui-w-4/12"> Prosseguir </c-button>
        </div>
        <div class="ui-w-4/12">
          <div class="ui-flex ui-mt-4">
            <icon name="settings" />
            <icon name="slides" />
            <icon name="tag" />
            <icon name="notebook" />
            <icon name="label" />
            <icon name="send" />
          </div>
        </div>
      </div>
    </div>
</theme-provider>

# Theme Provider API

Para utilizar o Theme Provider é preciso primeiro importar o componente.

import { ThemeProvider } from '@estrategiahq/coruja-web-ui';
1

Para que o tema escolhido seja aplicado aos componentes, estes deverão ser "filhos" do Theme Provider.

<theme-provider theme="medicina">
  <c-button> Botão </c-button>
</theme-provider>

Também é possível importar um enum com o nome de todos os nossos temas:

import { CThemes } from '@estrategiahq/coruja-web-ui';

CThemes.Educacional // retorna 'educacional'
1
2
3

# Verticais

NomeNome do Tema
Educacionaleducacional
Concursosconcursos
Medicinamedicina
OABoab

# Props

A props disponíveis para configurar o componente são:

Nome Tipo Default Descrição
theme string educacional Define qual tema deve ser aplicado. Pode ser um dos temas listados acima.
isDark boolean false Define se o modo escuro está ativado ou não

# Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos definidos os seguintes slots:

Nome Descrição
default Slot padrão do Vue.

# Events

Todos os eventos que são propagados.

Nome Tipo Descrição
@changeTheme function Emitido quando o tema é alterado
@changeMode function Emitido quando o modo (escuro/claro) é alterado