Nhảy tới nội dung

badge

Hiển thị red dot, số hoặc kí tự, dùng để nhắc nhở cho user khi có update, hoặc hiển thị thông báo.

Cảnh báo

Component đang được cập nhật. Vẫn chưa sẵn sàng để sử dụng.

Quét mã để trải nghiệm​

Xem code mẫu trên Tini Studio

Demo​

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính​

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
textstring''Nội dung bên trong badge.
dotbooleanfalseHiển thị badge như là dot. (require: dot=true)
overflowCountnumber99khi giá trị text là kiểu số và lớn hơn overflowCount, thì sẽ hiển thị ..., ngược lại hiển thị giá trị text
withArrowbooleanfalsehiển thị arrow cho badge
direction'left','middle','right'''điều hướng arrow (left,middle,right)
strokebooleanfalsehiển thị stroke cho badge

Sử dụng​

Khai báo components:

{
  "defaultTitle": "Badge",
  "usingComponents": {
    "avatar": "@tiki.vn/tini-ui/es/badge/index"
  }
}

Sample Code:​

Slot​

Sử dụng slot="inner" để hiển thị dot bên trong một component (isWrap=true) index.txml

<view class="component-item">
    <badge text="" dot="true" isWrap="true">
        <view slot="inner" style="height: 24px; width: 24px; background-color: #ddd;"></view>
    </badge>
    <text style="margin-left: 12px">Dot only</text>

    <badge text="10" dot="true">
        <view slot="inner" style="height: 24px; width: 24px; background-color: #ddd;"></view>
    </badge>
    <text style="margin-left: 12px">Badge with text</text>
</view>

index.tcss
.component-item {
  display: flex;
  flex-direction: row;
  padding: 12px;
}

Result:

Badge

Component​

Implement với những component khác.(isWrap=false)

index.txml

<view">
    <view class="component-item between">
        <text>{{item.intro}}</text>
        <badge
            isWrap="false"
            text="{{item.text}}"
            dot="{{item.dot}}"
            overflowCount="{{item.overflowCount}}"
            withArrow="{{item.withArrow}}"
            direction="{{item.direction}}" />
    </view>
</view>

index.tcss

Result

Badge

Stroke​

Sử dụng store để làm đậm viền của badge component. index.txml

<view">
    <text class="title mb-8">3. Stroke</text>
    <text class="heading">Use as a wrapper, it is used to render the internal area</text>
    <view style="
             display: flex;
             flex-direction:row;
             justify-content: space-between;
             padding: 10px;
             background-color: #333;
             color: #f8f8f8;">
        <text style="color:white">Badge component with stroke</text>
        <badge text="Miniapp demo" stroke="{{true}}" withArrow="{{true}}" direction="left" />
    </view>
</view>

Result

Badge

index.js

Page({
  data: {
    items: [
      {
        dot: false,
        text: 99,
        isWrap: false,
        intro: 'Dot only'
      },
      {
        dot: false,
        text: 100,
        overflowCount: 99,
        isWrap: false,
        intro: 'overflowCount'
      },
      {
        dot: false,
        text: 'new',
        isWrap: false,
        intro: 'with arrow'
      },
      {
        dot: false,
        text: '22222222222222',
        isWrap: false,
        intro: 'with text',
        withArrow: true,
        direction: 'middle'
      },
      {
        dot: false,
        text: 'left arrow',
        isWrap: false,
        intro: 'Left item',
        withArrow: true,
        direction: 'left'
      },
      {
        dot: false,
        text: 'right arrow',
        isWrap: false,
        intro: 'Righ arrow',
        withArrow: true,
        direction: 'right'
      }
    ]
  }
});
Badge