🍞
Vuetify の Breadcrumbs の省略や改行を制御したい
概要
Vuetify の Breadcrumbs （パンくずリスト）が長くなると困るとき、 text-truncate （white-space: nowrap; overflow: hidden; text-overflow: ellipsis;）や改行（wrap）を制御したくなる。
コンポーネントに flex が適用されているため、（おそらく）一工夫加えないと制御できない。その「一工夫」のメモを残しておきます😍
単純に width を設定すると、はみ出し部分は消える。
<div class="bg-red" style="width: 100px">
<v-breadcrumbs :items="items"></v-breadcrumbs>
</div>
環境
- Vue3
- Vuetify3
1. パンくずを省略する
パンくずリストのリストアイテムの長さを制限したいときは以下のようにする。
<div class="bg-red" style="width: 200px">
<v-breadcrumbs :items="items">
<template v-slot:item="{ item }">
<v-breadcrumbs-item>
<div class="text-truncate" style="max-width: 50px">
{{ item.title }}
</div>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</div>
const items = ref(['FooFooFoo', 'Bar', 'FizzFizzFizzFizzFizz'])
ちょっと解説
パンくずリスト内のパンくずアイテムを制御するには v-slot:item と v-breadcrumbs-item を使う必要がある。
v-breadcrumbs-item に class text-truncate を適用すればOKのように思えるが、それだとだめ。item に inlineflex が適用されてるので。参考：https://qiita.com/am_nimitz3/items/c497e34d4f68969d8a1c
したがって、v-breadcrumbs-item 内に div を追加して、そこに max-width と text-truncate を適用すれば OK！
2. パンくずリストを改行させる
長くなったら、改行して欲しくなる。以下のようにする。
<div class="bg-red" style="width: 100px">
<v-breadcrumbs :items="items" style="flex-wrap: wrap"></v-breadcrumbs>
</div>
v-breadcrumbs に flex-wrap: wrap を適用することで改行される。
ちょっと解説
v-breadcrumbs コンポーネントに flexbox が適用されている。
したがって、 flexbox の wrap の設定をいじれば OK！
おまけ：省略 & 改行
<div class="bg-red" style="width: 200px">
<v-breadcrumbs :items="items" style="flex-wrap: wrap">
<template v-slot:item="{ item }">
<v-breadcrumbs-item>
<div class="text-truncate" style="max-width: 50px">
{{item.title}}
</div>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</div>
Discussion