TOTVS HTML Framework

Árvore de páginas

  • Criado por Usuário desconhecido (jhosef.carvalho), última alteração em 04 mar, 2016

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>
  • Sem rótulos