mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
feat(slider): add tooltip prop, closes #362
This commit is contained in:
07akioni
parent
72b1287424
commit
6262b6fdf8
@ -9,6 +9,7 @@
|
||||
- Add native `title` attributes to some components to enhance the experience.
|
||||
- `n-tree` add `prefix` and `suffix` in TreeOption.
|
||||
- `n-carousel` add `dot-placement` prop.
|
||||
- `n-slider` add `tooltip` prop, closes [#362](https://github.com/TuSimple/naive-ui/issues/362).
|
||||
|
||||
### Fixes
|
||||
|
||||
|
||||
@ -7,8 +7,9 @@
|
||||
- `n-loading-bar` 导出 `LoadingBarApi` 类型
|
||||
- `n-image` 增加 `imgProps` 属性
|
||||
- 在部分组件上添加原生 `title` 属性，以提高用户体验
|
||||
- `n-tree` 在 TreeOption 中新增 `prefix` 和 `suffix`
|
||||
- `n-tree` 在 TreeOption 中增加 `prefix` 和 `suffix` 属性
|
||||
- `n-carousel` 增加 `dot-placement` 属性
|
||||
- `n-slider` 增加 `tooltip` 属性，关闭 [#362](https://github.com/TuSimple/naive-ui/issues/362)
|
||||
|
||||
### Fixes
|
||||
|
||||
|
||||
7
src/slider/demos/enUS/disable-tooltip.demo.md
Normal file
7
src/slider/demos/enUS/disable-tooltip.demo.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Disable Tooltip
|
||||
|
||||
Set `:tooltip="false"` to disabled the tooltip.
|
||||
|
||||
```html
|
||||
<n-slider :step="10" :tooltip="false" />
|
||||
```
|
||||
@ -8,18 +8,22 @@ As far as I know, it is awalys used as volumn control.
|
||||
basic
|
||||
range
|
||||
mark
|
||||
disable-tooltip
|
||||
```
|
||||
|
||||
## Props
|
||||
## API
|
||||
|
||||
### Slider Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| marks | `{ [markValue: number]: string }` | `undefined` | |
|
||||
| max | `number` | `100` | |
|
||||
| min | `number` | `0` | |
|
||||
| range | `boolean` | `false` | |
|
||||
| step | `number` | `1` | |
|
||||
| value | `number \| [number, number] \| null` | `undefined` |
|
||||
| on-update:value | `(value: number \| [number, number]) => void` | `undefined` | |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | Default value. |
|
||||
| disabled | `boolean` | `false` | Whether the slider is disabled. |
|
||||
| marks | `{ [markValue: number]: string }` | `undefined` | Marks of the slider. |
|
||||
| max | `number` | `100` | Max value of the slider. |
|
||||
| min | `number` | `0` | Min value of the slider. |
|
||||
| range | `boolean` | `false` | Whether the slider uses range value. |
|
||||
| step | `number` | `1` | Step of the slider. |
|
||||
| tooltip | `boolean` | `true` | Whether to show tooltip. |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | Value of the slider. |
|
||||
| on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update. |
|
||||
|
||||
7
src/slider/demos/zhCN/disable-tooltip.demo.md
Normal file
7
src/slider/demos/zhCN/disable-tooltip.demo.md
Normal file
@ -0,0 +1,7 @@
|
||||
# 禁用 Tooltip
|
||||
|
||||
设定 `:tooltip="false"` 来禁用 tooltip。
|
||||
|
||||
```html
|
||||
<n-slider :step="10" :tooltip="false" />
|
||||
```
|
||||
@ -8,18 +8,22 @@
|
||||
basic
|
||||
range
|
||||
mark
|
||||
disable-tooltip
|
||||
```
|
||||
|
||||
## Props
|
||||
## API
|
||||
|
||||
### Slider Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| marks | `{ [markValue: number]: string }` | `undefined` | |
|
||||
| max | `number` | `100` | |
|
||||
| min | `number` | `0` | |
|
||||
| range | `boolean` | `false` | |
|
||||
| step | `number` | `1` | |
|
||||
| value | `number \| [number, number] \| null` | `undefined` |
|
||||
| on-update:value | `(value: number \| [number, number]) => void` | `undefined` | |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | 默认值 |
|
||||
| disabled | `boolean` | `false` | 是否禁用 |
|
||||
| marks | `{ [markValue: number]: string }` | `undefined` | Slider 上的标记 |
|
||||
| max | `number` | `100` | 最大值 |
|
||||
| min | `number` | `0` | 最小值 |
|
||||
| range | `boolean` | `false` | 是否选择范围值 |
|
||||
| step | `number` | `1` | 步长 |
|
||||
| tooltip | `boolean` | `true` | 是否展示 tooltip |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | 值 |
|
||||
| on-update:value | `(value: number \| [number, number]) => void` | `undefined` | 值更新的回调 |
|
||||
|
||||
@ -37,10 +37,7 @@ const sliderProps = {
|
||||
default: 0
|
||||
},
|
||||
marks: Object as PropType<Record<string, string>>,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: Boolean,
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
@ -53,10 +50,7 @@ const sliderProps = {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
range: Boolean,
|
||||
value: [Number, Array] as PropType<number | [number, number]>,
|
||||
placement: {
|
||||
type: String as PropType<FollowerPlacement>,
|
||||
@ -66,7 +60,10 @@ const sliderProps = {
|
||||
type: Boolean as PropType<boolean | undefined>,
|
||||
default: undefined
|
||||
},
|
||||
// eslint-disable-next-line vue/prop-name-casing
|
||||
tooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
'onUpdate:value': [Function, Array] as PropType<
|
||||
MaybeArray<<T extends number & [number, number]>(value: T) => void>
|
||||
>,
|
||||
@ -855,40 +852,42 @@ export default defineComponent({
|
||||
)
|
||||
}}
|
||||
</VTarget>,
|
||||
<VFollower
|
||||
ref="followerRef1"
|
||||
show={this.mergedShowTooltip1}
|
||||
to={this.adjustedTo}
|
||||
teleportDisabled={this.adjustedTo === useAdjustedTo.tdkey}
|
||||
placement={this.placement}
|
||||
containerClass={this.namespace}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<Transition
|
||||
name="fade-in-scale-up-transition"
|
||||
appear={this.isMounted}
|
||||
css={!(this.active && this.prevActive)}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
this.mergedShowTooltip1 ? (
|
||||
<div
|
||||
class={`${mergedClsPrefix}-slider-handle-indicator`}
|
||||
style={this.indicatorCssVars as CSSProperties}
|
||||
>
|
||||
{this.handleValue1}
|
||||
</div>
|
||||
) : null
|
||||
}}
|
||||
</Transition>
|
||||
)
|
||||
}}
|
||||
</VFollower>
|
||||
this.tooltip && (
|
||||
<VFollower
|
||||
ref="followerRef1"
|
||||
show={this.mergedShowTooltip1}
|
||||
to={this.adjustedTo}
|
||||
teleportDisabled={this.adjustedTo === useAdjustedTo.tdkey}
|
||||
placement={this.placement}
|
||||
containerClass={this.namespace}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<Transition
|
||||
name="fade-in-scale-up-transition"
|
||||
appear={this.isMounted}
|
||||
css={!(this.active && this.prevActive)}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
this.mergedShowTooltip1 ? (
|
||||
<div
|
||||
class={`${mergedClsPrefix}-slider-handle-indicator`}
|
||||
style={this.indicatorCssVars as CSSProperties}
|
||||
>
|
||||
{this.handleValue1}
|
||||
</div>
|
||||
) : null
|
||||
}}
|
||||
</Transition>
|
||||
)
|
||||
}}
|
||||
</VFollower>
|
||||
)
|
||||
]
|
||||
}}
|
||||
</VBinder>
|
||||
{this.range ? (
|
||||
{this.tooltip && this.range ? (
|
||||
<VBinder>
|
||||
{{
|
||||
default: () => [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user