Button
ボタンコンポーネントの作成例を紹介します。
Only Core
Section titled “Only Core”コンポーネントを作らずにボタンを作るコード例も紹介しておきます。
↓
Preview
<Flex g='20'> <Link href='###' d='if' w='fit' td='n' c='base' bgc='text' py='10' px='30' lh='xs' bdrs='20' hov='fade'>Button</Link> <Link href='###' d='if' w='fit' td='n' c='inherit' bd py='10' px='30' lh='xs' bdrs='20' hov='fade'>Button</Link></Flex><Grid tag='a' href='###' gtc='1em 1fr 1em' ji='c' ai='c' px='30' py='20' g='40' w='16rem' td='n' lh='xs' bgc='text' c='base' bdrs='20'> <GridItem tag='span' gc='2'>Button</GridItem> <Icon icon={ArrowRightIcon}/></Grid>Create Component
Section titled “Create Component”ここからはButton(.c--button)というコンポーネントを作って利用する例を紹介していきます。
Source Code
Section titled “Source Code” ソースコードを手動でコピー&ペーストしてご利用ください。
Import
Section titled “Import” import jsx from '@/components/lism/Button/index.jsx'; | プロパティ | 説明 |
|---|---|
variant(必須) | c--button-{variant} クラスを出力します。fill,outlineの2種類のスタイルをこの例では用意しています。 |
↓
Buttonの使用例<Flex g='20'> <Button href='###'>Button</Button> <Button href='###' bgc='main' bdrs='20'>Button</Button> <Button href='###' bgc='#d13d5e' bdrs='99'><Icon icon='cart'/>Button</Button></Flex>variant: outline
Section titled “variant: outline” ↓
outlineの使用例<Flex g='20'> <Button href='###'>Button</Button> <Button href='###' variant='outline' c='main' bdrs='20'>Button</Button> <Button href='###' variant='outline' c='#d13d5e' bdrs='99'><Icon icon='cart'/>Button</Button></Flex>アイコンを使う例
Section titled “アイコンを使う例” ↓
アイコンを使う例
<Flex g='20'> <Button href='###' g='10' bdrs='5'> <Icon icon='cart' /> <span>Button</span> </Button> <Button href='###' variant='outline' g='5' bdrs='5'> <span>Button</span> <Icon icon={ArrowRightIcon} offset='20% 0'/> </Button> <Button href='###' w='fit' px='20' py='20' lh='1' bdrs='10'> <Icon icon={{as:ShoppingCartSimpleIcon, weight:'fill'}} fz='l'/> </Button></Flex>サイズの調整
Section titled “サイズの調整” ↓
サイズの調整
<Button href='###' g='10' w='fit' bdrs='10'> Button</Button><Button href='###' maxW='20rem' py='30' jc='c' g='10' fz='l' bdrs='10'> Button</Button>Gridでアイコンを端に寄せる
Section titled “Gridでアイコンを端に寄せる”layout={Grid}を指定すると gridレイアウト（.l--gridクラス）に切り替えることができます。
これにより、アイコンを端に寄せるレイアウトを組むこともできます。
↓
Preview
<Button href='###' layout={Grid} maxW='20rem' bdrs='10'> <Icon icon='cart'/> <span>Button</span></Button><Button href='###' layout={Grid} maxW='20rem' bdrs='10'> <span gc='2'>Button</span> <Icon icon={ArrowRightIcon}/></Button><Button href='###' layout={Grid} maxW='20rem' bdrs='10'> <Icon icon='cart'/> <span>Button</span> <Icon icon={ArrowRightIcon}/></Button>Opt-in
Section titled “Opt-in”hov="reverse"
Section titled “hov="reverse"”ホバー時に、fill,outlineが入れ替わるような -hovクラスを追加する例を紹介します。
↓
例
.-hov\:reverse { --hov-c: var(--bgc); --hov-bgc: var(--c); &:where(.c--button-fill) { --hov-bgc: transparent; } &:where(.c--button-outline) { --hov-c: var(--c-base); } @media (any-hover: hover) { &:hover { background-color: var(--hov-bgc) !important; color: var(--hov-c) !important; } }}