mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
8ddf2def8b* chore(deps-dev): upgrade carbon-components to v10.36.0 * feat(structured-list): add condensed, flush props * fix(structured-list): deprecate the border prop * fix(code-snippet): set min/max height for multi-line code snippet #656 Fixes #656 * fix(image-loader): make SSR compatible using a window type check guard * docs(tag): add separate disabled example for filterable/interactive tags * docs: update number of supported chart types * feat(side-nav): support rail variant * feat(ui-shell): add isSelected prop to HeaderNavItem * fix(ui-shell): default isSelected to false in SideNavMenuItem * fix(text-area): forward missing keydown event #665 Fixes #665 * feat: forward keyup event to components with inputs * feat(checkbox): make labelText slottable #563 Closes #563 * feat: make labelText slottable Related #563 * docs(component-api): account for undefined type * docs(ui-shell): link to correct rail source * fix(ui-shell): default isSelected in HeaderNavItem to false
63 lines
No EOL
1.4 KiB
Text
63 lines
No EOL
1.4 KiB
Text
|
|
|
|
---
|
|
components: ["Header",
|
|
"HeaderAction",
|
|
"HeaderActionLink",
|
|
"HeaderSearch",
|
|
"HeaderNav",
|
|
"HeaderNavItem",
|
|
"HeaderNavMenu",
|
|
"HeaderPanelDivider",
|
|
"HeaderPanelLink",
|
|
"HeaderPanelLinks",
|
|
"HeaderUtilities",
|
|
"SideNav",
|
|
"SideNavItems",
|
|
"SideNavLink",
|
|
"SideNavMenu",
|
|
"SideNavMenuItem",
|
|
"Content",
|
|
"SkipToContent",
|
|
"HeaderGlobalAction"]
|
|
---
|
|
|
|
<script>
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Header
|
|
|
|
<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 global search
|
|
|
|
<FileSource src="/framed/UIShell/HeaderSearch" />
|
|
|
|
### Header with utilities
|
|
|
|
<FileSource src="/framed/UIShell/HeaderUtilities" />
|
|
|
|
### Header with persisted hamburger menu
|
|
|
|
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" /> |