PageLayout
O PageLayout é uma coleção de componentes que permite a criação de telas padronizadas com navegação primária na vertical e navegação secundária na horizontal.
Recomendamos o uso do PageLayout quando:
- Quando for necessário usar uma navegação primária disposta verticalmente. Para mais detalhes sobre como configurar a navegação primária dessa forma, consulte a documentação do componente Sidebar.
- Quando for necessário incluir uma navegação secundária que se dispõe horizontalmente na parte superior da tela.
Não recomendamos o uso do PageLayout quando:
- Quando for necessário usar uma navegação primária disposta horizontalmente.
Uso
js
<CdsPageLayout
variant="green"
size="md"
text="Lorem Ipsum"
@click="pageLayoutClick = true"
/>Preview
Joana Mendes
Administradora
Conteúdo da página
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes implementadas: 'green', 'teal', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'. A variante só terá efeito quando o PageLayout estiver no modo light. |
light | boolean | false | -- | Ativa o modo light do PageLayout. |
user | object | () => {} | -- | Define as informações referentes ao usuário. O objeto deve seguir a assinatura: { name: String, role: String, picture: String } |
collapsibleSideBar | boolean | false | -- | Define se a sidebar pode ser colapsada. |
showProfileMenu | boolean | false | -- | |
sideBarItems | array | [] | -- | Define os itens da da barra lateral de navegação. |
profileMenuItems | array | [] | -- | Define os itens a serem exibidos no menu dropdown mostrado ao clicar no "perfil". |
navigationItems | array | [] | -- | Define os itens da da barra de navegação secundária. |
logos | object | () => {} | -- | Define as logos da barra lateral de navegação, collapsible é a logo que aparecerá quando a sidebar estiver colapsada. |
sideBarActiveItem | object | () => {} | -- | Define o item ativo da sideBar |
navigationActiveItem | object | () => {} | -- | Define o item ativo da navegação secundária |
Eventos
Nome | Descrição |
|---|---|
@sidebar-item-click | Evento emitido quando um dos itens da SideBar é clicado |
@sidebar-logout | Evento emitido quando o icone de logout da SideBar é clicado |
@popover-item-click | |
@navigation-item-click | Evento emitido quando o icone da SecondaryNavbar é clicado |
Slots
Nome | Descrição |
|---|---|
#default | Slot usado para inserção de conteúdo do PageLayout. |