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

Demo tooltip position in header utilities example

Browse source
This commit is contained in:
Eric Liu 2024-02-24 14:11:53 -08:00
commit 321813f828
1 changed files with 14 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

50
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -2,11 +2,7 @@
import { import {
Header, Header,
HeaderUtilities, HeaderUtilities,
HeaderAction,
HeaderGlobalAction, HeaderGlobalAction,
HeaderPanelLinks,
HeaderPanelDivider,
HeaderPanelLink,
SideNav, SideNav,
SideNavItems, SideNavItems,
SideNavMenu, SideNavMenu,
@ -18,12 +14,11 @@
Row, Row,
Column, Column,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Logout from "carbon-icons-svelte/lib/Logout.svelte";
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte"; import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte"; import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isSideNavOpen = false; let isSideNavOpen = false;
let isOpen1 = false;
let isOpen2 = false;
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
@ -31,37 +26,20 @@
<SkipToContent /> <SkipToContent />
</svelte:fragment> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" /> <HeaderGlobalAction
<HeaderAction iconDescription="Settings"
bind:isOpen="{isOpen1}" tooltipAlignment="start"
icon="{SettingsAdjust}"
/>
<HeaderGlobalAction
iconDescription="Profile"
icon="{UserAvatarFilledAlt}" icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt}" />
> <HeaderGlobalAction
<HeaderPanelLinks> iconDescription="Log out"
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> tooltipAlignment="end"
<HeaderPanelLink>Switcher item 1</HeaderPanelLink> icon="{Logout}"
<HeaderPanelLink>Switcher item 2</HeaderPanelLink> />
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 3</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
<HeaderAction bind:isOpen="{isOpen2}">
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
<HeaderPanelLink>Switcher item 5</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities> </HeaderUtilities>
</Header> </Header>