From d23852f5a036550332e00af0b3b1c30df3ae5307 Mon Sep 17 00:00:00 2001 From: azabroflovski Date: Sun, 5 Jan 2025 02:18:02 +0500 Subject: [PATCH] feat(button): add shine effect --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + src/button/demos/enUS/index.demo-entry.md | 2 ++ src/button/demos/enUS/shine.demo.vue | 35 +++++++++++++++++++++++ src/button/demos/zhCN/index.demo-entry.md | 1 + src/button/src/Button.tsx | 28 +++++++++++++++--- src/button/src/styles/index.cssr.ts | 33 +++++++++++++++++++++ src/button/styles/dark.ts | 1 + src/button/styles/light.ts | 1 + 9 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 src/button/demos/enUS/shine.demo.vue diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 742f704ca8d..078e12c7476 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,7 @@ - `n-modal` adds `draggable` prop, closes [#6525](https://github.com/tusen-ai/naive-ui/issues/6525), [#5792](https://github.com/tusen-ai/naive-ui/issues/5792), [#5711](https://github.com/tusen-ai/naive-ui/issues/5711), [#5501](https://github.com/tusen-ai/naive-ui/issues/5501) and [#2152](https://github.com/tusen-ai/naive-ui/issues/2152). - `useDialog` supports `draggable` option. - `useModal` supports `draggable` option. +- `n-button` adds `shine` prop. ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 2740c468397..ac503479904 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,7 @@ - `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)，[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)，[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)，[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)，[#2152](https://github.com/tusen-ai/naive-ui/issues/2152) - `useDialog` 支持 `draggable` 参数 - `useModal` 支持 `draggable` 参数 +- `n-button` 新增 `shine` 属性 ### Fixes diff --git a/src/button/demos/enUS/index.demo-entry.md b/src/button/demos/enUS/index.demo-entry.md index fe2ef5e6310..d767c864e6f 100644 --- a/src/button/demos/enUS/index.demo-entry.md +++ b/src/button/demos/enUS/index.demo-entry.md @@ -19,6 +19,7 @@ events.vue shape.vue ghost.vue loading.vue +shine.vue color.vue group.vue icon-button.vue @@ -50,6 +51,7 @@ popover.vue | secondary | `boolean` | `false` | Whether the button is secondary button. | | | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Button size. | | | strong | `boolean` | `false` | Whether to use strong text in the button. | | +| shine | `boolean` | `false` | Enable shine effect in the button. | | | tertiary | `boolean` | `false` | Whether the button is tertiary button. | | | text | `boolean` | `false` | Whether to display as a text button. | | | text-color | `string` | `undefined` | Button text color (support `#FFF`, `#FFFFFF`, `yellow`,`rgb(0, 0, 0)` formatted colors). | | diff --git a/src/button/demos/enUS/shine.demo.vue b/src/button/demos/enUS/shine.demo.vue new file mode 100644 index 00000000000..22dd5890877 --- /dev/null +++ b/src/button/demos/enUS/shine.demo.vue @@ -0,0 +1,35 @@ + +# Shine effect + +The button have a shining effect. + + + diff --git a/src/button/demos/zhCN/index.demo-entry.md b/src/button/demos/zhCN/index.demo-entry.md index e404868d585..28bc87ef8c1 100644 --- a/src/button/demos/zhCN/index.demo-entry.md +++ b/src/button/demos/zhCN/index.demo-entry.md @@ -52,6 +52,7 @@ debug.vue | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | 按钮的尺寸 | | | secondary | `boolean` | `false` | 是否是次要按钮 | | | strong | `boolean` | `false` | 按钮文字是否加粗 | | +| shine | `boolean` | `false` | Enable shine effect in the button. | | | tertiary | `boolean` | `false` | 是否是三级按钮 | | | text | `boolean` | `false` | 是否显示为文本按钮 | | | text-color | `string` | `undefined` | 按钮文字颜色（支持形如 `#FFF`， `#FFFFFF`， `yellow`，`rgb(0, 0, 0)` 的颜色） | | diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx index 464782c66ba..cccf1dad503 100644 --- a/src/button/src/Button.tsx +++ b/src/button/src/Button.tsx @@ -57,6 +57,7 @@ export const buttonProps = { secondary: Boolean, tertiary: Boolean, quaternary: Boolean, + shine: Boolean, strong: Boolean, focusable: { type: Boolean, @@ -459,6 +460,7 @@ const Button = defineComponent({ [createKey('iconSize', size)]: iconSize, [createKey('borderRadius', size)]: borderRadius, [createKey('iconMargin', size)]: iconMargin, + shineOpacity, waveOpacity } = self const sizeProps = { @@ -486,6 +488,7 @@ const Button = defineComponent({ '--n-ripple-duration': rippleDuration, '--n-opacity-disabled': opacityDisabled, '--n-wave-opacity': waveOpacity, + '--n-shine-opacity': shineOpacity, ...fontProps, ...colorProps, ...borderProps, @@ -509,6 +512,7 @@ const Button = defineComponent({ secondary, tertiary, quaternary, + shine, strong } = props if (dashed) @@ -529,13 +533,15 @@ const Button = defineComponent({ hash += 'h' if (strong) hash += 'i' + if (shine) + hash += 'j' if (color) - hash += `j${color2Class(color)}` + hash += `k${color2Class(color)}` if (textColor) - hash += `k${color2Class(textColor)}` + hash += `l${color2Class(textColor)}` const { value: size } = mergedSizeRef - hash += `l${size[0]}` - hash += `m${type[0]}` + hash += `m${size[0]}` + hash += `n${type[0]}` return hash }), cssVarsRef, @@ -595,6 +601,7 @@ const Button = defineComponent({ `${mergedClsPrefix}-button--${this.mergedSize}-type`, this.rtlEnabled && `${mergedClsPrefix}-button--rtl`, this.disabled && `${mergedClsPrefix}-button--disabled`, + this.shine && `${mergedClsPrefix}-button--shine`, this.block && `${mergedClsPrefix}-button--block`, this.enterPressed && `${mergedClsPrefix}-button--pressed`, !this.text && this.dashed && `${mergedClsPrefix}-button--dashed`, @@ -664,6 +671,19 @@ const Button = defineComponent({ style={this.customColorCssVars as CSSProperties} /> ) : null} + {this.shine ? ( +
+
+
+ ) : null} {this.showBorder ? (