徽标类 badge
# 徽标类 badge
# 默认样式
要使用徽标类，需要先引入。
@import "~@modyqyw/mp-scss";
// @import "~@modyqyw/mp-scss/components";
// @import "~@modyqyw/mp-scss/components/badge";
1
2
3
2
3
使用一个父元素作为容器，在其中使用 .badge，默认会显示在右上角。
<view class="btn">
button
<view class="badge"></view>
</view>
1
2
3
4
2
3
4
# 主题
默认有 default，primary，success，warning，error，info，white 几个主题。
<!-- default 主题 -->
<view class="btn">
button
<view class="badge"></view>
</view>
<!-- primary 主题 -->
<view class="btn">
button
<view class="badge is-primary"></view>
</view>
<!-- success 主题 -->
<view class="btn">
button
<view class="badge is-success"></view>
</view>
<!-- warning 主题 -->
<view class="btn">
button
<view class="badge is-warning"></view>
</view>
<!-- error 主题 -->
<view class="btn">
button
<view class="badge is-error"></view>
</view>
<!-- info 主题 -->
<view class="btn">
button
<view class="badge is-info"></view>
</view>
<!-- white 主题 -->
<view class="btn">
button
<view class="badge is-white"></view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 明亮模式和暗黑模式
默认使用明亮模式。手动开启暗黑模式 并在 .container 上使用 .is-dark，就能指定使用暗黑模式。
<view class="container">
<view class="btn">
button
<view class="badge"></view>
</view>
</view>
<view class="container is-dark">
<view class="btn">
button
<view class="badge"></view>
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 尺寸
使用 .is-sm 可以使用更小的 .badge。可以结合不同主题、不同模式使用。
<view class="btn">
button
<view class="badge is-sm"></view>
</view>
1
2
3
4
2
3
4
# 圆点形式
使用 .is-dot 可以使用圆点形式的 .badge。可以结合不同主题、不同模式使用。
<view class="btn">
button
<view class="badge is-dot"></view>
</view>
1
2
3
4
2
3
4
# 位置
使用 .is-bottom 可以让 .badge 出现在容器的右下角，使用 .is-left 可以让 .badge 出现在左上角，组合使用 .is-bottom 和 .is-left 可以让 .badge 出现在左下角。
<view class="btn">
button
<view class="badge is-bottom"></view>
</view>
<view class="btn">
button
<view class="badge is-left"></view>
</view>
<view class="btn">
button
<view class="badge is-left is-bottom"></view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 变量
| 变量名 | 默认值 |
|---|---|
$badge--padding-y-base | 0 |
$badge--padding-y-base--sm | 0 |
$badge--padding-y-base--dot | 0 |
$badge--padding-x-base | 6 |
$badge--padding-x-base--sm | 0 |
$badge--padding-x-base--dot | 0 |
$badge--font-size-base | $font-size-base - $font-size-diff |
$badge--font-size-base--sm | $font-size-base - $font-size-diff |
$badge--line-height | $line-height-default |
$badge--line-height--sm | $line-height-default - $line-height-diff |
$badge--height-base | $badge--padding-y-base * 2 + $badge--font-size-base * $badge--line-height |
$badge--height-base--sm | $badge--padding-y-base--sm * 2 + $badge--font-size-base--sm * $badge--line-height--sm |
$badge--height-base--dot | 6 |