refactor(avatar-group): expand on hover

This commit is contained in:
zhanglecong 2023-12-21 20:23:34 +08:00
parent fc26efa962
commit 49bc1e5910
5 changed files with 18 additions and 17 deletions

View File

@ -44,7 +44,7 @@
- `n-select` adds `ellipsis-tag-popover-props` prop.
- `n-tree-select` adds `ellipsis-tag-popover-props` prop.
- `n-date-picker` adds `month-string-type` prop, closes [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
- `n-avatar-group` adds `hover-expand` prop.
- `n-avatar-group` adds `expand-on-hover` prop.
## 2.36.0

View File

@ -45,7 +45,7 @@
- `n-select` 新增 `ellipsis-tag-popover-props` 属性
- `n-tree-select` 新增 `ellipsis-tag-popover-props` 属性
- `n-date-picker` 新增 `month-string-type` 属性,关闭 [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
- `n-avatar-group` 新增 `hover-expand` 属性
- `n-avatar-group` 新增 `expand-on-hover` 属性
- TODO: tree select 支持控制节点展开行为
## 2.36.0

View File

@ -100,7 +100,8 @@ export default defineComponent({
`${mergedClsPrefix}-avatar-group`,
this.rtlEnabled && `${mergedClsPrefix}-avatar-group--rtl`,
this.vertical && `${mergedClsPrefix}-avatar-group--vertical`,
this. expandOnHover && `${mergedClsPrefix}-avatar-group--expand-on-hover`
this.expandOnHover &&
`${mergedClsPrefix}-avatar-group--expand-on-hover`
]}
style={this.cssVars}
role="group"

View File

@ -39,13 +39,13 @@ v-show-debug.vue
### AvatarGroup Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| expand-on-hover| `boolean` | `false` | Expand on hover. |
| max | `number` | `undefined` | Max avatar count in the group. |
| max-style | `Object \| string` | `undefined` | The style of the overflow placeholder. |
| options | `Array<AvatarOption>` | `[]` | Avatar group options. |
| vertical | `boolean` | `false` | Whether display a vertical avatar group. |
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| expand-on-hover | `boolean` | `false` | Expand on hover. | NEXT_VERSION |
| max | `number` | `undefined` | Max avatar count in the group. | |
| max-style | `Object \| string` | `undefined` | The style of the overflow placeholder. | |
| options | `Array<AvatarOption>` | `[]` | Avatar group options. | |
| vertical | `boolean` | `false` | Whether display a vertical avatar group. | |
see [Avatar Props](#Avatar-Props)

View File

@ -41,13 +41,13 @@ rtl-debug.vue
### AvatarGroup Props
| 名称 | 类型 | 默认值 | 说明 |
| ------------ | --------------------- | ----------- | ---------------------- |
| expand-on-hover | `boolean` | `false` | 悬停时展开 |
| max | `number` | `undefined` | 组内头像显示的最大个数 |
| max-style | `Object \| string` | `undefined` | 溢出标识的样式 |
| options | `Array<AvatarOption>` | `[]` | 头像组的选项 |
| vertical | `boolean` | `false` | 组内头像是否垂直排列 |
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| expand-on-hover | `boolean` | `false` | 悬停时展开 | NEXT_VERSION |
| max | `number` | `undefined` | 组内头像显示的最大个数 | |
| max-style | `Object \| string` | `undefined` | 溢出标识的样式 | |
| options | `Array<AvatarOption>` | `[]` | 头像组的选项 | |
| vertical | `boolean` | `false` | 组内头像是否垂直排列 | |
参考 [Avatar Props](avatar#Props)