...
Abaixo temos uma representação visual da directive tl-action da tela listagem de Companhias da aplicação Shield.
TL Action Model
| Âncora | ||||
|---|---|---|---|---|
|
...
TL Calendar
A directive tl-calendar disponibiliza o widget disponibiliza de de calendário da API AUI da Atlassian. Esta directive funciona como um wrapper para a funcionalidade já implementada, facilitando a integração com o AngularJS e eliminando instruções em Javascript que manipulam a HTML DOM.
...
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- ... --> <!-- no input abaixo temos a presença da directive tl-calendar que transforma este input em um calendário --> <input tl-calendar ng-model="view.startDate" tl-key="startdate" ng-change="splitStartDate()"> <<!-- ... --> |
Durante sua execução, a directive tl-calendar transforma esta directive anexando <div>s para construir a estrutura HTML necessária para montar o calendário.
Abaixo temos uma representação visual da directive tl-action da calendar da tela listagem detalhe de Companhias Períodos da aplicação Shield.
TL Tab
A directive tl-tab disponibiliza o widget de tab-panels (abas). Dividida em dois atributos, tl-tabset e tl-tab, a directive tl-tab estrutura as abas de forma hierárquica. O atributo tl-tabset deve estar presente em um outer element ou nó pai, tendo como nós filhos o número desejado de elementos <div> contendo o atributo tl-tab.
Listagem de atributos disponibilizados pela directive tl-calendar:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-tabset | - | Marca um elemento do tipo block como o nó pai de todas as abas. |
tl-tab | - | Marca um elemento do tipo block como o nó filho, alterando sua renderização para abas e sua visibilidade a partir do atributo tl-active. |
tl-active | Boolean | Manipula a visibilidade da aba de acordo com o valor do tipo Boolean obtido através da variável passada para este atributo. |
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos um calendário de fácil usabilidade para o usuário final.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- inicializa este elemento como nó pai de todas as abas, controlando sua visibilidade -->
<div tl-tabset>
<!-- transforma esta div em uma aba, internacionaliza seu título através da directive tl-key e determina a visiblidade através do atributo active apontando para a variável "active" nos objetos "view.tabs.dates" -->
<div tl-tab tl-key="detail.period.dates" active="view.tabs.dates.active">
<!-- ... -->
</div> |
Abaixo temos uma representação visual da directive tl-tab da tela detalhe de Períodos da aplicação Shield.
