up-tabs加图标
时间: 2024-08-14 14:07:21 浏览: 35
up-tabs是一个基于Vue.js的轻量级、高度定制化的tabs组件库,它允许开发者轻松创建带标签页的导航栏,并可以方便地添加图标。在up-tabs中,你可以为每个tab标签关联一个图标,这通常通过`icon`属性来设置,例如:
```html
<template>
<up-tabs v-model="activeIndex">
<up-tab label="Tab 1" icon="fas fa-home"></up-tab>
<up-tab label="Tab 2" icon="fas fa-file-code-o"></up-tab>
<up-tab label="Tab 3" icon="fas fa-cog"></up-tab>
</up-tabs>
</template>
<script>
import { UpTabs, UpTab } from 'up-tabs';
export default {
components: {
UpTabs,
UpTab
},
data() {
return {
activeIndex: 0 // 初始激活的tab索引
};
}
};
</script>
<!-- 你需要安装Font Awesome库来提供 fas 类名对应的图标 -->
<style>
@import '@fortawesome/fontawesome-free/css/all.css';
</style>
```
在这个例子中,每个`<up-tab>`都有一个对应的图标,如`fas fa-home`代表家庭图标。`v-model`用于控制当前选中的tab。为了使用这些图标,确保已经在项目中引入了Font Awesome库。