Center

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import React from 'react'
import styled, { css } from 'styled-components'
import { Button, Center, Heading, Stack } from '../../..'
export default {
title: 'Layouts(レイアウト)/Center',
component: Center,
parameters: {
withTheming: true,
},
}
export const All: Story = () => {
return (
<Stack as="article">
<header>
<Heading>Center</Heading>
</header>
<Stack as="section">
<Heading tag="h2" type="sectionTitle">
default
</Heading>
<DemoWrapper>
<Center>
<Button>水平中央揃え</Button>
</Center>
</DemoWrapper>
</Stack>
<Stack as="section">
<Heading tag="h2" type="sectionTitle">
padding
</Heading>
<DemoWrapper>
<Center padding={1.5}>
<Button>水平中央揃え</Button>
</Center>
</DemoWrapper>
</Stack>
<Stack as="section">
<Heading tag="h2" type="sectionTitle">
max width
</Heading>
<DemoWrapper>
<Center maxWidth="50%">
<p>{'これは中央揃えのテキストです。'.repeat(5)}</p>
</Center>
</DemoWrapper>
</Stack>
<Stack as="section">
<Heading tag="h2" type="sectionTitle">
with Vertical Centering (with minHeight: 200px)
</Heading>
<DemoWrapper>
<Center verticalCentering minHeight="200px">
<Button>水平垂直中央揃え</Button>
</Center>
</DemoWrapper>
</Stack>
</Stack>
)
}
const DemoWrapper = styled.div`
${({ theme: { color } }) => css`
border: 3px dotted ${color.BORDER};
`}
`
処理中

Props

ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>
padding
0"XXS""XS""S""M""L""XL""XXL"0.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""X3L"

境界とコンテンツの間の余白

minHeight
stringnumber

コンテンツの最小高さ

maxWidth
stringnumber

コンテンツの最大幅

verticalCentering
falsetrue

天地中央揃えも有効化するかどうか

theme
any
forwardedAs
undefined