Skip to main content

badge

Last updated on

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