Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit738d8d0

Browse files
Jonathan de FlaugerguesJonathan de Flaugergues
Jonathan de Flaugergues
authored and
Jonathan de Flaugergues
committed
feat(VBreadcrumbs): add list-item slot for customizing collapsed menu
1 parentc77b459 commit738d8d0

File tree

5 files changed

+124
-16
lines changed

5 files changed

+124
-16
lines changed

‎packages/api-generator/src/locale/en/VBreadcrumbs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"slots": {
1313
"divider":"The slot used for dividers.",
1414
"prepend":"The slot used for prepend content.",
15-
"title":"The slot used to display the title of each breadcrumb."
15+
"title":"The slot used to display the title of each breadcrumb.",
16+
"listItem":"The slot used for customizing each item inside the contextual menu when breadcrumbs items are collapsed."
1617
}
1718
}
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<v-breadcrumbs:items="items":total-visible="3"collapse-in-menu>
3+
<templatev-slot:list-item="{item,index }">
4+
<v-list-item:key="index":disabled="item.disabled":href="item.href">
5+
<v-list-item-title>
6+
<spanv-if="item.disabled">🔒 </span>{{ item.title }}
7+
</v-list-item-title>
8+
</v-list-item>
9+
</template>
10+
</v-breadcrumbs>
11+
</template>
12+
13+
<script setup>
14+
constitems= [
15+
{
16+
title:'Dashboard',
17+
disabled:false,
18+
href:'breadcrumbs_dashboard',
19+
},
20+
{
21+
title:'Link 1',
22+
disabled:false,
23+
href:'breadcrumbs_link_1',
24+
},
25+
{
26+
title:'Link 2',
27+
disabled:true,
28+
href:'breadcrumbs_link_2',
29+
},
30+
{
31+
title:'Link 3',
32+
disabled:false,
33+
href:'breadcrumbs_link_3',
34+
},
35+
{
36+
title:'Link 4',
37+
disabled:true,
38+
href:'breadcrumbs_link_4',
39+
},
40+
]
41+
</script>
42+
43+
<script>
44+
exportdefault {
45+
data: ()=> ({
46+
items: [
47+
{
48+
title:'Dashboard',
49+
disabled:false,
50+
href:'breadcrumbs_dashboard',
51+
},
52+
{
53+
title:'Link 1',
54+
disabled:false,
55+
href:'breadcrumbs_link_1',
56+
},
57+
{
58+
title:'Link 2',
59+
disabled:false,
60+
href:'breadcrumbs_link_2',
61+
},
62+
{
63+
title:'Link 3',
64+
disabled:false,
65+
href:'breadcrumbs_link_3',
66+
},
67+
{
68+
title:'Link 4',
69+
disabled:true,
70+
href:'breadcrumbs_link_4',
71+
},
72+
],
73+
}),
74+
}
75+
</script>

‎packages/docs/src/pages/en/components/breadcrumbs.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,9 @@ You can use the `totalVisible` prop to redefine the maximum number of breadcrumb
9090
You can use the`collapseInMenu` prop to display the collapsed breadcrumb items inside a dropdown menu.
9191

9292
<ExamplesExamplefile="v-breadcrumbs/slot-collapse-in-menu" />
93+
94+
####Collapsed with custom menu
95+
96+
You can use the`list-item` slot to customize how each breadcrumb item is rendered inside the collapsed menu when`collapseInMenu` is enabled.
97+
98+
<ExamplesExamplefile="v-breadcrumbs/slot-list-item" />

‎packages/vuetify/playgrounds/Playground.breadcrumbs.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33
<v-container>
44
<v-breadcrumbs:items="items":total-visible="3" />
55
<v-breadcrumbs:items="items":total-visible="3"collapse-in-menu />
6+
<v-breadcrumbs:items="items":total-visible="3"collapse-in-menu>
7+
<templatev-slot:list-item="{item,index }">
8+
<v-list-item:key="index":disabled="item.disabled":href="item.href">
9+
<v-list-item-title>
10+
<spanv-if="item.disabled">🔒 </span>{{ item.title }}
11+
</v-list-item-title>
12+
</v-list-item>
13+
</template>
14+
</v-breadcrumbs>
615
</v-container>
716
</v-app>
817
</template>
@@ -11,7 +20,7 @@
1120
exportdefault {
1221
name:'Playground',
1322
data: ()=> ({
14-
items:Array.from({ length:4 }, (k,v)=> ({ title:`Link${v+1}`, href:`breadcrumbs_link_${v+1}` })),
23+
items:Array.from({ length:4 }, (k,v)=> ({ title:`Link${v+1}`, href:`breadcrumbs_link_${v+1}`, disabled: v===2 })),
1524
}),
1625
}
1726
</script>

‎packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ export const makeVBreadcrumbsProps = propsFactory({
5555
default:()=>([]),
5656
},
5757
itemProps:Boolean,
58+
listProps:{
59+
type:ObjectasPropType<VList['$props']>,
60+
},
61+
menuProps:{
62+
type:ObjectasPropType<VMenu['$props']>,
63+
},
5864
totalVisible:Number,
5965

6066
...makeComponentProps(),
@@ -72,6 +78,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
7278
title:{item:InternalBreadcrumbItem,index:number}
7379
divider:{item:T,index:number}
7480
item:{item:InternalBreadcrumbItem,index:number}
81+
'list-item':{item:InternalBreadcrumbItem,index:number}
7582
default:never
7683
}
7784
)=>GenericProps<typeofprops,typeofslots>>()({
@@ -99,15 +106,15 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
99106
constitems=computed(()=>props.items.map(item=>{
100107
returntypeofitem==='string' ?{item:{title:item},raw:item} :{ item,raw:item}
101108
}))
102-
constshowEllipsis=toRef(()=>props.totalVisible ?items.value.length>props.totalVisible :false)
103-
constenableEllipsis=ref(showEllipsis.value)
109+
constellipsisEnabled=toRef(()=>props.totalVisible ?items.value.length>props.totalVisible :false)
110+
consthasEllipsis=ref(ellipsisEnabled.value)
104111

105112
constonClickEllipsis=()=>{
106-
enableEllipsis.value=false
113+
hasEllipsis.value=false
107114
}
108115

109-
watch(showEllipsis,(value:boolean)=>{
110-
enableEllipsis.value=value
116+
watch(ellipsisEnabled,(value:boolean)=>{
117+
hasEllipsis.value=value
111118
})
112119

113120
useRender(()=>{
@@ -153,12 +160,13 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
153160
</li>
154161
)}
155162

156-
{!enableEllipsis.value&&items.value.map(({ item, raw},index,array)=>(
163+
{!hasEllipsis.value&&items.value.map(({ item, raw},index,array)=>(
157164
<>
158165
{slots.item?.({ item, index})??(
159166
<VBreadcrumbsItem
160167
key={index}
161168
disabled={index>=array.length-1}
169+
active={index===array.length-1}
162170
{ ...(typeofitem==='string' ?{title:item} :item)}
163171
{ ...(props.itemProps&&isObject(raw) ?raw :{})}
164172
v-slots={{
@@ -177,7 +185,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
177185
</>
178186
))}
179187

180-
{enableEllipsis.value&&(
188+
{hasEllipsis.value&&(
181189
<>
182190
{(()=>{
183191
const{ item}=items.value[0]
@@ -202,15 +210,23 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
202210
>
203211
{props.ellipsis}
204212
{props.collapseInMenu ?(
205-
<VMenuactivator="parent">
213+
<VMenu
214+
activator="parent"
215+
{ ...props.menuProps}
216+
>
206217
{{
207218
default:()=>(
208-
<VList>
209-
{items.value.slice(1,items.value.length-1).map(({ item},index)=>(
210-
<VListItemkey={index}value={index}component="a"href={'href'initem ?item.href :undefined}>
211-
<VListItemTitle>{item.title}</VListItemTitle>
212-
</VListItem>
213-
))}
219+
<VList{ ...props.listProps}>
220+
{items.value.slice(1,items.value.length-1).map(({ item},index)=>{
221+
if(slots['list-item']){
222+
returnslots['list-item']({ item, index})
223+
}
224+
return(
225+
<VListItemkey={index}value={index}href={'href'initem ?item.href :undefined}>
226+
<VListItemTitle>{item.title}</VListItemTitle>
227+
</VListItem>
228+
)
229+
})}
214230
</VList>
215231
),
216232
}}
@@ -228,6 +244,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
228244
{slots.item?.({ item,index:lastIndex})??(
229245
<VBreadcrumbsItem
230246
disabled
247+
active
231248
{ ...(typeofitem==='string' ?{title:item} :item)}
232249
/>
233250
)}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp