导航栏 NavBar
qt-nav-bar
是由qt-list-view
而实现的导航栏组件。
基础用法
![](/component/navbar/nav_bar.gif)
点击查看源码
vue
<script lang="ts">
import {defineComponent, ref} from 'vue';
import {
QTINavBar,
QTNavBar,
QTNavBarItemType,
QTNavBarItem,
} from '@quicktvui/quicktvui3';
export default defineComponent({
setup() {
// ...
const navBar = ref<QTINavBar>();
let horizontalItemList: Array<QTNavBarItem> = [];
for (let i = 0; i < 10; i++) {
let tabItem: QTNavBarItem = {
type: QTNavBarItemType.QT_NAV_BAR_ITEM_TYPE_TEXT,
text: 'Tab:' + i,
titleSize: 20,
decoration: {
left: 40,
right: 20,
},
};
horizontalItemList.push(tabItem);
}
const horizontalNavBar: QTNavBar = {
data: horizontalItemList,
};
navBar.value?.init(horizontalNavBar);
//导航切换时的回调,当前选中导航的info(e)
const onTabSelect = () => void 0;
return {
onTabSelect,
};
},
});
</script>
<style lang="css" scoped>
.qt-image {
width: 260px;
height: 320px;
}
</style>
<template>
<!-- horizontal: 是否横向 :item-gap: 间距-->
<qt-nav-bar
ref="navBar"
:item-gap="10"
@tab-select="onTabSelect"
></qt-nav-bar>
</template>