Line分割线

line组件是展示一条分割线以区分上下文,默认与hr标签效果一致;line组件除了展示一条水平分割线,还可以展示垂直分割线,而且可以在线中间使用说明文字。

前言

原生标签hr只提供水平分割线,有时候列与列之间也需要使用分割线;另外在上下文分隔中可能需要添加若干备注文字,如此需求自定义分割线标签是很有必要的。

HR标签

本框架已经对hr标签进行了美化处理,所呈现的效果为1px的水平分割线。

  • 输出
  • HTML
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。


    20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  •                 
                    
                

分割线标签

ax-line标签是本框架自定义的分割线标签,默认效果与hr一致。

  • 输出
  • HTML
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。

    20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  •                 
                    
                

垂直分割线

分割线默认是水平的,如果需要垂直布局需要追加v属性(vertical)。如果父层没有定义高度,那么垂直分割线高度不能自动延伸,所以可能需要配合style属性使用,明确分割线高度。

  • 输出
  • HTML
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。

    20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

    中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。

    20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  •                 
                    
                

使用标题

给分割线添加标题的方式有两种:

  • 使用label属性;
  • 将标题写在标签中间;
  • 输出
  • HTML
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。

    分割线

    20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

    中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。

  •                 
                    
                

Attributes属性

ax-line为自定义标签,其包含的属性如下:

名称 可选值 默认值 说明
type solid/dashed/slash 'solid' 分割线类型,默认普通实实线(solid),可选择dashed(虚线)和slash(斜线)
theme prim/error/succ/info/warn/issue/text - 分割线的颜色主题,默认为灰色
label '' - 分割线的文本
align center/start/end 'center' 分割线文本所在位置,默认是center居中,可选择start头部或end尾部
size sm/md/lg - 分割线的高度,sm=2px,md=4px,lg=8px ,默认1px
break xxs/xs/sm/md/lg/xl/xxl - 分割线的上下文间隙:xxs->4px;xs->8px;sm->14px;md->22px;lg->28px;xl->38px;xxl->44px
v '' - 是否为垂直分割线