Button按钮组件

2024-06-19 10:14:36首发，3天前更新

AX-BTN自定义组件表示一个按钮，按钮是网页最基本的一个元素，所以本按钮组件支持多种子元素，包括前缀、后缀、图标、图片等；支持多种size尺寸、多种结构风格、多种主题颜色风格。

btn系列文档

Button按钮组件 3天前更新 AX-BTN按钮组件(webcomponent)attributes详细使用方法和诸多示例 需4金币 1个月前更新

前言

有两种方式使用按钮，一是使用原生按钮，即input（type=submit/reset）和button，二是使用ax-btn自定义标签。原生按钮已经被本框架充分美化，所以我们主要探讨ax-btn的使用方法。

原生按钮

表单重常用的submit和reset按钮，以及单独的button标签均已经被美化。

输出
HTML

```
                
                
            
```

自定义按钮内容

定义按钮文本内容有两个方法：

将内容写在label属性上；
将内容写在标签内部；如果要再次修改文本则应该从label属性上进行；

输出
HTML

按钮
```
                
                
            
```

按钮宽度

按钮默认没有具体宽度，如果需要指定宽度按钮可使用以下属性。

width=1:宽度=高度的定宽按钮，无padding；
width=2:宽度=高度*2的定宽按钮，无padding；
width=3:宽度=高度*3的定宽按钮；
width=[4~10]:依次类推；
width=neat:宽度=input宽度的定宽按钮；
width=full:宽度=100%的全宽定宽按钮；

输出
HTML

默认 x4 neat full
```
                
                
            
```

按钮颜色

默认按钮为白底黑子按钮，如果需要使用彩色按钮，可使用theme属性：

theme=prim:主色
theme=error:红色
theme=succ:绿色
theme=info:蓝色
theme=issue:橙色
theme=warn:黄色
theme=text:黑色
theme=brief:中灰色
theme=ignore:浅灰色

输出
HTML

prim text
```
                
                
            
```

按钮尺寸

按钮有四种尺寸，尺寸不同则高度不同，字号和间隙也有差别，通过size属性设置尺寸。

size=xs:最小按钮，高2.2rem；较少用
size=sm:小按钮，高2.8rem；
size=md:中型按钮，高3.8rem，默认；
size=lg:大按钮，高4.8rem；

对应的，表单域也有size=sm/md/lg尺寸。

输出
HTML

xs sm md 默认 lg
```
                
                
            
```

按钮轮廓

按钮有三种轮廓，默认带有小圆角轮廓，可使用shape属性设置按钮轮廓样式：

shape=square:方形轮廓按钮
shape=round:圆形轮廓按钮
shape=radius:小圆角按钮，默认

输出
HTML

square round radius
```
                
                
            
```

按钮造型

按钮有三种造型，默认为黑子白底造型，可使用type属性设置按钮的其他造型：

type=seal:镂空线条造型；
type=plain:纯文本按钮造型，无底色也无边框，但是占位同普通按钮一样；

输出
HTML

seal plain
```
                
                
            
```

A链接

组件wrap容器的nodeName默认是SPAN标签，如果使用了href属性，那么将转为A标签，此时可同时设置target、rel和download属性，跟设置普通A标签一样。

A标签默认能focus聚焦，不需要给组件设置tabindex属性了。

输出
HTML

A标签
```
                
                
            
```

SEO

因为组件的内容是通过组件内部js重新组装属性值而来，所以可能存在对SEO的不友好性，所以本组件支持一种SEO写法，即将a标签以及a标签的href、target、rel和download属性写在组件标签内。

输出
HTML

可聚焦

按钮默认不能成为focus焦点，Tab按键也无法聚焦，如果需要focus状态可追加tab属性，tab为0或1均可。

如果有href值，wrap自动转为A标签，那么便不需要使用tab属性了，A标签自身有focus状态。

输出
HTML

可聚焦，Tab无效可聚焦，Tab有效可聚焦1，Tab有效可聚焦2，Tab有效
```
                
                
            
```

Attributes属性

名称	可选值	默认值	说明
type	'seal'/'plain'/'solid'	'solid'	按钮类型，默认普通实心按钮
theme	'prim'/'error'/'succ'/'info'/'warn'/'issue'/'text'/'breif'/'ignore'	undefined	按钮的颜色主体，默认没有颜色
label	''	''	按钮的文本
href	''/undefined	undefined	跳转链接，如果启用，相当于A链接
target	同A标签的target属性	'_blank'	跳转方式，有href属性才有效
rel	同A标签的rel属性	undefined	按钮关联内容，有href属性才有效
download	同A标签的download属性	undefined	按钮下载文件的名称，有href属性才有效
tab	'0'/'1'/undefined	undefined	tabindex值（有:focus状态），如果有href值（是a链接）便不需要设置tab，
size	'xs'/'sm'/'md'/'lg'	'md'	按钮的整体尺寸，xs=1.8rem，sm=2.2rem，md=3.8rem，lg=4.8rem ,默认md尺寸
width	'1'/'2'/'3'~'10'/'neat'/'full'/undefined	undefined	按钮的宽度，x3表示width=height*3，x1和x2没有padding，neat表示与input宽度相同，full表示100%宽度
shape	radius/square/round	'radius'	按钮的外围轮廓形状，默认为小圆角边框
check	'ing'/'ed'/undefined	undefined	按钮加载或检测状态，ing表示正在进行，ed表示完成
icon	图标的class/undefined	undefined	按钮的前置图标class样式类
tail	图标的class/undefined	undefined	按钮的后置图标class样式类
mean	'update'/'remove'/'expand'/'more'/undefined	undefined	按钮的意指，将在按钮尾部自动添加意指图标
disk	''/undefined	undefined	圆形图片地址
cube	''/undefined	undefined	方形图片地址
image	''/undefined	undefined	普通图片地址
badge	''/undefined	undefined	信息数量提示
tips	''/ undefined	undefined	按钮提示（tooltip实例）
disabled	''/undefined	undefined	是否禁用按钮
shaded	''/undefined	undefined	是否使用按钮阴影
grad	''/undefined	undefined	是否使用渐变按钮

Methods方法

有组件通用的内置方法：

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

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

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

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