バッジ

バッジについての概要と使い方の例です。

Examples

親要素のサイズに一致するように相対的なフォントサイズ em を使用しています。

Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
vue
<template>
 <h1>
  Example heading
  <Badge color="secondary">
   New
  </Badge>
 </h1>
 <h2>
  Example heading
  <Badge color="secondary">
   New
  </Badge>
 </h2>
 <h3>
  Example heading
  <Badge color="secondary">
   New
  </Badge>
 </h3>
 <h4>
  Example heading
  <Badge color="secondary">
   New
  </Badge>
 </h4>
 <h5>
  Example heading
  <Badge color="secondary">
   New
  </Badge>
 </h5>
 <h6>
  Example heading
  <Badge color="secondary">
   New
  </Badge>
 </h6>
</template>

Buttons

バッジは、リンクやボタンの一部としてカウンターとして使用することができます。

vue
<template>
 <b-button color="primary">
  Notifications
  <Badge color="secondary">
   4
  </Badge>
 </b-button>
</template>

Positioned

ユーティリティを使ってBadgeを修正し、リンクやボタンの隅に配置します。

vue
<template>
 <b-button
  color="primary"
  position="relative"
 >
  Inbox
  <Badge
   position="absolute"
   top="0"
   start="100"
   translate="middle"
   rounded="pill"
   color="danger"
   label="unread messages"
  >
   99+
  </Badge>
 </b-button>
</template>

また、Badgeコンポーネントをカウントのないユーティリティに置き換えることで、より汎用的なインジケータにすることができます。

vue
<template>
 <b-button
  color="primary"
  position="relative"
 >
  Profile
  <Badge
   position="absolute"
   top="0"
   start="100"
   translate="middle"
   color="danger"
   label="New alerts"
   border-color="light"
   rounded="circle"
   padding="2"
  />
 </b-button>
</template>

Background colors

バックグラウンドユーティリティクラスを使用して、バッジの外観を変更できます。

Bootstrapのデフォルトの background-color="light" を使用する場合、適切なスタイリングのために text-color="dark"のようなテキストカラーを変更するユーティリティが必要になる可能性があることに注意してください。

バックグラウンドユーティリティクラスは、背景色以外は設定をしません。

Primary Secondary Success Danger Warning Info Light Dark
vue
<template>
 <Badge color="primary">
  Primary
 </Badge>
 <Badge color="secondary">
  Secondary
 </Badge>
 <Badge color="success">
  Success
 </Badge>
 <Badge color="danger">
  Danger
 </Badge>
 <Badge color="warning">
  Warning
 </Badge>
 <Badge color="info">
  Info
 </Badge>
 <Badge color="light">
  Light
 </Badge>
 <Badge color="dark">
  Dark
 </Badge>
</template>

Pill badges

rounded="pill" を使用すると丸みを帯びた形状にすることができます。

Primary Secondary Success Danger Warning Info Light Dark
vue
<template>
 <Badge
  color="primary"
  rounded="pill"
 >
  Primary
 </Badge>
 <Badge
  color="secondary"
  rounded="pill"
 >
  Secondary
 </Badge>
 <Badge
  color="success"
  rounded="pill"
 >
  Success
 </Badge>
 <Badge
  color="danger"
  rounded="pill"
 >
  Danger
 </Badge>
 <Badge
  color="warning"
  rounded="pill"
 >
  Warning
 </Badge>
 <Badge
  color="info"
  rounded="pill"
 >
  Info
 </Badge>
 <Badge
  color="light"
  rounded="pill"
 >
  Light
 </Badge>
 <Badge
  color="dark"
  rounded="pill"
 >
  Dark
 </Badge>
</template>

Extend

Subtle theme colors

primary-subtlesecondary-subtlesuccess-subtledanger-subtlewarning-subtleinfo-subtlelight-subtledark-subtle

All colors

blueblue-100blue-200blue-300blue-400blue-500blue-600blue-700blue-800blue-900
indigoindigo-100indigo-200indigo-300indigo-400indigo-500indigo-600indigo-700indigo-800indigo-900
purplepurple-100purple-200purple-300purple-400purple-500purple-600purple-700purple-800purple-900
pinkpink-100pink-200pink-300pink-400pink-500pink-600pink-700pink-800pink-900
redred-100red-200red-300red-400red-500red-600red-700red-800red-900
orangeorange-100orange-200orange-300orange-400orange-500orange-600orange-700orange-800orange-900
yellowyellow-100yellow-200yellow-300yellow-400yellow-500yellow-600yellow-700yellow-800yellow-900
greengreen-100green-200green-300green-400green-500green-600green-700green-800green-900
tealteal-100teal-200teal-300teal-400teal-500teal-600teal-700teal-800teal-900
cyancyan-100cyan-200cyan-300cyan-400cyan-500cyan-600cyan-700cyan-800cyan-900

See Also