卡片类 card
# 卡片类 card
在实际使用中，卡片类的局限性较大，建议改用栅格系统实现 .card。在 v3 版本，卡片类将会被移除。
# 默认样式
要使用卡片类，需要先引入。
@import "~@modyqyw/mp-scss";
// @import "~@modyqyw/mp-scss/components";
// @import "~@modyqyw/mp-scss/components/card";
1
2
3
2
3
在 view 上使用 .card。
<view class="container">
<view class="card"></view>
</view>
1
2
3
2
3
然后使用 .card-header 作为卡片头，使用 .card-content 作为卡片主要内容，使用 .card-footer 作为卡片尾。
<view class="container">
<view class="card">
<view class="card-header">header</view>
<view class="card-content">content</view>
<view class="card-footer">footer</view>
</view>
</view>
1
2
3
4
5
6
7
2
3
4
5
6
7
要添加分割线，可以使用 .border 相关的类。
<view class="container">
<view class="card">
<view class="card-header">header</view>
<view class="card-content border-y">content</view>
<view class="card-footer">footer</view>
</view>
</view>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 明亮模式和暗黑模式
默认使用明亮模式。手动开启暗黑模式 并在 .container 上使用 .is-dark，就能指定使用暗黑模式。
<view class="container">
<view class="card"></view>
</view>
<view class="container is-dark">
<view class="card"></view>
</view>
1
2
3
4
5
6
2
3
4
5
6
# 用栅格系统模拟卡片类
<view class="container">
<view class="row flex-wrap border rounded">
<view class="row text-bold p-md">header</view>
<view class="row p-md">content</view>
<view class="row p-md">footer</view>
</view>
</view>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 变量
| 变量名 | 默认值 |
|---|---|
$card-header--padding-y-base | 16 |
$card-header--padding-y-base--sm | 8 |
$card-content--padding-y-base | 16 |
$card-content--padding-y-base--sm | 8 |
$card-footer--padding-y-base | 16 |
$card-footer--padding-y-base--sm | 8 |
$card-header--padding-x-base | 16 |
$card-header--padding-x-base--sm | 8 |
$card-content--padding-x-base | 16 |
$card-content--padding-x-base--sm | 8 |
$card-footer--padding-x-base | 16 |
$card-footer--padding-x-base--sm | 8 |
$card--font-size-base | $font-size-base |
$card--font-size-base--sm | $font-size-base |
$card--line-height | $line-height-default |
$card--line-height--sm | $line-height-default |
$card--border-width-base | 1 |