PageHeader
O PageHeader representa a parte superior da tela localizada imediatamente após o PageNavigation. No menu principal ela é comumente utilizada para incorporar uma imagem.
Propriedades gerais:
Barra de cabeçalho da tela.
Existência não obrigatória.
Pode conter imagens e/ou conteúdo html.
Pode possuir actions.
Permite o uso de templates.
"pageHeader": {
"template": "",
"logo": "",
"background": "",
"color": "",
"logo": "",
"item": {
"details": [{"order": 0,"value": ""}],
"actionDefault": null,
"actions": [...]
}
}template
Nome da template a ser utilizada.
background
Customiza o fundo da cabeçalho com uma cor (hexadecimal) ou uma imagem (link da imagem). Se nulo ou vazio: colorBase + escurecimento de 40% da cor.
color
Customiza a cor da fonte do texto e dos ícones de ações do cabeçalho.
logo
Exibe no centro do cabeçalho a imagem definida (link da imagem).
item.detail
Define um conteúdo html/css2 a ser exibido no cabeçalho quando preenchido em item.detail.value.
item.actions
Define 1 ou mais ações a serem exibidas no cabeçalho.
item.actionDefault
Define qual a actions padrão do clique da célula. Se nulo ou vazio, nenhuma ação deve ser executada.
Templates
Template A
Formato: Linha simples.
Imagem: Não recebe imagens no elemento background.
Conteúdo: Totalmente definido no elemento
detail.order = 0.Ações:
Quando múltiplas, menu exibido na lateral.
Quando única, ícone é exibido na lateral.
{
"pageNavigation": {
"template": "A",
"title": "PageHeader A",
"left": {
"actions": [
{
"order": "0",
"name": "back"
}
]
},
"right": {
"actions": [
{
"order": "0",
"name": "home",
"icon": "ea39"
}
]
}
},
"pageHeader": {
"template": "A",
"background": null,
"logo": null,
"color": "#FFF",
"item": {
"publishLevel": 1,
"details": [
{
"order": 0,
"value": "<span style='color:#fff'><h3>Lorem ipsum dolor</h3><br>Lorem ipsum dolor</span>"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"title": "Ligar",
"parameters": [
{
"title": "Residencial",
"value": "+55 71 99999-9999"
}
]
},
{
"order": 1,
"publishLevel": 1,
"permissionLevel": 1,
"title": "Enviar Email",
"name": "email",
"path": "",
"parameters": [
{
"title": "Pessoal",
"value": "[email protected]"
}
]
}
]
}
},
"pageContent": {
"background": "#FFF",
"totalPages": 1,
"currentPage": 1,
"hasGroupBy": false,
"groupList": null
}
}
B1: Espaço para logomarca.
Se nulo ou vazio, o espaço é ocultado.
Conteúdo sempre centralizado.
B2: Espaço para texto da tela.
Suporta HTML flexível com o conteúdo sempre centralizado.
Se nulo ou vazio, o espaço é ocultado.
B3: Célula de actions.
Suporta de 1 a N actions sendo:
1 action: Exibir a action informada.
2 actions: Exibir o menu para acesso às demais actions.
Se nulo ou vazio, o espaço é ocultado.
{
"pageNavigation": {
//...
},
"pageHeader": {
"template": "A",
"background": null,
"logo": null,
"color": "#FFF",
"item": {
"publishLevel": 1,
"details": [
{
"order": 0,
"value": "<span style='color:#fff'><h3>Lorem ipsum dolor</h3><br>Lorem ipsum dolor</span>"
}
],
"actionDefault": 0,
"actions": [
{
"order": 0,
"publishLevel": 1,
"permissionLevel": 1,
"name": "call",
"path": "",
"title": "Ligar",
"parameters": [
{
"title": "Residencial",
"value": "+55 71 99999-9999"
}
]
},
{
"order": 1,
"publishLevel": 1,
"permissionLevel": 1,
"title": "Enviar Email",
"name": "email",
"path": "",
"parameters": [
{
"title": "Pessoal",
"value": "[email protected]"
}
]
}
]
}
},
"pageContent": {
//...
}
}Template B
Formato: Linha simples.
Imagem:
Em Background, define uma imagem como background do cabeçalho.
Em Logo, define uma logomarca a ser aplicada no cabeçalho.
Background: Aceita cor ou imagem.
Conteúdo: Totalmente definido no elemento
detail.order = 0.Ações:
Quando múltiplas ou única, são exibidas em uma barra de ícones.
{
"pageNavigation": {
"template": "A",
"title": "Cabeçalho B",
"left": {
"actions": [
{
"order": "0",
"name": "back"
},
{
"order": "1",
"name": "home",
"icon": "e938"
},
{
"order": "2",
"name": "home",
"icon": "ea88",
"title": "Texto 3"
}
]
},
"right": {
"actions": [
{
"order": "0",
"name": "home",
"icon": "ea39",
"title": "Texto 1"
},
{
"order": "1",
"name": "home",
"icon": "e990",
"title": "Texto 2"
},
{
"order": "2",
"name": "home",
"icon": "ea88",
"title": "Texto 3"
}
]
}
},
"pageHeader": {
"template": "B",
"background": "#634975",
"logo": "http://api.mobilecare.com.br/integration/demo/resources/mobilex-demos/logo-mobilex-b.png",
"color": "#EE8113",
"item": {
"publishLevel": 1,
"details": [
{
"order": 0,
"value": "<br>Este é um texto dentro da célula que pode ser utilizado com formatação HTML<br>"
}
],
"actionDefault": 0,
"actions": [
{
"order": "0",
"name": "home",
"icon": "ea39",
"title": "Texto 1"
},
{
"order": "1",
"name": "home",
"icon": "e990",
"title": "Texto 2"
},
{
"order": "2",
"name": "home",
"icon": "ea88",
"title": "Texto 3"
},
{
"order": "3",
"name": "home",
"icon": "ea39",
"title": "Texto 1"
},
{
"order": "4",
"name": "home",
"icon": "e990",
"title": "Texto 2"
}
]
}
},
"pageContent": {
"background": "#FFF",
"totalPages": 1,
"currentPage": 1,
"hasGroupBy": false,
"groupList": null
}
}
B1: Espaço para a logomarca.
pageHeader.logodefine a URL da imagem que deve ser exibida.Se nulo ou vazio, o espaço é ocultado.
Conteúdo sempre centralizado.
B2: Espaço para texto da célula.
pageHeader.item.details(x)define o conteúdo.Suporta HTML flexível com com conteúdo sempre centralizado.
Se nulo ou vazio, o espaço é exibido.
B3: Célula de actions.
pageHeader.item.actions(x)define o conteúdo.Se nulo ou vazio, o espaço é ocultado.
Suporta de 1 a N actions, sendo:
1 a 5 actions: Exibe as actions listadas, mostrando o ícone informado ou ícone padrão ou da action.
>5 actions: Exibe as actions listadas de 1-4 e na posição 5, exibir menu para acesso às actions de 5 à n através de menu suspenso.
{
"pageNavigation": {
//...
},
"right": {
"actions": [
{
"order": "0",
"name": "home",
"icon": "ea39",
"title": "Texto 1"
},
{
"order": "1",
"name": "home",
"icon": "e990",
"title": "Texto 2"
},
{
"order": "2",
"name": "home",
"icon": "ea88",
"title": "Texto 3"
}
]
}
},
"pageHeader": {
"template": "B",
"background": "#634975",
"logo": "http://api.mobilecare.com.br/integration/demo/resources/mobilex-demos/logo-mobilex-b.png",
"color": "#EE8113",
"item": {
"publishLevel": 1,
"details": [
{
"order": 0,
"value": "<br>Este é um texto dentro da célula que pode ser utilizado com formatação HTML<br>"
}
],
"actionDefault": 0,
"actions": [
{
"order": "0",
"name": "home",
"icon": "ea39",
"title": "Texto 1"
},
{
"order": "1",
"name": "home",
"icon": "e990",
"title": "Texto 2"
},
{
"order": "2",
"name": "home",
"icon": "ea88",
"title": "Texto 3"
},
{
"order": "3",
"name": "home",
"icon": "ea39",
"title": "Texto 1"
},
{
"order": "4",
"name": "home",
"icon": "e990",
"title": "Texto 2"
}
]
}
},
"pageContent": {
//...
}
}Last updated