分割线类 divider

# 分割线类 divider

# 默认样式

要使用分割线类，需要先引入。

@import "~@modyqyw/mp-scss";
// @import "~@modyqyw/mp-scss/components";
// @import "~@modyqyw/mp-scss/components/divider";

1
2
3

在想要分割内容的地方可以使用 .divider。

<view class="container">
  <view>Lorem</view>
  <view class="divider"></view>
  <view>Lorem</view>
</view>

1
2
3
4
5

# 垂直方向

使用 .is-vertical 就可以让 .divider 垂直放置。

<view class="row">
  <view>Lorem</view>
  <view class="divider is-vertical"></view>
  <view>Lorem</view>
</view>

1
2
3
4
5

# 明亮模式和暗黑模式

默认使用明亮模式。手动开启暗黑模式并在 .container 上使用 .is-dark，就能指定使用暗黑模式。

<view class="container">
  <view>Lorem</view>
  <view class="divider"></view>
  <view>Lorem</view>
</view>
<view class="container is-dark">
  <view>Lorem</view>
  <view class="divider"></view>
  <view>Lorem</view>
</view>

1
2
3
4
5
6
7
8
9
10

# 使用文字或图标

要使用带文字的水平分割线较为复杂。

<view class="container">
  <view>Lorem</view>
  <view class="divider-wrapper w-full">
    <view class="divider"></view>
    <view class="divider-content">text</view>
    <view class="divider"></view>
  </view>
  <view>Lorem</view>
</view>

1
2
3
4
5
6
7
8
9

如果要让文字靠左，可以使用 .is-left。对应地，使用 .is-right 可以让文字靠右。

<view class="container">
  <view>Lorem</view>
  <view class="divider-wrapper w-full is-left">
    <view class="divider"></view>
    <view class="divider-content">text</view>
    <view class="divider"></view>
  </view>
  <view>Lorem</view>
</view>