Button
ボタンコンポーネントの作成例を紹介します。
Only Core
Section titled “Only Core”コンポーネントを作らずにボタンを作るコード例も紹介しておきます。
↓
Preview
<Flex g='20'> <HTML.a href='###' d='in-flex' w='fit' td='none' c='base' bgc='text' py='10' px='30' lh='xs' bdrs='20' hov='o'>Button</HTML.a> <HTML.a href='###' d='in-flex' w='fit' td='none' c='inherit' bd py='10' px='30' lh='xs' bdrs='20' hov='o'>Button</HTML.a></Flex><Grid tag='a' href='###' gtc='1em 1fr 1em' ji='center' ai='center' px='30' py='20' g='40' w='16rem' td='none' lh='xs' bgc='text' c='base' bdrs='20'> <Lism tag='span' gc='2'>Button</Lism> <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の使用例<Button href='###' max-w="xs">Button</Button><Flex g='20' my-s='30'> <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} translate='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='###' max-w='20rem' py='30' g='10' fz='l' bdrs='10'> Button</Button>Gridでアイコンを端に寄せる
Section titled “Gridでアイコンを端に寄せる”layout='grid'を指定すると gridレイアウト（.l--gridクラス）に切り替えることができます。
これにより、アイコンを端に寄せるレイアウトを組むこともできます。
↓
Preview
<Button href='###' layout='grid' max-w='20rem' bdrs='10'> <Icon icon='cart'/> <span>Button</span></Button><Button href='###' layout='grid' max-w='20rem' bdrs='10'> <span>Button</span> <Icon icon={ArrowRightIcon}/></Button><Button href='###' layout='grid' max-w='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; } }}