diff --git a/src/data/components.json b/src/data/components.json index 4df383608..80dabf4d6 100644 --- a/src/data/components.json +++ b/src/data/components.json @@ -75,7 +75,8 @@ ], "examples": [ "textDividers", - "iconDividers" + "iconDividers", + "itemSlot" ], "spec": false }, diff --git a/src/data/deprecatedIn.json b/src/data/deprecatedIn.json index d473ad8e3..1423e9468 100644 --- a/src/data/deprecatedIn.json +++ b/src/data/deprecatedIn.json @@ -5,6 +5,10 @@ }, "v-select": { "multi-line": "1.1" + }, + "v-breadcrumbs": { + "justify-center": "1.2", + "justify-end": "1.2" } } } diff --git a/src/data/newIn.json b/src/data/newIn.json index 79e7cd22d..595921418 100644 --- a/src/data/newIn.json +++ b/src/data/newIn.json @@ -7,6 +7,9 @@ "v-autocomplete": { "no-filter": "1.1" }, + "v-breadcrumbs": { + "items": "1.2" + }, "v-combobox": { "delimiters": "1.1" }, diff --git a/src/examples/breadcrumbs/iconDividers.vue b/src/examples/breadcrumbs/iconDividers.vue index 8e1d3fafc..8f7ca01c4 100644 --- a/src/examples/breadcrumbs/iconDividers.vue +++ b/src/examples/breadcrumbs/iconDividers.vue @@ -1,50 +1,35 @@ diff --git a/src/examples/breadcrumbs/itemSlot.vue b/src/examples/breadcrumbs/itemSlot.vue new file mode 100644 index 000000000..3b6ffbbff --- /dev/null +++ b/src/examples/breadcrumbs/itemSlot.vue @@ -0,0 +1,33 @@ + + + diff --git a/src/examples/breadcrumbs/textDividers.vue b/src/examples/breadcrumbs/textDividers.vue index e8dab170e..56da1a7d2 100644 --- a/src/examples/breadcrumbs/textDividers.vue +++ b/src/examples/breadcrumbs/textDividers.vue @@ -1,24 +1,8 @@ @@ -28,15 +12,18 @@ items: [ { text: 'Dashboard', - disabled: false + disabled: false, + href: 'breadcrumbs_dashboard' }, { text: 'Link 1', - disabled: false + disabled: false, + href: 'breadcrumbs_link_1' }, { text: 'Link 2', - disabled: true + disabled: true, + href: 'breadcrumbs_link_2' } ] }) diff --git a/src/lang/en/components/Breadcrumbs.json b/src/lang/en/components/Breadcrumbs.json index fde4e83ff..23d68d5b5 100644 --- a/src/lang/en/components/Breadcrumbs.json +++ b/src/lang/en/components/Breadcrumbs.json @@ -1,6 +1,6 @@ { "header": "Breadcrumbs", - "headerText": "The `v-breadcrumbs` component is a navigational helper for pages. It can accept a **Material Icons** icon or characters as a divider. An array of objects containing the fields _href_, _text_ and optional _disabled_ can be passed to the **items** property of the component. Additionally, a regular slot exists for more control of the breadcrumbs, either utilizing `v-breadcrumbs-item` or other custom markup.", + "headerText": "The `v-breadcrumbs` component is a navigational helper for pages. It can accept a **Material Icons** icon or text characters as a divider. An array of objects can be passed to the **items** property of the component. Additionally, a scoped slot exists for more control of the breadcrumbs, either utilizing `v-breadcrumbs-item` or other custom markup.", "examples": { "textDividers": { "header": "Text dividers", @@ -9,13 +9,24 @@ "iconDividers": { "header": "Icon dividers", "desc": "For the icon variant, breadcrumbs can use any icon in Material Design Icons." + }, + "itemSlot": { + "header": "Item slot", + "desc": "You can use the scoped `item` slot to customize each breadcrumb." } }, "props": { "divider": "Specifies the dividing character", "icons": "Specifies that the dividers are icons", + "items": "An array of objects describing each breadcrumb. See `v-breadcrumbs-item` API section for all object properties. Use `text` property for the breadcrumb text.", "justifyCenter": "Align the breadcrumbs center", "justifyEnd": "Align the breadcrumbs at the end", "large": "Increase the font-size of the breadcrumb item text" + }, + "slots": { + "divider": "Specifies the divider content" + }, + "scopedSlots": { + "item": "Scoped slot for overriding default breadcrumb item rendering" } }