计算机@linux_python_R 技术帖学习前端

Element UI 的图标、按钮、文字链接

2019-12-25  本文已影响0人  辽A丶孙悟空
Icon 图标

提供了一套常用的图标集合。

  • 使用方法
    直接通过设置类名为 el-icon-iconName 来使用即可。例如:搜索



  • 图标集合













Button 按钮

常用的操作按钮。

  • 基础用法
    基础的按钮用法。
    使用type、plain、round和circle属性来定义 Button 的样式。



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



  • 文字按钮
    没有边框和背景色的按钮。


  • 图标按钮
    带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
    设置icon属性即可,icon 的列表可以参考 Element 的 icon 组件,也可以设置在文字右边的 icon ,只要使用i标签即可,可以使用自定义图标。



  • 按钮组
    以按钮组的方式出现,常用于多项类似操作。
    使用<el-button-group>标签来嵌套你的按钮。



  • 加载中
    点击按钮后进行数据加载操作,在按钮上显示加载状态。
    要设置为 loading 状态,只要设置loading属性为true即可。



  • 不同尺寸
    Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
    额外的尺寸:medium、small、mini,通过设置size属性来配置它们。



  • Attributes


Link 文字链接

文字超链接

  • 基础用法
    基础的文字链接用法。



  • 禁用状态
    文字链接不可用状态



  • 下划线
    文字链接下划线



  • 图标
    带图标的文字链接可增强辨识度。



  • Attributes


上一篇 下一篇

猜你喜欢

热点阅读