mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(ui-shell): add Content, SkipToContent components
This commit is contained in:
Eric Liu
parent
6a5f461017
commit
40dc2bf61e
5 changed files with 68 additions and 40 deletions
7
src/components/UIShell/Content.svelte
Normal file
7
src/components/UIShell/Content.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
export let id = "main-content";
|
||||
</script>
|
||||
|
||||
<main {...$$props} {id} class:bx--content={true}>
|
||||
<slot />
|
||||
</main>
|
||||
8
src/components/UIShell/SkipToContent.svelte
Normal file
8
src/components/UIShell/SkipToContent.svelte
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<script>
|
||||
export let href = "#main-content";
|
||||
export let tabindex = "0";
|
||||
</script>
|
||||
|
||||
<a {...$$props} class:bx--skip-to-content={true} {href} {tabindex} on:click>
|
||||
<slot>Skip to main content</slot>
|
||||
</a>
|
||||
|
|
@ -1,30 +1,32 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
|
||||
import Help20 from 'carbon-icons-svelte/lib/Help20';
|
||||
import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
|
||||
import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16';
|
||||
import Notification20 from 'carbon-icons-svelte/lib/Notification20';
|
||||
import UserAvatar20 from 'carbon-icons-svelte/lib/UserAvatar20';
|
||||
import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
|
||||
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
|
||||
import Help20 from "carbon-icons-svelte/lib/Help20";
|
||||
import ChangeCatalog16 from "carbon-icons-svelte/lib/ChangeCatalog16";
|
||||
import ManageProtection16 from "carbon-icons-svelte/lib/ManageProtection16";
|
||||
import Notification20 from "carbon-icons-svelte/lib/Notification20";
|
||||
import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
|
||||
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
|
||||
|
||||
import SideNav from './SideNav/SideNav.svelte';
|
||||
import SideNavItems from './SideNav/SideNavItems.svelte';
|
||||
import SideNavMenu from './SideNav/SideNavMenu.svelte';
|
||||
import SideNavMenuItem from './SideNav/SideNavMenuItem.svelte';
|
||||
import SideNavLink from './SideNav/SideNavLink.svelte';
|
||||
import Header from './GlobalHeader/Header.svelte';
|
||||
import HeaderNav from './GlobalHeader/HeaderNav.svelte';
|
||||
import HeaderNavItem from './GlobalHeader/HeaderNavItem.svelte';
|
||||
import HeaderNavMenu from './GlobalHeader/HeaderNavMenu.svelte';
|
||||
import HeaderUtilities from './GlobalHeader/HeaderUtilities.svelte';
|
||||
import HeaderActionSearch from './GlobalHeader/HeaderActionSearch.svelte';
|
||||
import HeaderActionLink from './GlobalHeader/HeaderActionLink.svelte';
|
||||
import HeaderAction from './GlobalHeader/HeaderAction.svelte';
|
||||
import HeaderPanelDivider from './GlobalHeader/HeaderPanelDivider.svelte';
|
||||
import HeaderPanelLink from './GlobalHeader/HeaderPanelLink.svelte';
|
||||
import HeaderPanelLinks from './GlobalHeader/HeaderPanelLinks.svelte';
|
||||
import SideNav from "./SideNav/SideNav.svelte";
|
||||
import SideNavItems from "./SideNav/SideNavItems.svelte";
|
||||
import SideNavMenu from "./SideNav/SideNavMenu.svelte";
|
||||
import SideNavMenuItem from "./SideNav/SideNavMenuItem.svelte";
|
||||
import SideNavLink from "./SideNav/SideNavLink.svelte";
|
||||
import Header from "./GlobalHeader/Header.svelte";
|
||||
import HeaderNav from "./GlobalHeader/HeaderNav.svelte";
|
||||
import HeaderNavItem from "./GlobalHeader/HeaderNavItem.svelte";
|
||||
import HeaderNavMenu from "./GlobalHeader/HeaderNavMenu.svelte";
|
||||
import HeaderUtilities from "./GlobalHeader/HeaderUtilities.svelte";
|
||||
import HeaderActionSearch from "./GlobalHeader/HeaderActionSearch.svelte";
|
||||
import HeaderActionLink from "./GlobalHeader/HeaderActionLink.svelte";
|
||||
import HeaderAction from "./GlobalHeader/HeaderAction.svelte";
|
||||
import HeaderPanelDivider from "./GlobalHeader/HeaderPanelDivider.svelte";
|
||||
import HeaderPanelLink from "./GlobalHeader/HeaderPanelLink.svelte";
|
||||
import HeaderPanelLinks from "./GlobalHeader/HeaderPanelLinks.svelte";
|
||||
import Content from "./Content.svelte";
|
||||
import SkipToContent from "./SkipToContent.svelte";
|
||||
|
||||
let isSideNavOpen = undefined;
|
||||
|
||||
|
|
@ -32,8 +34,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: ChangeCatalog16,
|
||||
title: 'Catalog',
|
||||
tabindex: '0',
|
||||
title: "Catalog",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -42,8 +44,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Help20,
|
||||
title: 'Help',
|
||||
tabindex: '0',
|
||||
title: "Help",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -52,8 +54,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: SettingsAdjust20,
|
||||
title: 'Catalog',
|
||||
tabindex: '0',
|
||||
title: "Catalog",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -62,8 +64,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: ManageProtection16,
|
||||
title: 'Catalog',
|
||||
tabindex: '0',
|
||||
title: "Catalog",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -72,8 +74,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: AppSwitcher20,
|
||||
title: 'App Switcher',
|
||||
tabindex: '0',
|
||||
title: "App Switcher",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -82,8 +84,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: UserAvatar20,
|
||||
title: 'Account',
|
||||
tabindex: '0',
|
||||
title: "Account",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -92,8 +94,8 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Notification20,
|
||||
title: 'Notifications',
|
||||
tabindex: '0',
|
||||
title: "Notifications",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
|
@ -102,15 +104,17 @@
|
|||
class: undefined,
|
||||
skeleton: false,
|
||||
render: SettingsAdjust20,
|
||||
title: 'Settings',
|
||||
tabindex: '0',
|
||||
title: "Settings",
|
||||
tabindex: "0",
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if story === 'header'}
|
||||
<Header {...$$props} />
|
||||
<Header {...$$props}>
|
||||
<SkipToContent />
|
||||
</Header>
|
||||
{:else if story === 'sidenav'}
|
||||
<SideNav isOpen={true}>
|
||||
<SideNavItems>
|
||||
|
|
@ -197,3 +201,6 @@
|
|||
</SideNavItems>
|
||||
</SideNav>
|
||||
{/if}
|
||||
<Content>
|
||||
<h2>Page Title</h2>
|
||||
</Content>
|
||||
|
|
|
|||
|
|
@ -14,3 +14,5 @@ export { default as SideNavItems } from './SideNav/SideNavItems.svelte';
|
|||
export { default as SideNavLink } from './SideNav/SideNavLink.svelte';
|
||||
export { default as SideNavMenu } from './SideNav/SideNavMenu.svelte';
|
||||
export { default as SideNavMenuItem } from './SideNav/SideNavMenuItem.svelte';
|
||||
export { default as Content } from './Content.svelte';
|
||||
export { default as SkipToContent } from './SkipToContent.svelte';
|
||||
|
|
@ -126,6 +126,8 @@ import {
|
|||
SideNavLink,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
Content,
|
||||
SkipToContent,
|
||||
} from "./components/UIShell";
|
||||
import UnorderedList from "./components/UnorderedList";
|
||||
|
||||
|
|
@ -266,4 +268,6 @@ export {
|
|||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
UnorderedList,
|
||||
Content,
|
||||
SkipToContent,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue