Fxiaoke Developer Manual
Table of Contents

Badge

# FxBadge

A numeric or status marker that appears next to buttons or icons.

# Attributes

Parameter Description Type Optional Values Default
value Display value string, number — —
max Maximum value, shows '{max}+' when exceeded (requires value to be Number type) number — —
is-dot Display as dot boolean — false
hidden Hide badge boolean — false
type Type string primary / success / warning / danger / info —

# Basic Usage

Display new message count.

Comments Replies Comments Replies Click me Comments Replies

Set the value property which accepts Number or String.

<fx-badge :value="12" class="item">
  <fx-button size="small">Comments</fx-button>
</fx-badge>
<fx-badge :value="3" class="item">
  <fx-button size="small">Replies</fx-button>
</fx-badge>
<fx-badge :value="1" class="item" type="primary">
  <fx-button size="small">Comments</fx-button>
</fx-badge>
<fx-badge :value="2" class="item" type="warning">
  <fx-button size="small">Replies</fx-button>
</fx-badge>

<fx-dropdown trigger="click">
  <span class="fx-dropdown-link">
    Click me<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item class="clearfix">
      Comments
      <fx-badge class="mark" :value="12" />
    </fx-dropdown-item>
    <fx-dropdown-item class="clearfix">
      Replies
      <fx-badge class="mark" :value="3" />
    </fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
Expand Copy

# Maximum Value

Customizable maximum value.

Comments Replies

Defined by max property which accepts a Number. Note it only works when value is Number type.

<fx-badge :value="200" :max="99" class="item">
  <fx-button size="small">Comments</fx-button>
</fx-badge>
<fx-badge :value="100" :max="10" class="item">
  <fx-button size="small">Replies</fx-button>
</fx-badge>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
Expand Copy

# Custom Content

Can display text other than numbers.

Comments Replies

When value is set to String type, it can display custom text.

<fx-badge value="new" class="item">
  <fx-button size="small">Comments</fx-button>
</fx-badge>
<fx-badge value="hot" class="item">
  <fx-button size="small">Replies</fx-button>
</fx-badge>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
Expand Copy

# Red Dot

Mark content that needs attention with a red dot.

Data Query

Besides numbers, set is-dot property which accepts a Boolean.

<fx-badge is-dot class="item">Data Query</fx-badge>
<fx-badge is-dot class="item">
  <fx-button
    class="share-button"
    icon="el-icon-share"
    type="primary"
  ></fx-button>
</fx-badge>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
Expand Copy
Pagination
Alert

← Alert→