如何将选项卡与其文本相匹配？
如何将选项卡与其文本相匹配？
提问于 2021-12-07 16:04:02
我使用类星体框架，并且很难将q-tab大小调整到它的标签名。我有3个标签，正如你在下面看到的，它们的大小比标签大得多：
我试图将shrink、dense或narrow-indicator都添加到q-tabs和q-tab中，但这并没有改变任何事情。我看了官方文件，不知道有什么问题：
<template>
<q-layout view="hHh lpr fFf" >
<q-header>
<q-toolbar>
<q-img
src="~assets/logo.png"
fit="cover"
width="120px"/>
<q-space />
<q-tabs
class="text-indigo-13 text-weight-regular">
<q-route-tab
v-for="tab in tab_links"
:key="tab.name"
:to="tab.route">
{{ tab.name }}
</q-route-tab>
</q-tabs>
</q-toolbar>
</q-header>
</q-layout>
</template>
<script>
export default {
name: 'Navbar',
data() {
return {
tab_links: [
{ name: 'Project', route: '/' },
{ name: 'Analysis', route: '/analysis' },
{ name: 'Settings', route: '/settings' }
]
}
},
}
</script>
<style scoped>
.q-tabs {
font-size: 9px;
}
</style>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-05 19:30:54
我没有设法使q-route-tab适应内部文本，但是我可以使用CSS轻松地调整它的大小。
<q-route-tab
v-for="tab in tab_links"
class="size" <--------
:key="tab.name"
:to="tab.route">
{{ tab.name }}
</q-route-tab>..。
<style scoped>
.size {
width: 100px;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70263336
复制相关文章
相似问题
腾讯云开发者
