Button按钮

2024-06-19 10:14:36首发，2个月前更新

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

前言

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

原生按钮

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

Attributes属性

ax-btn为自定义标签，其包含的属性如下：

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

自定义按钮内容

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

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

按钮宽度

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

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

按钮颜色

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

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

按钮尺寸

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

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

按钮轮廓

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

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

按钮造型

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

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

A链接

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

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

SEO

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

可聚焦

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

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