Badge
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
バッジを表示できるコンポーネントです。
↓
Preview
Badge Badge Badge
<Cluster g='15'> <Badge>Badge</Badge> <Badge variant='outline'>Badge</Badge> <Badge className='u-cbox' keycolor='blue' bdrs='99'>Badge</Badge></Cluster>How to use
@lism-css/ui パッケージでBadge(.c--badge)として提供しています。
Import
import { Badge } from '@lism-css/ui/react';Props
| プロパティ | 説明 |
|---|---|
variant(必須) | c--badge--{variant} クラスを出力します。outlineを用意しています。 |
基本構造
<Badge>...</Badge>Source Code
@layer lism.modules {
.c--badge {
--c: var(--base);
--bgc: var(--text);
--bdc: transparent;
color: var(--c);
background-color: var(--bgc);
border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
}
.c--badge--outline {
--c: var(--text);
--bgc: transparent;
--bdc: currentColor;
}
}Examples
↓
<Badge>の使用例 Badge Badge Badge Badge Badge Badge Badge Badge Badge
<Cluster g='15'> <Badge>Badge</Badge> <Badge bgc='red'>Badge</Badge> <Badge bgc='orange'>Badge</Badge> <Badge bgc='yellow'>Badge</Badge> <Badge bgc='green'>Badge</Badge> <Badge bgc='blue' bdrs='99'>Badge</Badge> <Badge bgc='purple' bdrs='99'>Badge</Badge> <Badge bgc='pink' bdrs='99'>Badge</Badge> <Badge bgc='gray' bdrs='99'>Badge</Badge></Cluster>variant: outline
outlineスタイルを標準で用意しています。
↓
variant='outline' Badge Badge Badge Badge Badge Badge Badge Badge Badge
<Cluster g='15'> <Badge variant='outline'>Badge</Badge> <Badge variant='outline' c='red'>Badge</Badge> <Badge variant='outline' c='orange'>Badge</Badge> ... <Badge variant='outline' c='blue' fz='xs' bdrs='99'>Badge</Badge> <Badge variant='outline' c='purple' fz='xs' bdrs='99'>Badge</Badge> ...</Cluster>u-cbox との併用
↓
u-cboxクラスを使ったスタイリングの例 Red Orange Yellow Green Blue Purple Pink Gray
<Cluster g='15'> <Badge className='u-cbox' keycolor='red'>Red</Badge> <Badge className='u-cbox' keycolor='orange'>Orange</Badge> <Badge className='u-cbox' keycolor='yellow'>Yellow</Badge> ...</Cluster>アイコンを使用する例
↓
例
Badge Badge
<Cluster g='15' ai='center'> <Badge d='in-flex' g='5' px-s='10' ai='center'><Icon icon='star-fill' style={{translate: '-10% 0'}} />Badge</Badge> <Badge variant='outline' d='in-flex' g='5' px-s='10' ai='center' bdrs='5'><Icon icon='tag' style={{translate: '-10% 0'}} />Badge</Badge></Cluster>Only lism-css
@lism-css/uiを使用せずに、lism-css のみで Badge を構築するコード例を紹介します。
↓
Example
Badge Badge Badge
<Cluster g='15'> <Lism tag='span' fz='xs' lh='xs' py='5' px='10' bgc='text' c='base' bdrs='10'>Badge</Lism> <Lism tag='span' fz='xs' lh='xs' py='5' px='10' bd bdc='cc' bdrs='10'>Badge</Lism> <Lism tag='span' className='u-cbox' keycolor='blue' bd bdc='keycolor:base:40%' fz='xs' lh='xs' py='5' px='10' bdrs='99'>Badge</Lism></Cluster>