コンテンツにスキップ
Lism CSS

Badge

バッジを表示する<Badge>コンポーネントの作成例を紹介します。

↓
Preview
Badge Badge Badge

Only Core

Section titled “Only Core”

コンポーネントを作らずにバッジを作るコード例も紹介しておきます。

↓
Example
Badge Badge Badge 
<Flex variant='cluster' g='20'>
  <Lism tag='span' p='10' lh='1' fz='s' bgc='text' c='base' bd bdc='transparent' bdrs='10'>Badge</Lism>
  <Lism tag='span' p='10' lh='1' fz='s' bd bdrs='10'>Badge</Lism>
  <Lism tag='span' className='u--cbox' keycolor='blue' bd bdc='keycolor:base:25%' p='10' lh='1' fz='s' bdrs='99'>Badge</Lism>
</Flex>

Create Component

Section titled “Create Component”

ここからはBadge(.c--badge)というコンポーネントを作って利用する例を紹介していきます。

Source Code

Section titled “Source Code”
ソースコードを手動でコピー&ペーストしてご利用ください。

Import

Section titled “Import”
 import jsx from '@/components/lism/Badge/index.jsx';

Usage

Section titled “Usage”
↓
<Badge>の使用例
Badge Badge Badge Badge Badge Badge Badge Badge Badge 
<Flex variant='cluster' g='20'>
  <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' fz='xs' bdrs='99'>Badge</Badge>
  <Badge bgc='purple' fz='xs' bdrs='99'>Badge</Badge>
  <Badge bgc='pink' fz='xs' bdrs='99'>Badge</Badge>
  <Badge bgc='gray' fz='xs' bdrs='99'>Badge</Badge>
</Flex>

variant: outline

Section titled “variant: outline”

outlineスタイルを標準で用意しています。

↓
variant='outline'
Badge Badge Badge Badge Badge Badge Badge Badge Badge 
<Flex variant='cluster' g='20'>
  <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>
  ...
</Flex>

u--cbox との併用

Section titled “u--cbox との併用”
↓
u--cboxクラスを使ったスタイリングの例
Red Orange Yellow Green Blue Purple Pink Gray 
<Flex variant='cluster' g='20'>
  <Badge className='u--cbox' keycolor='red'>Red</Badge>
  <Badge className='u--cbox' keycolor='orange'>Orange</Badge>
  <Badge className='u--cbox' keycolor='yellow'>Yellow</Badge>
  ...
</Flex>

アイコンを使用する例

Section titled “アイコンを使用する例”
↓
例
Badge Badge Badge 
<Flex g='30' ai='c'>
  <Badge d='if' ai='c'><Icon icon='star-fill' />Badge</Badge>
  <Badge variant='outline' d='if' ai='c' bdrs='5'><Icon icon='tag' offset='-10%' />Badge</Badge>
  <Badge className='u--cbox' keycolor='pink' d='if' ai='c' bdrs='99'><Icon icon='dot' />Badge</Badge>
</Flex>