Divider分隔线组件

divider分隔线组件有hr标签和ax-line组件相似的效果,即都可以创建一条水平分隔线;我们将divider分隔线定义得更纯粹,他仅仅是分隔上下文,他是上下文的一部分,他的label文本字号和上下文间距都继承自父层。

简单使用

内容中插入ax-divider标签即可表示一条水平直线。效果同标签<hr><ax-line></ax-line>

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

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

  •                 
                    
                

使用label

如果需要给水平线插入文本,可使用label属性或者将文本直接写在标签内。divider标签内的文本与上下文同属正文部分,字号大小继承自父元素。

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

    分隔线

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

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

    分隔线

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

  •                 
                    
                

Attributes属性

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

名称 可选值 默认值 说明
label ''/-- '' 文本
break 'xxs'/'xs'/'sm'/'md'/'lg'/'xl'/'xxl'/ 'sm' 上下的间距
fs ''/- '' 文本的字号
size 'sm'/'md'/'lg' 'sm' label的字号

Methods方法

有组件通用的内置方法:

  • set:设置组件属性,支持一个参数即被设置的属性值键值对{key,value}或其数组
  • reset:重置组件属性,无参数
  • clear:清除属性和值,无参数

基本用法:CompElem.reset();

Events事件

有组件通用的事件:

  • connected:组件连接成功,无参数
  • disconnected:组件断开连接,无参数
  • adopted:组件被转移,无参数
  • set:设置了属性,支持一个参数即设置的值
  • cleared:清除了属性,无参数
  • reset:重置了属性,无参数

基本用法:CompElem.on('connected',()=>{console.log('connected')});