Button
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
ボタンコンポーネントの作成例を紹介します。
Only Core
コンポーネントを作らずにボタンを作るコード例も紹介しておきます。
↓
Preview
<Flex g='15'> <HTML.a href='###' d='in-flex' w='fit' td='none' c='base' bgc='text' lh='s' py='10' px='20' bdrs='20' hov='o'>Button</HTML.a> <HTML.a href='###' d='in-flex' w='fit' td='none' c='inherit' bd lh='s' py='10' px='20' bdrs='20' hov='o'>Button</HTML.a></Flex><Grid tag='a' href='###' gtc='1em 1fr 1em' ji='center' ai='center' px='15' py='10' g='30' w='16rem' td='none' bgc='text' c='base' bdrs='20' hov='neutral'> <Lism tag='span' gc='2'>Button</Lism> <Icon icon={ArrowRightIcon}/></Grid>Create Component
ここからはButton(.c--button)というコンポーネントを作って利用する例を紹介していきます。
Source Code
ソースコードを手動でコピー&ペーストしてご利用ください。
Import
import { Button } from '@lism-css/ui/react';Props
| プロパティ | 説明 |
|---|---|
variant(必須) | c--button--{variant} クラスを出力します。fill,outlineの2種類のスタイルをこの例では用意しています。 |
Usage
↓
Buttonの使用例<Flex g='15'> <Button href='###'>Button</Button> <Button href='###' bgc='brand' bdrs='10'>Button</Button> <Button href='###' bgc='#d13d5e' bdrs='99'><Icon icon='cart'/>Button</Button></Flex>variant: outline
↓
outlineの使用例<Flex g='15'> <Button href='###'>Button</Button> <Button href='###' variant='outline' c='brand' bdrs='10'>Button</Button> <Button href='###' variant='outline' c='#d13d5e' bdrs='99'><Icon icon='cart'/>Button</Button></Flex>アイコンを使う例
↓
アイコンを使う例
<Cluster g='15'> <Button href='###' g='5' bdrs='5'> <Icon icon='cart' style={{translate:'-25% 0'}} /> <span>Button</span> </Button> <Button href='###' variant='outline' g='5' bdrs='5'> <span>Button</span> <Icon icon={ArrowRightIcon} style={{translate:'25% 0'}} /> </Button> <Button href='###' w='fit' px='10' py='10' lh='1' bdrs='10'> <Icon icon={{as:ShoppingCartSimpleIcon, weight:'fill'}} fz='l'/> </Button></Cluster>サイズの調整
↓
サイズの調整
<Button href='###' w='fit' bdrs='10'> Button</Button><Button href='###' max-w='12em' py='15' fz='l' bdrs='10'> Button</Button>Gridでアイコンを端に寄せる
layout='grid'を指定すると gridレイアウト（.l--gridクラス）に切り替えることができます。
これにより、アイコンを端に寄せるレイアウトを組むこともできます。
↓
Preview
<Button href='###' layout='grid' max-w='20em' py='15' bdrs='10' hov='neutral'> <Icon icon='cart' /> <span>Button</span></Button><Button href='###' layout='grid' max-w='20em' py='15' bdrs='10' hov='neutral'> <span>Button</span> <Icon icon={ArrowRightIcon} /></Button><Button href='###' layout='grid' max-w='20em' py='15' bdrs='10' hov='neutral'> <Icon icon='cart' /> <span>Button</span> <Icon icon={ArrowRightIcon} /></Button>Opt-in
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(--base); } @media (any-hover: hover) { &:hover { background-color: var(--hov-bgc) !important; color: var(--hov-c) !important; } }}