mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
feat(breadcrumb): separator slot & prop on item
This commit is contained in:
07akioni
parent
6e1cca769d
commit
12b97ab79c
@ -5,7 +5,8 @@
|
||||
### Feats
|
||||
|
||||
- Add `n-page-header` component.
|
||||
- `n-statistic` add label slot.
|
||||
- `n-statistic` add `label` slot.
|
||||
- `n-breadcrumb-item` add `separator` slot & prop.
|
||||
|
||||
### Refactors
|
||||
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
### Feats
|
||||
|
||||
- 添加 `n-page-header` 组件
|
||||
- `n-statistic` 增加 label slot
|
||||
- `n-statistic` 增加 `label` slot
|
||||
- `n-breadcrumb-item` 增加 `separator` slot & prop
|
||||
|
||||
### Refactors
|
||||
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
```html
|
||||
<n-breadcrumb>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-save /></n-icon> Home</n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Home</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-save /></n-icon> Account</n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Account</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-save /></n-icon> Category</n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Category</n-breadcrumb-item
|
||||
>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
45
src/breadcrumb/demos/enUS/dropdown.demo.md
Normal file
45
src/breadcrumb/demos/enUS/dropdown.demo.md
Normal file
@ -0,0 +1,45 @@
|
||||
# Dropdown
|
||||
|
||||
Use with dropdown.
|
||||
|
||||
```html
|
||||
<n-breadcrumb>
|
||||
<n-breadcrumb-item>
|
||||
<n-dropdown :options="options1">I'm ok</n-dropdown>
|
||||
</n-breadcrumb-item>
|
||||
<n-breadcrumb-item>
|
||||
<n-dropdown :options="options2">I'm ok</n-dropdown>
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
options1: [
|
||||
{
|
||||
label: 'David Tao',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
label: '黑色柳丁',
|
||||
key: 2
|
||||
}
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
label: '小镇姑娘',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
label: '普通朋友',
|
||||
key: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -6,6 +6,9 @@ It doesn't look like what it calls.
|
||||
|
||||
```demo
|
||||
basic
|
||||
dropdown
|
||||
separator
|
||||
separator-per-item
|
||||
```
|
||||
|
||||
## Props
|
||||
@ -16,6 +19,12 @@ basic
|
||||
| --------- | -------- | ------- | ----------- |
|
||||
| separator | `string` | `'/'` | |
|
||||
|
||||
### BreadcrumbItem Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --------- | -------- | ----------- | ----------- |
|
||||
| separator | `string` | `undefined` | |
|
||||
|
||||
## Slots
|
||||
|
||||
### Breadcrumb Slots
|
||||
@ -26,6 +35,7 @@ basic
|
||||
|
||||
### Breadcrumb Item Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| --------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| separator | `()` | |
|
||||
|
||||
29
src/breadcrumb/demos/enUS/separator-per-item.demo.md
Normal file
29
src/breadcrumb/demos/enUS/separator-per-item.demo.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Custom Separator by Item
|
||||
|
||||
Use separator prop or separator slot to custom separator of an item.
|
||||
|
||||
```html
|
||||
<n-breadcrumb>
|
||||
<n-breadcrumb-item separator=">">
|
||||
<n-icon><md-cash /></n-icon> Home</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Account<template #separator
|
||||
>~</template
|
||||
></n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Category</n-breadcrumb-item
|
||||
>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
```js
|
||||
import { MdCash } from '@vicons/ionicons4'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MdCash
|
||||
}
|
||||
}
|
||||
```
|
||||
27
src/breadcrumb/demos/enUS/separator.demo.md
Normal file
27
src/breadcrumb/demos/enUS/separator.demo.md
Normal file
@ -0,0 +1,27 @@
|
||||
# Custom Separator
|
||||
|
||||
Use separator prop to custom separator.
|
||||
|
||||
```html
|
||||
<n-breadcrumb separator=">">
|
||||
<n-breadcrumb-item>
|
||||
<n-icon><md-cash /></n-icon> Home</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Account</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> Category</n-breadcrumb-item
|
||||
>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
```js
|
||||
import { MdCash } from '@vicons/ionicons4'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MdCash
|
||||
}
|
||||
}
|
||||
```
|
||||
45
src/breadcrumb/demos/zhCN/dropdown.demo.md
Normal file
45
src/breadcrumb/demos/zhCN/dropdown.demo.md
Normal file
@ -0,0 +1,45 @@
|
||||
# 下拉菜单
|
||||
|
||||
和下拉菜单一起使用。
|
||||
|
||||
```html
|
||||
<n-breadcrumb>
|
||||
<n-breadcrumb-item>
|
||||
<n-dropdown :options="options1">I'm ok</n-dropdown>
|
||||
</n-breadcrumb-item>
|
||||
<n-breadcrumb-item>
|
||||
<n-dropdown :options="options2">I'm ok</n-dropdown>
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
options1: [
|
||||
{
|
||||
label: 'David Tao',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
label: '黑色柳丁',
|
||||
key: 2
|
||||
}
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
label: '小镇姑娘',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
label: '普通朋友',
|
||||
key: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -6,6 +6,9 @@
|
||||
|
||||
```demo
|
||||
basic
|
||||
dropdown
|
||||
separator
|
||||
separator-per-item
|
||||
```
|
||||
|
||||
## Props
|
||||
@ -16,6 +19,12 @@ basic
|
||||
| --------- | -------- | ------ | ---- |
|
||||
| separator | `string` | `'/'` | |
|
||||
|
||||
### BreadcrumbItem Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --------- | -------- | ------ | ---- |
|
||||
| separator | `string` | `'/'` | |
|
||||
|
||||
## Slots
|
||||
|
||||
### Breadcrumb Slots
|
||||
@ -26,6 +35,7 @@ basic
|
||||
|
||||
### Breadcrumb Item Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| --------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| separator | `()` | |
|
||||
|
||||
29
src/breadcrumb/demos/zhCN/separator-per-item.demo.md
Normal file
29
src/breadcrumb/demos/zhCN/separator-per-item.demo.md
Normal file
@ -0,0 +1,29 @@
|
||||
# 自定义每项分隔符
|
||||
|
||||
使用 separator prop 或 separator slot 自定义每一项的分隔符。
|
||||
|
||||
```html
|
||||
<n-breadcrumb>
|
||||
<n-breadcrumb-item separator=">">
|
||||
<n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> 天津分行<template #separator
|
||||
>~</template
|
||||
></n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item
|
||||
>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
```js
|
||||
import { MdCash } from '@vicons/ionicons4'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MdCash
|
||||
}
|
||||
}
|
||||
```
|
||||
27
src/breadcrumb/demos/zhCN/separator.demo.md
Normal file
27
src/breadcrumb/demos/zhCN/separator.demo.md
Normal file
@ -0,0 +1,27 @@
|
||||
# 自定义分隔符
|
||||
|
||||
使用 separator prop 自定义分隔符。
|
||||
|
||||
```html
|
||||
<n-breadcrumb separator=">">
|
||||
<n-breadcrumb-item>
|
||||
<n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> 天津分行</n-breadcrumb-item
|
||||
>
|
||||
<n-breadcrumb-item
|
||||
><n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item
|
||||
>
|
||||
</n-breadcrumb>
|
||||
```
|
||||
|
||||
```js
|
||||
import { MdCash } from '@vicons/ionicons4'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MdCash
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -3,13 +3,21 @@ import { BreadcrumbInjection } from './Breadcrumb'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BreadcrumbItem',
|
||||
setup (_, { slots }) {
|
||||
props: {
|
||||
separator: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup (props, { slots }) {
|
||||
const NBreadcrumb = inject<BreadcrumbInjection>('NBreadcrumb')
|
||||
return () => (
|
||||
<span class="n-breadcrumb-item">
|
||||
<span class="n-breadcrumb-item__link">{slots}</span>
|
||||
<span class="n-breadcrumb-item__separator">
|
||||
{NBreadcrumb?.separator}
|
||||
{slots.separator
|
||||
? slots.separator()
|
||||
: props.separator ?? NBreadcrumb?.separator}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
|
||||
@ -29,7 +29,7 @@ export default cB(
|
||||
color: 'var(--item-text-color)'
|
||||
}),
|
||||
cE('separator', {
|
||||
margin: '0 6px',
|
||||
margin: '0 8px',
|
||||
color: 'var(--separator-color)',
|
||||
transition: 'color .3s var(--bezier)'
|
||||
}),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user