Componentes do Design System para estruturar páginas e navegar — cabeçalho de página, menu de secções, tabs, accordion, dropdowns e barra lateral.
Componentes que dão estrutura à página e permitem navegar entre secções e ações. Esta página é a vista de código: imports, props e exemplos.
Secção em construção
Esta página cobre os componentes principais; o resto do catálogo será completado. Para configurar estes componentes no Studio (sem código), vê Widgets do Page Builder.
Componentes principais
IGRPPageHeader
Cabeçalho de página com título, descrição, botão de voltar opcional e uma zona à direita para ações.
Gerado pelo Studio| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
title | string | — | Título da página. |
description | string | — | Subtítulo. |
variant | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h3" | Nível e tamanho do título. |
children | ReactNode | — | Ações à direita (botões, dropdowns). |
isSticky | boolean | — | Fixa o cabeçalho no topo ao fazer scroll. |
showBackButton | boolean | — | Mostra o botão de voltar. |
urlBackButton / backButtonUseBrowserBack | string / boolean | — | Destino do botão de voltar, ou usa o histórico do browser. |
<IGRPPageHeader
title="Pedidos"
description="Gestão dos pedidos recebidos"
showBackButton
urlBackButton="/"
>
<IGRPButton showIcon iconName="Plus">Novo pedido</IGRPButton>
</IGRPPageHeader>IGRPMenuNavigation
Menu lateral de secções da própria página: ao clicar, faz scroll até à secção e marca-a como ativa.
Gerado pelo Studio| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
sections | IGRPMenuNavigationItem[] | — | Itens: id, label, icon, disabled. |
title | string | "Navigation" | Título do menu. |
activeSection / onSectionChange | string / (sectionId: string) => void | — | Controlo externo da secção ativa (opcional). |
isStickyTop | boolean | false | Mantém o menu visível ao fazer scroll. |
showChevron | boolean | true | Seta à direita de cada item. |
badgeContent / badgeColor | string / IGRPColorVariants | — | Badge junto ao título. |
As secções de destino ligam-se pelo atributo data-section-id, ou pelo ref devolvido por useIGRPMenuNavigation().getSectionRef(id) quando a página está dentro de um IGRPMenuNavigationProvider — é o que o código gerado pelo Studio faz quando um widget tem a referência ativa.
<div className="flex gap-6">
<IGRPMenuNavigation
title="Pedido"
isStickyTop
sections={[
{ id: 'dados', label: 'Dados', icon: 'FileText' },
{ id: 'pagamento', label: 'Pagamento', icon: 'CreditCard' },
]}
/>
<div className="flex flex-col gap-6">
<section data-section-id="dados">…</section>
<section data-section-id="pagamento">…</section>
</div>
</div>IGRPTabs
Separadores definidos por uma lista de itens, com ícones, badges e scroll horizontal quando não cabem.
Gerado pelo Studio| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
items | IGRPTabItem[] | — | Cada item: value, label, content, icon, disabled, badgeContent, keepMounted. |
defaultValue / value / onValueChange | string | — | Separador inicial, ou controlo externo. |
variant | "default" | "outline" | "pills" | "underline" | "cards" | "default" | Estilo da barra de separadores. |
showIcon / iconPlacement | boolean / "start" | "end" | "top" | false | Mostra o ícone de cada item. |
showBadge | boolean | — | Mostra o badgeContent de cada item. |
fullWidth / contentBorder | boolean | false | Barra a toda a largura; borda à volta do conteúdo. |
<IGRPTabs
defaultValue="geral"
variant="underline"
showIcon
items={[
{ value: 'geral', label: 'Geral', icon: 'Info', content: <DadosGerais /> },
{ value: 'historico', label: 'Histórico', icon: 'History', content: <Historico />, keepMounted: true },
]}
/>keepMounted mantém o conteúdo montado quando o separador está inativo — útil para não perder o estado de um formulário.
IGRPAccordion
Lista de painéis colapsáveis; abre um de cada vez e começa com o primeiro aberto.
Gerado pelo Studio| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
items | IGRPAccordionItem[] | — | Cada item: title, content, e opcionalmente iconName, showIcon, iconPlacement. |
defaultValue | string | título do primeiro item | Título do painel aberto inicialmente. |
showIcon / iconName / iconPlacement | boolean / string / "start" | "end" | true / "ChevronDown" / "end" | Ícone do gatilho, para todos os itens. |
classNameTrigger / classNameContent | string | — | Classes do gatilho e do conteúdo. |
<IGRPAccordion
items={[
{ title: 'Dados pessoais', content: <DadosPessoais /> },
{ title: 'Morada', content: <Morada /> },
]}
/>IGRPDropdownMenu
Menu de ações que abre a partir de um botão. É o primitive de dropdown com prefixo IGRP, composto por partes.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
IGRPDropdownMenuTrigger | asChild?: boolean | — | Elemento que abre o menu (normalmente um IGRPButton com asChild). |
IGRPDropdownMenuContent | align?: "start" | "center" | "end" | "start" | Painel do menu. |
IGRPDropdownMenuItem | onSelect, disabled, variant?: "default" | "destructive" | — | Uma ação. |
IGRPDropdownMenuLabel / IGRPDropdownMenuSeparator | — | — | Título e separador de grupos. |
IGRPDropdownMenuCheckboxItem / IGRPDropdownMenuRadioItem / IGRPDropdownMenuSub | — | — | Opções marcáveis e submenus. |
<IGRPDropdownMenu>
<IGRPDropdownMenuTrigger asChild>
<IGRPButton variant="outline" showIcon iconName="Ellipsis">Mais</IGRPButton>
</IGRPDropdownMenuTrigger>
<IGRPDropdownMenuContent align="end">
<IGRPDropdownMenuLabel>Pedido</IGRPDropdownMenuLabel>
<IGRPDropdownMenuItem onSelect={exportar}>Exportar</IGRPDropdownMenuItem>
<IGRPDropdownMenuSeparator />
<IGRPDropdownMenuItem variant="destructive" onSelect={anular}>Anular</IGRPDropdownMenuItem>
</IGRPDropdownMenuContent>
</IGRPDropdownMenu>Outros componentes
| Componente | Para quê | Widget no Studio |
|---|---|---|
IGRPPageFooter | Rodapé da página, normalmente com os botões de submeter (isSticky fixa-o em baixo) | — |
IGRPContainer | div com id para agrupar conteúdo | Container (o Studio gera um contentor de layout) |
IGRPSeparator | Linha divisória horizontal ou vertical | Separator |
IGRPSidebarProvider, IGRPSidebar, IGRPSidebarMenu… | Barra lateral da aplicação (o layout das apps iGRP já a inclui) | — |
IGRPMenubar (+ …Menu, …Trigger, …Item) | Barra de menus horizontal | — |
IGRPCommand / IGRPCommandDialog | Paleta de comandos e pesquisa rápida (estilo ⌘K) | — |
Breadcrumb, Pagination (Primitives) | Migalhas de pão e paginação manual, quando o Horizon não cobre o caso — ver Primitives e Custom | — |
Última atualização: