divider 分割线

分割线组件（Divider component）是一种用于在用户界面上创建水平或垂直分割线的UI组件。它常用于在内容之间或不同部分之间创建视觉上的分隔。

Props参数

名称	类型	是否必传	默认值	描述
size	number	否	15	分割线大小
lineWidth	number	否	1px	分割线宽度
vertical	boolean	否	-	是否是垂直线
color	string	否	'#e6e6e6'	分割线颜色
type	EDividerStyle | keyof typeof EDividerStyle	否	solid	分割线类型
style	CSSProperties	否	-

示例

import { View } from '@tarojs/components'
import { Component } from 'react'
import MMDivider from '~/components/divider'
import styles from './index.module.less'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default class Index extends Component {
  render() {
    return (
      <MMPageContainer title="分割线">
        <PageDemoBlock title="基础">
          <View>分割线组件可以设置 尺寸、颜色、以及线宽</View>
          <MMDivider size={100} color="red" />
          <View className="spacing" />
          <MMDivider size={100} lineWidth={10} color="red" />
        </PageDemoBlock>

        <PageDemoBlock title="分割线类型">
          <MMDivider size={200} color="red" type="dashed" />
          <View className="spacing" />
          <MMDivider size={200} color="red" type="dotted" />
          <View className="spacing" />
          <MMDivider size={200} color="red" type="dotted" />
        </PageDemoBlock>

        <PageDemoBlock title="垂直分割线">
          <View className={styles.verticalBox}>
            我是分割
            <View className="spacing" />
            <MMDivider size={20} vertical color="blue" />
            <View className="spacing" />
            <MMDivider size={50} vertical color="blue" />
            <View className="spacing" />
            <MMDivider size={100} vertical color="blue" />
            <View className="spacing" />线
          </View>
        </PageDemoBlock>
      </MMPageContainer>
    )
  }
}