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): add "Header with multiple switchers" example (#2112)

Browse source
This commit is contained in:
Eric Liu 2025-03-09 13:59:36 -07:00 • committed by GitHub
commit a4aefad0e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 95 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -59,6 +59,16 @@ You can disable the `transition` by setting it to `false`.
<FileSource src="/framed/UIShell/HeaderSwitcher" /> <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 ## Header with global search
<FileSource src="/framed/UIShell/HeaderSearch" /> <FileSource src="/framed/UIShell/HeaderSearch" />

85
docs/src/pages/framed/UIShell/HeaderMultipleSwitcher.svelte Normal file
View file

@ -0,0 +1,85 @@
<script>
import {
Header,
HeaderUtilities,
HeaderAction,
HeaderPanelLinks,
HeaderPanelDivider,
HeaderPanelLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "carbon-components-svelte";
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isOpen1 = false;
let isOpen2 = false;
let isOpen3 = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" isSideNavOpen>
<svelte:fragment slot="skip-to-content">
<SkipToContent />
</svelte:fragment>
<HeaderUtilities>
<HeaderAction
bind:isOpen={isOpen1}
iconDescription="Settings"
tooltipAlignment="start"
icon={SettingsAdjust}
on:open={() => {
isOpen2 = false;
isOpen3 = false;
}}
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
<HeaderAction
bind:isOpen={isOpen2}
iconDescription="Profile"
icon={UserAvatarFilledAlt}
on:open={() => {
isOpen1 = false;
isOpen3 = false;
}}
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
<HeaderAction
bind:isOpen={isOpen3}
text="Switcher text"
on:open={() => {
isOpen1 = false;
isOpen2 = false;
}}
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>