mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(ui-shell): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:11:28 -07:00
commit 6a3306a91f
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/components/UIShell.svx
View file

@ -1,5 +1,3 @@
--- ---
components: ["Header", components: ["Header",
"HeaderAction", "HeaderAction",
@ -27,6 +25,8 @@ components: ["Header",
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </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> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Currently, the UI Shell is not themable and only supports dark mode. Currently, the UI Shell is not themable and only supports dark mode.
@ -37,6 +37,8 @@ Open the following examples in a new tab to experience them in full.
## Header ## Header
Create a basic header with the `Header` component.
<FileSource src="/framed/UIShell/Header" /> <FileSource src="/framed/UIShell/Header" />
## Header with side navigation ## Header with side navigation
@ -71,12 +73,18 @@ Note that providing `text` overrides the tooltip.
## Header with global search ## Header with global search
Add a global search component to the header.
<FileSource src="/framed/UIShell/HeaderSearch" /> <FileSource src="/framed/UIShell/HeaderSearch" />
## Header with utilities ## Header with utilities
Include utility components in the header using `HeaderUtilities`.
<FileSource src="/framed/UIShell/HeaderUtilities" /> <FileSource src="/framed/UIShell/HeaderUtilities" />
## Header with persisted hamburger menu ## Header with persisted hamburger menu
Create a header with a persistent hamburger menu state.
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" /> <FileSource src="/framed/UIShell/PersistedHamburgerMenu" />