链接状态的按钮 html,Element-UI之组件按钮与链接

element中按钮比较丰富

Button 按钮

基础用法

使用type、plain、round和circle属性来定义 Button 的样式

默认按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

主要按钮

主要按钮

链接状态的按钮 html,Element-UI之组件按钮与链接_第1张图片

你可以使用disabled属性来定义按钮是否可用,它接受一个Boolean值。

链接状态的按钮 html,Element-UI之组件按钮与链接_第2张图片

链接状态的按钮 html,Element-UI之组件按钮与链接_第3张图片

注意: 给元素绑定disabled属性可以控制禁用或非禁用(true为禁用,false为非禁用)

链接状态的按钮 html,Element-UI之组件按钮与链接_第4张图片

图标按钮

efc7899111ce4ac9584b77c6a377c769.png

设置icon属性即可,icon 的列表可以参考 Element 的 icon 组件,也可以设置在文字右边的 icon ,只要使用i标签即可,可以使用自定义图标。

按钮组

0d7911eb17c203353989e5cd5591c587.png

使用< el-button-group >标签来嵌套你的按钮。

上一页

下一页

加载中按钮

d24afa44b04514d41daea7f357e2f001.png

要设置为 loading 状态,只要设置loading属性为true即可。

加载中

设成false后不再旋转,图标消失

Link 文字链接

基础用法

4086c83280ccd8732235546bce142b8c.png

默认链接

主要链接

成功链接

警告链接

危险链接

信息链接

禁用状态

929208c9ca01a0a4e68c9d39b17a66ec.png

链接状态的按钮 html,Element-UI之组件按钮与链接_第5张图片

下划线

2dc6a7b669b73721961b3ac918bd67a9.png

图标

9fbed97f2d99fc8d209dbccbe649c648.png

链接状态的按钮 html,Element-UI之组件按钮与链接_第6张图片

标签:属性,禁用,Element,UI,按钮,icon,链接,图标

来源: https://blog.csdn.net/crazyFengGan/article/details/94445390

你可能感兴趣的:(链接状态的按钮,html)