Sidebar

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import React from 'react'
import styled, { css } from 'styled-components'
import { Sidebar } from './Sidebar'
export default {
title: 'Layouts(レイアウト)/Sidebar',
component: Sidebar,
parameters: {
withTheming: true,
},
}
export const All: Story = () => {
return (
<div style={{ margin: '32px' }}>
<h1>Sidebar</h1>
<p>
メインコンテンツとサイドコンテンツの2つのコンテンツをレイアウトするコンポーネントです。メインコンテンツは親要素の幅に対して可変となり、メインコンテンツが設定した最小幅以上の場合は2カラム、最小幅未満になると段落ちします。
</p>
<Sidebar>
<Side>
<h2>サイドコンテンツ</h2>
</Side>
<Main>
<h2>メインコンテンツ</h2>
<p>
メインコンテンツの幅が可変で、メインコンテンツが<Code>contentsMinWidth</Code>
未満になると段落ちします。<Code>contentsMinWidth</Code>の幅はデフォルトで50%です。
</p>
</Main>
</Sidebar>
<hr style={{ margin: '32px' }} />
<Sidebar right contentsMinWidth="600px" gap={{ row: 1, column: 0 }}>
<Main>
<h2>メインコンテンツ</h2>
<p>
メインコンテンツの<Code>contentsMinWidth</Code>
を600pxにしています。600px未満になると段落ちします。
<Code>box-sizing</Code>
の値に注意してください。
</p>
<p>
メインコンテンツとサイドコンテンツの間の余白は<Code>gap</Code>プロパティで設定できます。
<Code>row</Code><Code>column</Code>
で別々の値を設定できるので、横並びのときは余白なし、段落ちしたら余白をとる、ということが可能です。
</p>
</Main>
<Side>
<h2>サイドコンテンツ</h2>
<p>
サイドコンテンツを右に配置するには<Code>right</Code>プロパティを
<Code>true</Code>
にします。
</p>
</Side>
</Sidebar>
</div>
)
}
const Main = styled.main(({ theme }) => {
const { color, spacing } = theme
return css`
box-sizing: border-box;
padding: ${spacing.XXS} ${spacing.S};
border: 3px solid ${color.MAIN};
`
})
const Side = styled.aside(({ theme }) => {
const { color, spacing } = theme
return css`
width: 300px;
box-sizing: border-box;
padding: ${spacing.XXS} ${spacing.S};
border: 3px solid ${color.BORDER};
background-color: ${color.BACKGROUND};
`
})
const Code = styled.code(({ theme }) => {
const { color, radius, spacing } = theme
return css`
display: inline-block;
padding: 0 ${spacing.X3S};
border: 1px solid ${color.BORDER};
border-radius: ${radius.s};
background-color: ${color.BACKGROUND};
`
})
処理中

Props

NameRequiredTypeDescription
ref-(instance: HTMLDivElement) => void, RefObject<HTMLDivElement>
right-false, true`true` のとき、サイドコンテンツを右側に表示する
align-"center", "inherit", string & {}, "-moz-initial", "initial", "revert", "unset", "normal", "baseline", "start", "end", "flex-end", "flex-start", "self-end", "self-start", "stretch"各領域の縦位置の揃え方(align-items)
gap-0, "XXS", "XS", "S", "M", "L", "XL", "XXL", 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 8, -0.25, -0.5, -0.75, -1, -1.25, -1.5, -2, -2.5, -3, -3.5, -4, -8, "X3S", "X3L", SeparateGap各領域の間隔の指定(gap)
contentsMinWidth-string, number, string & {}コンポーネントの `min-width` 値
theme-any
forwardedAs-undefined