Badge
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
バッジを表示できるコンポーネントです。
↓
Preview
BadgeBadgeBadge
<Cluster g="15"> <Badge>Badge</Badge> <Badge variant="outline">Badge</Badge> <Badge util="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を用意しています。 |
ソースコード
ソースコードは GitHub で公開しています。
Examples
↓
<Badge>の使用例BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<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'BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<Cluster g="15"> <Badge variant="outline">Badge</Badge> <Badge variant="outline" c="red">Badge</Badge> <Badge variant="outline" c="orange">Badge</Badge> ...</Cluster>u--cbox との併用
↓
u--cboxクラスを使ったスタイリングの例RedOrangeYellowGreenBluePurplePinkGray
<Cluster g="15"> <Badge util="cbox" keycolor="red">Red</Badge> <Badge util="cbox" keycolor="orange">Orange</Badge> <Badge util="cbox" keycolor="yellow">Yellow</Badge> ...</Cluster>アイコンを使用する例
↓
例
BadgeBadge
<Cluster g="15" ai="center"> <Badge d="inline-flex" g="5" px-s="10" ai="center"> <Icon icon="star-fill" style={{ translate: '-10% 0' }} />Badge</Badge> <Badge variant="outline" d="inline-flex" g="5" px-s="10" ai="center" bdrs="10"> <Icon icon="tag" style={{ translate: '-10% 0' }} />Badge</Badge></Cluster>Only lism-css
@lism-css/uiを使用せずに、lism-css のみで Badge を構築するコード例を紹介します。
↓
Example
BadgeBadgeBadge
<Cluster g="15"> <Lism as="span" fz="xs" lh="xs" py="5" px="10" bgc="text" c="base" bdrs="10">Badge</Lism> <Lism as="span" fz="xs" lh="xs" py="5" px="10" bd bdc="current" bdrs="10">Badge</Lism> <Lism as="span" util="cbox" keycolor="blue" bd bdc="keycolor:base:40%" fz="xs" lh="xs" py="5" px="10" bdrs="99">Badge</Lism></Cluster>