SideNav

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import * as React from 'react'
import styled from 'styled-components'
import { Heading } from '../Heading'
import { StatusLabel } from '../StatusLabel'
import { SideNav } from './SideNav'
export default {
title: 'Navigation(ナビゲーション)/SideNav',
component: SideNav,
}
const Label = styled(StatusLabel)`
/* &.grey {
background-color: #fff;
} */
`
const SideNavItems = [
{
id: 'id-1',
title: ' one!',
isSelected: true,
},
{
id: 'id-2',
title: 'two!',
isSelected: false,
},
{
id: 'id-3',
title: 'three!',
isSelected: false,
},
{
id: 'id-4',
title: 'four!',
isSelected: false,
},
{
id: 'id-5',
title: 'five!',
isSelected: false,
},
]
const SideNavPrefixItems = [
{
id: 'id-1',
title: 'todo 1',
isSelected: true,
prefix: <Label>done</Label>,
},
{
id: 'id-2',
title: 'todo 2',
isSelected: false,
prefix: (
<Label type="blue" bold>
must
</Label>
),
},
{
id: 'id-3',
title: 'todo 3',
isSelected: false,
prefix: (
<Label type="blue" bold>
must
</Label>
),
},
{
id: 'id-4',
title: 'todo 4',
isSelected: false,
prefix: (
<Label type="blue" bold>
must
</Label>
),
},
{
id: 'id-5',
title: 'todo 5',
isSelected: false,
prefix: (
<Label type="blue" bold>
must
</Label>
),
},
]
export const All: Story = () => (
<Wrapper>
<Title type="sectionTitle">default</Title>
<SideNav items={SideNavItems} onClick={action('clicked')} />
<Title type="sectionTitle">Small Size</Title>
<SideNav size="s" items={SideNavItems} onClick={action('clicked')} />
<Title type="sectionTitle">With Prefix</Title>
<SideNav items={SideNavPrefixItems} onClick={action('clicked')} />
</Wrapper>
)
All.storyName = 'all'
const Wrapper = styled.div`
padding: 24px;
width: 200px;
`
const Title = styled(Heading)`
margin: 0 0 16px;
`
処理中

Props

SideNav props

NameRequiredTypeDescription
itemstrueSideNavItemProps[]各アイテムのデータの配列
size-"default", "s"各アイテムの大きさ
onClick-OnClickアイテムを押下したときに発火するコールバック関数
className-stringコンポーネントに適用するクラス名

SideNavItem props

NameRequiredTypeDescription
titletruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalアイテムのタイトル
prefix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalタイトルのプレフィックスの内容。通常、StatusLabel の配置に用います。
isSelected-false, true選択されているアイテムかどうか
size-"default", "s"アイテムの大きさ
onClick-OnClickアイテムを押下したときに発火するコールバック関数