...
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 | Esta directive marca um elemento do tipo |
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 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- ... -->
<!-- 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-tab da tela detalhe de Períodos da aplicação Shield.
