六、其它组件

六、其它组件

1、Divider分割线

区隔内容的分割线。

何时使用:<1>对不同章节的文本段落进行分割。<2>对行内文字/链接进行分割,例如表格的操作列。

  • (1)<Divider>组件对应属性: 组件里面可以加上文字,就为在分割线上面的文字
    • <1>className: 表示分割线样式类.可选值:无;默认值: -;类型:string
    • <2>dashed: 表示是否虚线.可选值:无;默认值: false;类型:boolean
    • <3>orientation: 表示分割线里面的文字的位置.可选值:无;默认值: center;类型:enum: left right
    • <4>style: 表示分割线样式对象.可选值:无;默认值: -;类型:object
    • <5>type: 表示设置分割线类型为水平的一条横线,还是垂直的一条竖直的竖线(这个的时候,分割的文字需要是行内元素).可选值:无;默认值: horizontal;类型:enum: horizontal vertical
import React, { PureComponent } from 'react';
import { Divider } from 'antd';
class demo extends PureComponent {
    render() {
      return (
        <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
          probare, quae sunt a te dicta? Refert tamen, quo modo.
        </p>
        <Divider dashed  orientation="left">gogogogogo</Divider>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
          probare, quae sunt a te dicta? Refert tamen, quo modo.
        </p>
        <a href="#">Link</a>
    <Divider type="vertical" style={
   
   {background: 'red'}}/>
    <a href="#">Link</a>
      </div>
    );
    }
  };
export default demo;

猜你喜欢

转载自blog.csdn.net/rocktanga/article/details/121329694