mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
90 lines
No EOL
2.5 KiB
Text
90 lines
No EOL
2.5 KiB
Text
---
|
|
components: ["Header",
|
|
"HeaderAction",
|
|
"HeaderActionLink",
|
|
"HeaderSearch",
|
|
"HeaderNav",
|
|
"HeaderNavItem",
|
|
"HeaderNavMenu",
|
|
"HeaderPanelDivider",
|
|
"HeaderPanelLink",
|
|
"HeaderPanelLinks",
|
|
"HeaderUtilities",
|
|
"SideNav",
|
|
"SideNavItems",
|
|
"SideNavLink",
|
|
"SideNavMenu",
|
|
"SideNavMenuItem",
|
|
"Content",
|
|
"SkipToContent",
|
|
"HeaderGlobalAction"]
|
|
---
|
|
|
|
<script>
|
|
import { InlineNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
`UIShell` provides a collection of components for building application shells and navigation structures. It includes header, side navigation, and content components that work together to create a cohesive user interface.
|
|
|
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
<div class="body-short-01">
|
|
Currently, the UI Shell is not themable and only supports dark mode.
|
|
</div>
|
|
</InlineNotification>
|
|
|
|
Open the following examples in a new tab to experience them in full.
|
|
|
|
## Header
|
|
|
|
Create a basic header with the `Header` component.
|
|
|
|
<FileSource src="/framed/UIShell/Header" />
|
|
|
|
## Header with side navigation
|
|
|
|
The hamburger menu will automatically be rendered if the `SideNav` component is used.
|
|
|
|
<FileSource src="/framed/UIShell/HeaderNav" />
|
|
|
|
## Header with side navigation (rail)
|
|
|
|
Set `rail` to `true` on `SideNav` to use the rail variant.
|
|
|
|
<FileSource src="/framed/UIShell/HeaderNavRail" />
|
|
|
|
## Header with app switcher
|
|
|
|
The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.
|
|
|
|
You can disable the `transition` by setting it to `false`.
|
|
|
|
<FileSource src="/framed/UIShell/HeaderSwitcher" />
|
|
|
|
## Header with multiple switchers
|
|
|
|
Multiple switchers can be used, and the switcher button can be customized. For example, display a tooltip using `iconDescription`.
|
|
|
|
Control the tooltip alignment using `tooltipAlignment`.
|
|
|
|
Note that providing `text` overrides the tooltip.
|
|
|
|
<FileSource src="/framed/UIShell/HeaderMultipleSwitcher" />
|
|
|
|
## Header with global search
|
|
|
|
Add a global search component to the header.
|
|
|
|
<FileSource src="/framed/UIShell/HeaderSearch" />
|
|
|
|
## Header with utilities
|
|
|
|
Include utility components in the header using `HeaderUtilities`.
|
|
|
|
<FileSource src="/framed/UIShell/HeaderUtilities" />
|
|
|
|
## Header with persisted hamburger menu
|
|
|
|
Create a header with a persistent hamburger menu state.
|
|
|
|
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" /> |