彩票走势图

UI组件库Kendo UI for Vue原生组件中文教程:如何使用图标按钮?

翻译|使用教程|编辑:龚雪|2022-08-17 10:42:46.057|阅读 195 次

概述:本文主要为大家介绍如何开始使用Kendo UI for Vue的图标按钮组件,欢迎下载最新版控件体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。

您可以通过向其添加图像、预定义或自定义图标来增强 Button 的文本内容。

从 Web 标准的角度来看,最好使用背景图像,因为图标用于装饰而不是表示结构内容。

Kendo UI最新官方正式版下载

Button提供以下选项:

  • 使用内置的Kendo UI for Vue图标,内置图标通过icon 属性应用并显示为 Button 的背景。
  • 添加image图标,它们通过组件的属性应用。
  • 添加 FontAwesome 和其他字体图标,它们是通过属性设置所需的第三方 CSS 类来实现的。

下面的示例演示如何在 Button 中使用不同类型的图标。

UI组件库Kendo UI for Vue原生组件中文教程:如何使用禁用按钮?

main.vue

<template>
<div>
<kbutton :icon="'refresh'">Kendo UI for Vue font icon</kbutton>
<kbutton :image-url="'//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Image icon</kbutton>
<kbutton :icon-class="'fa fa-key fa-fw'">FontAwsome icon</kbutton>
</div>
</template>
<script>
import { Button } from '@progress/kendo-vue-buttons';

export default {
components: {
'kbutton': Button
}
}
</script>
<style>
.k-button + .k-button {
margin-left: 5px
}
</style>

main.js

import { createApp } from 'vue'
import App from './main.vue'

createApp(App).mount('#app')


Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

慧都315活动正式开启

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP