Base

Baseコンポーネントは、主要なコンテンツを強調するための可視コンテナです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import styled from 'styled-components'
import { useTheme } from '../../hooks/useTheme'
import { Stack } from '../Layout'
import { Table, Td, Th } from '../Table'
import { Text } from '../Text'
import { Base, LayerKeys, layerMap } from './Base'
import { BaseColumn } from './BaseColumn'
import { DialogBase } from './DialogBase'
export default {
title: 'Data Display(データ表示)/Base',
component: Base,
}
export const BaseStory: Story = () => {
const themes = useTheme()
return (
<DescriptionList>
<dt>padding</dt>
<dd>
<List>
<li>
<Base>初期値は padding なし</Base>
</li>
<li>
<Base padding={1.5}>padding props の値には余白のデザイントークンを利用できます。</Base>
</li>
<li>
<Base padding={{ block: 1, inline: 1.5 }}>
論理的プロパティに依るブロック方向とインライン方向の別指定もできます。
</Base>
</li>
<li>
<Base padding={{ block: 1 }}>いずれか一方向の利用もできます。</Base>
</li>
</List>
</dd>
<dt>radius</dt>
<dd>
<List>
<li>
<Base radius="m">
<Text>デフォルト</Text>
</Base>
</li>
<li>
<Base radius="s">
<Text>角丸サイズ小</Text>
</Base>
</li>
</List>
</dd>
<dt>overflow</dt>
<dd>
<List>
<li>
<Base overflow="hidden">
<Table>
<thead>
<tr>
<Th>説明</Th>
<Th>補足</Th>
</tr>
</thead>
<tbody>
<tr>
<Td>必要に応じて overflow を使い溢れたコンテンツを処理できます。</Td>
<Td>
<code>overflow=&#123;&#123; x, y &#125;&#125;</code> の形でも書けます。
</Td>
</tr>
</tbody>
</Table>
</Base>
</li>
</List>
</dd>
<dt>box-shadow</dt>
<dd>
<List>
{Object.keys(layerMap).map((layer, index) => (
<li key={`${layer}-${index}`}>
<Base layer={Number(layer) as LayerKeys}>
<Text>
If layer props is specified as <Bold>{layer}</Bold>, box-shadow becomes
<Bold> {themes.shadow[layerMap[Number(layer) as LayerKeys]]}</Bold>.
</Text>
</Base>
</li>
))}
</List>
</dd>
</DescriptionList>
)
}
BaseStory.storyName = 'Base'
export const BaseColumnStory: Story = () => (
<Stack as="ul">
<li>
<p>padding / bgColor で余白と背景色を変えることもできます</p>
</li>
<li>
<BaseColumn>初期状態。padding は1文字分。背景は COLUMN。</BaseColumn>
</li>
<li>
<BaseColumn padding={1.5} bgColor="ACTION_BACKGROUND">
padding を1.5文字分に、背景を ACTION_BACKGROUND に変更。
</BaseColumn>
</li>
</Stack>
)
BaseColumnStory.storyName = 'BaseColumn'
export const DialogBaseStory: Story = () => (
<List>
<li>
<DialogBase radius="s">
<Text>
If radius props is specified as <Bold>s</Bold>, border-radius becomes <Bold>6px</Bold>.
</Text>
</DialogBase>
</li>
<li>
<DialogBase radius="m">
<Text>
If radius props is specified as <Bold>m</Bold>, border-radius becomes <Bold>8px</Bold>.
</Text>
</DialogBase>
</li>
</List>
)
DialogBaseStory.storyName = 'DialogBase(非推奨)'
const DescriptionList = styled.dl`
padding: 24px;
background-color: #eee;
`
const List = styled.ul`
margin: 0;
padding: 24px;
background-color: #eee;
list-style: none;
& > li:not(:first-child) {
margin-top: 24px;
}
`
const Bold = styled.span`
font-weight: bold;
`
処理中

種類

Base

SmartHR UIではBaseです。
テーブルや設定情報など、ユーザーに関心を向けたい、主要なコンテンツを表すエリアに使います。

DialogBase

SmartHR UIではDialogBaseです。
DialogDropdownなど、主要なコンテンツよりも上位のレイヤーで表示するコンテンツやメニューに使います。

多用するとBaseとの差がなくなります。高低差を意識させる必要のないコンポーネントやコンテンツでは使わないでください。

Props

Base props

NameRequiredTypeDescription
padding-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", SeparatePadding境界とコンテンツの間の余白
radius-"s", "m"角丸のサイズ
overflow-"auto", "hidden", "inherit", string & {}, "-moz-initial", "initial", "revert", "unset", "clip", "visible", "-moz-hidden-unscrollable", "scroll", { x: OverflowX; y: OverflowY; }コンテンツが要素内に収まらない場合の処理方法
layer-0, 1, 2, 3, 4レイヤの重なり方向の高さ(影の付き方に影響する)

DialogBase props

NameRequiredTypeDescription
radius-"s", "m"

関連リンク

参考文献