Badge

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

↓

Preview

Badge Badge Badge

Only Core

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

↓

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:25%' fz='xs' lh='xs' py='5' px='10' bdrs='99'>Badge</Lism>
</Cluster>

<div class="l--cluster -g:15">
  <span class="-py:5 -px:15 -lh:s -fz:s -bgc:text -c:base -bdrs:10">Badge</span>
  <span class="-py:5 -px:15 -lh:s -fz:s -bd -bdrs:10">Badge</span>
  <span class="u-cbox -bd -py:5 -px:15 -lh:s -fz:s -bdrs:99" style="--keycolor:var(--blue);--bdc:color-mix(in srgb, var(--keycolor) 25%, var(--base))">Badge</span>
</div>

Create Component

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

Source Code

ソースコードを手動でコピー&ペーストしてご利用ください。

Import

import { Badge } from '@lism-css/ui/react';

Usage

↓

<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>

<div class='l--cluster -g:15'>
  <span class='c--badge -fz:xs -lh:xd -py:5 -px:10 -bdrs:10'>Badge</span>
  <span class='c--badge -fz:xs -lh:xd -py:5 -px:10 -bdrs:10' style='--bgc:var(--red)'>Badge</span>
  ...
  ...
</div>

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>