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 tonil
.name
(:string
) - Defaults tonil
.disabled
(:boolean
) - Defaults tofalse
.placeholder
(:string
) - Defaults to""
.value
(:string
) - Defaults to""
.valid
(:boolean
) - Defaults tonil
.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 tofalse
.disabled
(:boolean
) - Defaults tofalse
.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 tofalse
.disabled
(:boolean
) - Defaults tofalse
.label
(:string
) - Defaults to""
.field
(Phoenix.HTML.FormField
)name
(:string
)required
(:boolean
) - Defaults tofalse
.
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 totrue
.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.
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áginapatch
: redireciona a pessoa usuária para a mesma página, com parâmetros diferenteshref
: 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 tonil
.patch
(:string
) - Defaults tonil
.href
(:string
) - Defaults tonil
.method
(:string
) - Defaults to"get"
.styless
(:boolean
) - Defaults tofalse
.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 tofalse
.checked
(:boolean
) - Defaults tofalse
.field
(Phoenix.HTML.FormField
)
Slots
label
(required)
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 tonil
.- 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 tonil
.name
(:string
) - Defaults tonil
.disabled
(:boolean
) - Defaults tofalse
.placeholder
(:string
) - Defaults to""
.value
(:string
) - Defaults to""
.valid
(:boolean
) - Defaults tonil
.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 tonil
.type
(:string
) - Defaults to"text"
.placeholder
(:string
) - Defaults to""
.value
(:string
)mask
(:string
) - Defaults tonil
.valid
(:boolean
) - Defaults tonil
.label
(:string
) - Defaults tonil
.field
(Phoenix.HTML.FormField
)name
(:string
)- Global attributes are accepted. Supports all globals plus:
["autocomplete", "disabled", "pattern", "placeholder", "readonly", "required"]
.