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:
template.base01.html
<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>
Propriedades opcionais
Caso queira inserir um título a pagina pode ser usado a diretiva <totvs-page-header> e <totvs-page-header-title>.
template.base02.html
<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>.
template.base03.html
<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>
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas