插件名称 | vue-nav-ui |
---|---|
发布时间 | 2021年4月2日 |
插件作者 | dhanielcodes |
Vue.js 3的动态,响应式,移动优先的应用导航UI组件。
# NPM
$ npm i vue-nav-ui
1.导入并注册导航组件。
import Nav from "vue-nav-ui";
export default {
components: {
Nav
}
}
2.将导航组件添加到应用程序中,并插入您的站点徽标,如下所示:
<Nav :navLinks="navLinks" :navConfig="navConfig" :btnConfig="btnConfig">
<img class="img" src="logo" alt="" srcset="" />
</Nav>
3.定义您的导航项。
export default {
components: {
Nav,
},
setup() {
const navLinks = ref([
{
name: "Home",
path: "/",
},
{
name: "Category",
path: "/category",
},
{
name: "Works",
path: "/works",
},
{
name: "About",
path: "/about",
},
{
name: "Contact",
path: "/contact",
},
]);
const navConfig = ref({
// nav configs here
});
const btnConfig = ref({
// button configs here
});
return { navLinks, btnConfig, navConfig };
},
};
4.可能的配置以自定义导航和导航按钮。
const navConfig = ref({
whitespace: true,
navBg: "#FAFAFA",
navBorderRadius: "30px",
linkFont: "Arial",
linkColor: "black",
responsivePosition: "top", // or "bottom"
});
const btnConfig = ref({
btnLink: true,
btnUrl: "https://www.vue365.cn/",
btnText: "View",
btnBg: "#40269E",
btnTextColor: "white",
btnBorderWidth: "0",
btnBorderColor: "black",
btnBorderRadius: "20px",
});
官网:https://github.com/dhanielcodes/vue-nav-ui
演示:https://www.vue365.cn/code_demo.php?id=4424
GitHub下载:https://github.com/dhanielcodes/vue-nav-ui/archive/refs/heads/master.zip