如何使选项卡适合其文本？

Question

我使用 Quasar 框架，我正在努力调整 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>

Answer 1

我没能使 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>

如何使选项卡适合其文本？

How to fit tab to its text?

vue.js

quasar-framework

quasar