O template base, basicamente possui um cabeçalho com breadcrumb e uma área para o conteúdo da página conforme a imagem a baixo:
O código para iniciar uma página pode seguir o seguinte modelo:
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
<totvs-page type="base">
<totvs-page-navbar>
<totvs-page-breadcrumb>
<breadcrumb link="#/">{{ 'l-home' | i18n }}</breadcrumb>
<breadcrumb link="#/">Templates</breadcrumb>
<breadcrumb>Template Base</breadcrumb>
</totvs-page-breadcrumb>
</totvs-page-navbar>
<totvs-page-content>
<totvs-page-form>
Conteúdo da página
</totvs-page-form>
</totvs-page-content>
</totvs-page> |
Caso queira inserir um título a pagina pode ser usado a diretiva <totvs-page-header> e <totvs-page-header-title>.
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
<totvs-page type="base"> <totvs-page-navbar> <totvs-page-breadcrumb> <breadcrumb link="#/">{{ 'l-home' | i18n }}</breadcrumb> <breadcrumb link="#/">Templates</breadcrumb> <breadcrumb>Template Base</breadcrumb> </totvs-page-breadcrumb> <totvs-page-header> <totvs-page-header-title title="Template Base"> </totvs-page-header-title> </totvs-page-header> </totvs-page-navbar> <totvs-page-content> ... </totvs-page-content> </totvs-page> |
Caso a página tenha botões, os mesmos devem ficar a direita, utilize as diretivas <totvs-page-header>, <totvs-page-header-operation>, <totvs-page-header-operation-action> e <action>.
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
<totvs-page type="base |
...
">
<totvs-page-navbar>
<totvs-page-breadcrumb>
...
</totvs-page-breadcrumb>
<totvs-page-header>
<totvs-page-header-title title="Template Base">
</totvs-page-header-title>
<totvs-page-header-operation>
<totvs-page-header-operation-action limit-primary-action="3">
<action ng-click="controller.import();">Importar</action>
<action ng-click="controller.export();">Exportar</action>
<action ng-click="controller.report();">Relatório</action>
<action ng-click="controller.actionOne();">Ação 1</action>
<action ng-click="controller.actionTwo();">Ação 2</action>
<action ng-click="controller.actionThree();">Ação 3</action>
</totvs-page-header-operation-action>
</totvs-page-header-operation>
</totvs-page-header>
</totvs-page-navbar>
<totvs-page-content>
...
</totvs-page-content>
</totvs-page> |