mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

uisehll with nav finished

Browse source
This commit is contained in:
adan.ulloa 2020-01-06 18:41:10 -06:00
commit 390f950ca5
10 changed files with 578 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/components/UIShell/UIShell.Story.svelte
View file

@ -3,8 +3,8 @@
import UIShell from './UIShell.svelte';
import FormTest from './FormTest.svelte';
import Notification20 from 'carbon-icons-svelte/lib/Notification20';
import UserAvatar20 from 'carbon-icons-svelte/lib/UserAvatar20';
import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
import { leftPanelActions, leftPanelTypes } from './constants';
const navMenu = [
{
@ -45,13 +45,15 @@
/*
Format:
action: will be place on the aria-label, use to identify the action from the others.
action: will be place on the aria-label, use to identify the action from the others. Predifined actions: 'search', 'help', 'notification', 'account', 'switcher'
type: search-> will open an inputText to start a search.
component-> when specifying this property, content will expect a .svelte file.
link-> when specifying this property, content will expect for subject objects that will contain href and link.
link-> when specifying this property, content will expect for just 1 href and text
links-> when specifying this property, content will expect for an array of objects with property subject and another array of objects with href and text
icon: you need to specify the properties specified in carbon-icons-svelte components as shown in the example below.
@ -61,29 +63,79 @@
*/
const rightPanel = [
{
action: 'search'
action: leftPanelActions.search.actionString,
type: leftPanelTypes.search,
isVisible: true
},
{
action: 'userlogin',
type: 'component',
{
action: 'customsettings',
type: leftPanelTypes.component,
icon: [
{
class: undefined,
skeleton: false,
render: Notification20,
title: 'Notification20',
render: SettingsAdjust20,
title: 'settings',
tabIndex: 0,
focusable: false,
style: undefined
}
],
content: FormTest
content: FormTest,
isVisible: true
},
{
action: 'switcher',
action: leftPanelActions.help.actionString,
type: leftPanelTypes.link,
content: {
href: '#',
text: leftPanelActions.help.actionString
},
isVisible: true
},
{
action: leftPanelActions.notifications.actionString,
type: leftPanelTypes.links,
content: [
{
subjet: 'Switcher theme 1',
subjet: 'Notification subjet 1',
items: [
{
href: '#',
text: 'Notification item 1'
}
]
},
{
subjet: 'Notification subjet 2',
items: [
{
href: '#',
text: 'Notification item 1'
},
{
href: '#',
text: 'Notification item 2'
},
{
href: '#',
text: 'Notification item 3'
},
{
href: '#',
text: 'Notification item 4'
}
]
}
],
isVisible: true
},
{
action: leftPanelActions.switcher.actionString,
type: leftPanelTypes.links,
content: [
{
subjet: 'Switcher subjet 1',
items: [
{
href: '#',
@ -92,7 +144,7 @@
]
},
{
subjet: 'Switcher theme 2',
subjet: 'Switcher subjet 2',
items: [
{
href: '#',
@ -113,7 +165,7 @@
]
},
{
subjet: 'Switcher theme 3',
subjet: 'Switcher subjet 3',
items: [
{
href: '#',
@ -125,23 +177,17 @@
}
]
}
]
],
isVisible: true
},
{
action: 'userlogin',
type: 'component',
icon: [
{
class: undefined,
skeleton: false,
render: UserAvatar20,
title: 'UserAvatar20',
tabIndex: 0,
focusable: false,
style: undefined
}
],
content: FormTest
action: leftPanelActions.account.actionString,
type: leftPanelTypes.link,
content: {
href: '#',
text: leftPanelActions.account.actionString
},
isVisible: true
}
];
</script>