gbr_ui - v1.1.0

gbr/ui/theme/lustre/typo

✍ GBR: UI Typography Module

Olá, neste módulo temos o componente visual para escrevermos textos.

Imagine este módulo como se fosse uma máquina de escrever, com várias opções de fontes, tamanhos, etc.

pub fn title(state) {
  let title = H2
  let variant = theme.primary()
  let appearance = theme.filled()

  theme.new()
  |> theme.with_design_to_tokens(design_classes)
  |> theme.with_variant(variant:)
  |> theme.with_appearance(appearance:)
  |> theme.with_state(state)
  |> view(title, theme: _, attributes: [], elements: [])
}

fn design_classes(v, a, s) {
  case v, a, s {
    theme.VariantPrimary, theme.AppearanceFilled, theme.StateIdle ->
      "text-primary-500"
    theme.VariantPrimary, theme.AppearanceFilled, theme.StateLoading ->
      "hover:text-primary-600 text-primary-500"
    _, _, _ -> "text-secondary-500"
  }
  |> lustre.Class
  |> theme.token_to_list
}

Types

UITypography

</>

UI typograph: tipo para escrevermos na tela.

  • H1..H4: São os cabeçalhos e níveis.
  • Pre: São textos usados para representar códigos, etc.
  • Span: São textos comuns.
  • Label: São textos utilizados c/ os inputs.
  • Paragraph: São os textos em formato de parágrafo.
pub type UITypography {
  H1
  H2
  H3
  H4
  H5
  H6
  Pre(size: theme.UISize)
  Span(size: theme.UISize)
  Label(size: theme.UISize)
  Paragraph(size: theme.UISize)
}

Constructors

Values

h1

</> 
pub fn h1(
  theme: theme.UITheme(lustre.UILustre),
  with attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Header 1

h2

</> 
pub fn h2(
  theme: theme.UITheme(lustre.UILustre),
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Header 2

h3

</> 
pub fn h3(
  theme: theme.UITheme(lustre.UILustre),
  attributes attributes: List(attribute.Attribute(msg)),
  with elements: List(element.Element(msg)),
) -> element.Element(msg)

Header 3

h4

</> 
pub fn h4(
  theme: theme.UITheme(lustre.UILustre),
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Header 4

h5

</> 
pub fn h5(
  theme: theme.UITheme(lustre.UILustre),
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Header 5

h6

</> 
pub fn h6(
  theme: theme.UITheme(lustre.UILustre),
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Header 6

header_from_size

</> 
pub fn header_from_size(size: theme.UISize) -> UITypography

Recupera um cabeçalho pelo tamanho passado como argumento.

  • size: Tamanho desejado do cabeçalho de retorno.

is_header

</> 
pub fn is_header(typo: UITypography) -> Bool

Retorna se a tipografia é de um tipo de cabeçalho.

  • typo: Dados da tipografia.

label

</> 
pub fn label(
  theme: theme.UITheme(lustre.UILustre),
  size: theme.UISize,
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Label

p

</> 
pub fn p(
  theme: theme.UITheme(lustre.UILustre),
  size: theme.UISize,
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Paragraph

pre

</> 
pub fn pre(
  theme: theme.UITheme(lustre.UILustre),
  size size: theme.UISize,
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Pre

span

</> 
pub fn span(
  theme: theme.UITheme(lustre.UILustre),
  size size: theme.UISize,
  attributes attributes: List(attribute.Attribute(msg)),
  elements elements: List(element.Element(msg)),
) -> element.Element(msg)

Span

text

</> 
pub fn text(
  typo: UITypography,
  theme: theme.UITheme(lustre.UILustre),
  text: String,
  attributes: List(attribute.Attribute(a)),
  elements: List(element.Element(a)),
) -> element.Element(a)

Construtor universal de tipografia.

to_size

</> 
pub fn to_size(typo: UITypography) -> theme.UISize

Retorna o tamnaho a partir da tipografia, se existir.

  • typo: Dados sobre a tipografia.

view

</> 
pub fn view(
  typo: UITypography,
  theme theme: theme.UITheme(lustre.UILustre),
  attributes attributes: List(attribute.Attribute(a)),
  elements elements: List(element.Element(a)),
) -> element.Element(a)

View UI: Elemento tipográfico.

  • typo: O tipo de tipografia, o que vamos escrever na tela.
  • theme: Os dados do tema a ser aplicado na tipografia.
  • attributes: Mais atributos para a tipografia, incluídos ao final.
✨ Search Document