View Source DesignSystem (design_system v0.1.0)

Summary

Functions

Componente de botão, que representa uma ação na plataforma.

Componente de checkbox, usado para representar valores que podem ter um valor ambíguo.

Renders flash notices.

Shows the flash group with standard titles and content.

Um componente de rodapé para a plataforma, expondo os logos dos apoiadores e empresas parceiras.

Componente para criar links, que direcionam o usuário para outras páginas internas da aplicação ou páginas externas de outras aplicações.

Componente de radio, usado para representar valores que podem ter um valor ambíguo.

Renderiza um formulário simples.

Este componente renderiza um texto, porém com os estilos do espaçamento de linha e tamanho de fonte já pré-configurados.

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • placeholder (:string) - Defaults to "".
  • value (:string) - Defaults to "".
  • valid (:boolean) - Defaults to nil.
  • class (:string) - Defaults to "".

Slots

  • label

Um componente de input de texto, para receber entradas da pessoa usuária.

Functions

Componente de botão, que representa uma ação na plataforma.

Esse componente possui 2 variantes:

  • Primário
  • Secundário

que é controlado pelo atributo style.

Esse componente també pode ter um ícone em conjunto com o texto, basta informar o nome do ícone da biblioteca lucide, em minúsculo (veja o exemplo abaixo).

Caso o componente esteja dentro de um formulário, passe o atributo submit, desta forma o botão irá ser acionado assim que o formua'ário tiver seu preenchimento finalizado.

Exemplo

<.button style="primary"> Primário </.button>

<.button style="secondary"> Secundário </.button>

<.button style="primary" submit> Submissão </.button>

Attributes

  • style (:string) (required) - Must be one of "primary", "secondary", or "link".
  • submit (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:string) - Defaults to "".
  • click (:string) - the click event to handle. Defaults to "".
  • Global attributes are accepted. used for phoenix events like "phx-target".

Slots

  • inner_block

Componente de checkbox, usado para representar valores que podem ter um valor ambíguo.

O mesmo obrigatoriamente recebe o atributos label, que representa a etiqueta, o texto nome do campo em questão que é um checkbox.

Também é possível controlar dinamicamente se o componente será desabilitado ou se o valor do checkbox será "assinado" com atributos disabled e checked respectivamente.

Exemplo

<.checkbox id="send-emails" label="Deseja receber nossos emails?" checked />

Attributes

  • id (:string)
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • label (:string) - Defaults to "".
  • field (Phoenix.HTML.FormField)
  • name (:string)
  • required (:boolean) - Defaults to false.

Renders flash notices.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

Attributes

  • id (:string) - the optional id of flash container. Defaults to "flash".
  • flash (:map) - the map of flash messages to display. Defaults to %{}.
  • visible (:boolean) - Defaults to true.
  • kind (:atom) - used for styling and flash lookup.Must be one of :success, :warning, or :error.
  • Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

  • inner_block - the optional inner block that renders the flash message.

Shows the flash group with standard titles and content.

Examples

<.flash_group flash={@flash} />

Attributes

  • flash (:map) (required) - the map of flash messages.

Um componente de rodapé para a plataforma, expondo os logos dos apoiadores e empresas parceiras.

É um componente estático, sem atributos, sem estado.

Link to this function

hide(js \\ %JS{}, selector)

View Source

Componente para criar links, que direcionam o usuário para outras páginas internas da aplicação ou páginas externas de outras aplicações.

Recebe os mesmos atributos do componente nativo Phoenix.Component.link/1:

  • navigate: redireciona a pessoa usuária, sem recarregar a página
  • patch: redireciona a pessoa usuária para a mesma página, com parâmetros diferentes
  • href: redireciona a pessoa usuária para outra página, interna ou externa da aplicação, recarregando a página atual.

Além desses atributos esse componente precisa de uma label, que será o texto exibido ao renderizar o link e também aceita um atributo opcional que controla o tamanho da fonte do texto renderizado. Os possíveis valores são os mesmos que o componente de texto definido em PescarteWeb.DesignSystem.text/1.

Exemplo

<.link navigate={~p"/app/perfil"}>Ir para Perfil</.link>

<.link href="https://google.com" text_size="lg">Google.com</.link>

<.link patch={~p"/app/relatorios"} text_size="lg">Recarregar lista de relatórios</.link>

Attributes

  • navigate (:string) - Defaults to nil.
  • patch (:string) - Defaults to nil.
  • href (:string) - Defaults to nil.
  • method (:string) - Defaults to "get".
  • styless (:boolean) - Defaults to false.
  • class (:string) - Defaults to "".

Slots

  • inner_block

Componente de radio, usado para representar valores que podem ter um valor ambíguo.

O mesmo obrigatoriamente recebe o atributos label, que representa a etiqueta, o texto nome do campo em questão que é um radio.

Também é possível controlar dinamicamente se o componente será desabilitado ou se o valor do radio será "assinado" com atributos disabled e checked respectivamente.

Exemplo

<.checkbox id="send-emails" label="Deseja receber nossos emails?" checked />

Attributes

  • id (:string) (required)
  • name (:string)
  • disabled (:boolean) - Defaults to false.
  • checked (:boolean) - Defaults to false.
  • field (Phoenix.HTML.FormField)

Slots

  • label (required)
Link to this function

show(js \\ %JS{}, selector)

View Source

Renderiza um formulário simples.

Exemplos

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:email]} label="Email"/>
  <.input field={@form[:username]} label="Username" />
  <:actions>
    <.button>Save</.button>
  </:actions>
</.simple_form>

Attributes

  • for (:any) (required) - the datastructure for the form.
  • as (:any) - the server side parameter to collect all input under. Defaults to nil.
  • Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target", "multipart"].

Slots

  • inner_block (required)
  • actions - the slot for form actions, such as a submit button.

Este componente renderiza um texto, porém com os estilos do espaçamento de linha e tamanho de fonte já pré-configurados.

Também recebe um atributo chamado color, que é uma classe do TailwindCSS que representa uma cor específica da paleta que o Design System define.

Caso o atributo color não seja fornecido, a cor padrão - black-80 - será utilizada.

Para ver as cores disponívels, execute o comando mix tailwind.view.

Você pode prover classes adicionais para estilização, com o atributo opcional class, que recebe uma string.

Exemplo

<.text size="h1"> Lorem ipsum dolor sit amet </.text>

Attributes

  • size (:string) (required) - Must be one of "h1", "h2", "h3", "h4", "h5", "base", "lg", or "sm".
  • color (:string) - Defaults to "text-black-80".
  • class (:string) - Defaults to "".

Slots

  • inner_block

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • placeholder (:string) - Defaults to "".
  • value (:string) - Defaults to "".
  • valid (:boolean) - Defaults to nil.
  • class (:string) - Defaults to "".

Slots

  • label

Um componente de input de texto, para receber entradas da pessoa usuária.

O mesmo recebe obrigatoriamente os atributos name e label, para que seja possível o formulário que usar este componente direcionar corretamente o dado da entrada da pessoa usuária, e a etiqueta para ficar visivel sobre o que se trata o input em questão.

Opcionalmente o componente também recebe o atributo mask, que controla o formato do texto que será escrito. Por exemplo um documento CPF tem o formato "111.111.111-11".

Além disso é possível definir um texto de ajuda que será colocado "dentro" do componte, com o atributo placeholder.

Caso queira dar um valor inicial para o componente, use o atributo value!

Exemplo

<.text_input name="cpf" mask="999.999.999-99" label="CPF" />

<.text_input name="password" label="Senha" type="password" />

Attributes

  • id (:string) - Defaults to nil.
  • type (:string) - Defaults to "text".
  • placeholder (:string) - Defaults to "".
  • value (:string)
  • mask (:string) - Defaults to nil.
  • valid (:boolean) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField)
  • name (:string)
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "disabled", "pattern", "placeholder", "readonly", "required"].