LteBox

O componente LteBox é uma caixa para conteúdo um pouco mais extendo que o conteúdo das LteInfoBox. Com a LteBox pode-se construir inclusive formulários.

<lte-box title="extends">
    teste da caixa
</lte-box>

extends

teste da caixa

Título

A LteBox tem uma propriedade chamada title, do tipo String, obrigatória.

Cores

A LteBox possui 6 cores: default, primary , success, info, warning e danger. Esta informação é setada através da propriedade type, do tipo String, opcional. Caso esta propriedade não seja informada, a cor utilizada é a default.

<lte-box title="extends" type="danger">
    teste da caixa
</lte-box>

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

Cores sólidas dos títulos

A LteBox pode colocar o título em evidência indicando a propriedade solid, do tipo Boolean, opcional, como true

<lte-box title="extends" type="danger" :solid=""true">
    teste da caixa
</lte-box>

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

extends

teste da caixa

Fechável (closeable)

A LteBox tem uma propriedade opcional chamada closeable, do tipo Boolean, que indica quando a LteBox terá um botão onde o usuário poderá fechar a caixa.

<lte-box title="extends" type="danger" :closeable="true">
    teste da caixa
</lte-box>

extends

teste da caixa

Encolhível (collapsable)

A LteBox tem uma propriedade opcional chamada collapsable, do tipo Boolean, que indica quando a LteBox terá um botão onde o usuário poderá encolher a caixa.

<lte-box title="extends" type="danger" :collapsable="true">
    teste da caixa
</lte-box>

extends

teste da caixa

OBS.: ambas as propriedades collapsable e closeable podem ser usadas juntas.

<lte-box title="extends" type="danger" :collapsable="true" :closeable="true">
    teste da caixa
</lte-box>

extends

teste da caixa

Carregando (loading)

A LteBox também possui uma propriedade que indica quando a caixa está carregando: a propriedade loading, opcional, de tipo Boolean.

<lte-box title="extends" type="danger" :loading="true">
    teste da caixa
</lte-box>

extends

teste da caixa

extends

teste da caixa