SideMenu

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import React from 'react'
import styled, { css } from 'styled-components'
import { SideMenu } from './SideMenu'
export default {
title: 'Experimental(実験的)/SideMenu',
component: SideMenu,
parameters: {
layout: 'fullscreen',
withTheming: true,
},
}
export const Default: Story = () => (
<Wrapper>
<SideMenu>
<SideMenu.Group name="基本設定">
<SideMenu.Item href="#">評価シート</SideMenu.Item>
<SideMenu.Item href="#" current>
評価ロール
</SideMenu.Item>
<SideMenu.Item href="#">評価フロー</SideMenu.Item>
</SideMenu.Group>
<SideMenu.Group name="その他の設定">
<SideMenu.Item href="#">評価項目の入力必須設定</SideMenu.Item>
<SideMenu.Item href="#">評価ロールの閲覧・編集権限設定</SideMenu.Item>
<SideMenu.Item href="#">評価対象者の表示項目設定</SideMenu.Item>
</SideMenu.Group>
</SideMenu>
</Wrapper>
)
const Wrapper = styled.div`
${({ theme: { color, space } }) => css`
background-color: ${color.BACKGROUND};
padding: ${space(2)};
`}
`
処理中

Props

SideMenu props

NameRequiredTypeDescription
theme-any
forwardedAs-string, ComponentClass<any, any>, FunctionComponent<any>

SideMenuGroup props

NameRequiredTypeDescription
nametruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal分類ラベル
nameTag-string, ComponentClass<any, any>, FunctionComponent<any>分類ラベルの HTML タグ
theme-any
forwardedAs-string, ComponentClass<any, any>, FunctionComponent<any>

SideMenuItem props

NameRequiredTypeDescription
current-false, true現在地かどうか