美文网首页计算机@linux_python_R 技术帖学习前端
Element UI 的图标、按钮、文字链接

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

作者: 辽A丶孙悟空 | 来源:发表于2019-12-25 18:35 被阅读0次
    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


    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/sqfcoctx.html