支付寶小程序引導(dǎo)組件 徽標(biāo)·Badge

紅點(diǎn)、數(shù)字或文字。用于告訴用戶待處理的事物或者更新數(shù)。

掃碼體驗(yàn)

示例代碼

{
 "defaultTitle": "Badge",
 "usingComponents": {
   "list-item": "mini-ali-ui/es/list/list-item/index",
   "badge": "mini-ali-ui/es/badge/index"
 }
}

<view>
  <block a:for="{{items}}">
    <view class="list-like" 
      index="{{index}}" 
      key="items-{{index}}">
      <view>
        <badge a:if="{{item.isWrap}}" 
          text="{{item.text}}" 
          dot="{{item.dot}}">
          <view slot="inner" 
            style="height: 24px; width: 24px; background-color: #ddd;"></view>
        </badge>
        <text style="margin-left: {{ item.isWrap ? '12px' : '0' }}">{{item.intro}}</text>
      </view>
      <view >
        <badge a:if="{{!item.isWrap}}" 
          text="{{item.text}}" 
          dot="{{item.dot}}" 
          overflowCount="{{item.overflowCount}}" 
          withArrow="{{item.withArrow}}" 
          direction="{{item.direction}}" />
      </view>
    </view>
  </block>
</view>
<view style="
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #333;
  color: #f8f8f8;">
    深色底時(shí)，stroke 可設(shè)為 true
    <badge 
      slot="extra"
      text="深色底時(shí)加描邊"
      stroke="{{true}}" 
      withArrow="{{true}}" 
      direction="left" />
</view>
Page({
  data: {
    items: [
      {
        dot: true,
        text: '',
        isWrap: true,
        intro: 'Dot Badge',
      },
      {
        dot: false,
        text: 1,
        isWrap: true,
        intro: 'Text Badge',
      },
      {
        dot: false,
        text: 99,
        isWrap: false,
        intro: '數(shù)字',
      },
      {
        dot: false,
        text: 100,
        overflowCount: 99,
        isWrap: false,
        intro: '數(shù)字超過(guò)overflowCount',
      },
      {
        dot: false,
        text: 'new',
        isWrap: false,
        intro: '文字',
      },
      {
        dot: false,
        text: '22222222222222',
        isWrap: false,
        intro: '箭頭中',
        withArrow: true,
        direction: 'middle',
      },
      {
        dot: false,
        text: 'left arrow',
        isWrap: false,
        intro: '箭頭左',
        withArrow: true,
        direction: 'left',
      },
      {
        dot: false,
        text: 'right arrow',
        isWrap: false,
        intro: '箭頭右',
        withArrow: true,
        direction: 'right',
      },
    ],
  },
});
.list-like {
  display: flex;
  background: #fff;
  padding: 12px;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

屬性

slots