Icon icon usage
First, import the required Icon from @ opentiny/vue icon , and execute the Icon function to obtain the Icon component. Then refer to it in the template through the icon attribute.
'
+ },
+ 'codeFiles': ['icon.vue']
+ },
+ {
+ 'demoId': 'trigger',
+ 'name': { 'zh-CN': '菜单模式', 'en-US': 'Menu mode' },
+ 'desc': {
+ 'zh-CN':
+ '
设置trigger 属性即可开启菜单模式。设置open为true即可手动打开菜单.
',
+ 'en-US':
+ '
Set the trigger property to turn on the menu mode.Set open to true to manually open the menu.
'
+ },
+ 'codeFiles': ['trigger.vue']
+ },
+ {
+ 'demoId': 'backTop',
+ 'name': { 'zh-CN': '回到顶部', 'en-US': 'Back to top' },
+ 'desc': {
+ 'zh-CN': '
设置backtop 属性即可实现页面滚回顶部。element赋值为滚动元素。
',
+ 'en-US':
+ '
Set the backtop attribute to roll the page back to the top. element is assigned as a scrolling element.
'
+ },
+ 'codeFiles': ['backTop.vue']
+ },
+
+ {
+ 'demoId': 'jump',
+ 'name': { 'zh-CN': '跳转页面', 'en-US': 'Jump to the page' },
+ 'desc': {
+ 'zh-CN': '
可以设置href和target两个属性，按钮点击跳转页面。
',
+ 'en-US': '
You can set the two properties of href and target, and click the button to jump to the page.
'
+ },
+ 'codeFiles': ['jump.vue']
+ }
+ ],
+ apis: [
+ {
+ 'name': 'button',
+ 'type': 'component',
+ 'props': [
+ {
+ 'name': 'type',
+ 'type': 'IButtonType',
+ 'typeAnchorName': 'IButtonType',
+ 'defaultValue': '--',
+ 'desc': {
+ 'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
+ 'en-US': 'Display different states of buttons, set to text to display as text buttons'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'description',
+ 'type': 'string',
+ 'defaultValue': '--',
+ 'desc': {
+ 'zh-CN': '按钮显示的文本',
+ 'en-US': 'Set the text displayed by the button'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'icon',
+ 'type': 'Component',
+ 'defaultValue': '--',
+ 'desc': {
+ 'zh-CN': '按钮展示的图标，接收为Icon组件',
+ 'en-US': 'The icon displayed by the button is received as an Icon component'
+ },
+ 'demoId': 'icon'
+ },
+ {
+ 'name': 'reset-time',
+ 'type': 'number',
+ 'defaultValue': '1000',
+ 'desc': {
+ 'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
+ 'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
+ },
+ 'demoId': 'reset-time'
+ },
+ {
+ 'name': 'trigger',
+ 'type': 'string',
+ 'defaultValue': 'click',
+ 'desc': {
+ 'zh-CN': '设置菜单触发模式。',
+ 'en-US': 'Set the menu trigger mode.'
+ },
+ 'demoId': 'trigger'
+ },
+ {
+ 'name': 'open',
+ 'type': 'boolean',
+ 'defaultValue': false,
+ 'desc': {
+ 'zh-CN': '设置菜单是否打开。',
+ 'en-US': 'Whether the settings menu opens.'
+ },
+ 'demoId': 'trigger'
+ },
+ {
+ 'name': 'shape',
+ 'type': "'circle'|'square'",
+ 'defaultValue': 'circle',
+ 'desc': {
+ 'zh-CN': '设置按钮形状。',
+ 'en-US': 'Set Button shape.'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'backTop',
+ 'type': 'boolean',
+ 'defaultValue': false,
+ 'desc': {
+ 'zh-CN': '设置是否是回到顶部按钮。',
+ 'en-US': 'Set whether it is a back-to-top button.'
+ },
+ 'demoId': 'backTop'
+ },
+
+ {
+ 'name': 'element',
+ 'type': 'HTMLElement',
+ 'defaultValue': 'document.body',
+ 'desc': {
+ 'zh-CN': '当backTop设置为true时，此属性设置滚动元素。',
+ 'en-US': 'When backTop is set to true, this property sets the scrolling element.'
+ },
+ 'demoId': 'backTop'
+ },
+ {
+ 'name': 'top',
+ 'type': 'string',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '按钮与顶部的距离。',
+ 'en-US': 'The distance of the button from the top.'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'bottom',
+ 'type': 'string',
+ 'defaultValue': '20px',
+ 'desc': {
+ 'zh-CN': '按钮与底部的距离。',
+ 'en-US': 'The distance of the button from the bottom.'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'left',
+ 'type': 'string',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '按钮与左边的距离。',
+ 'en-US': 'The distance of the button from the left.'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'right',
+ 'type': 'string',
+ 'defaultValue': '20px',
+ 'desc': {
+ 'zh-CN': '按钮与右边的距离。',
+ 'en-US': 'The distance of the button from the right.'
+ },
+ 'demoId': 'basic-usage'
+ },
+ {
+ 'name': 'href',
+ 'type': 'string',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '按钮点击后跳转的页面。',
+ 'en-US': 'button to jump to the page.'
+ },
+ 'demoId': 'jump'
+ },
+ {
+ 'name': 'target',
+ 'type': 'string',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '相当于
a 标签的
target 属性，
href 存在时生效。',
+ 'en-US': 'The target attribute equivalent to the A tag, which takes effect when the href exists.'
+ },
+ 'demoId': 'jump'
+ }
+ ],
+ 'events': [
+ {
+ 'name': 'click',
+ 'type': '(event: PointEvent) => void',
+ 'defaultValue': '--',
+ 'desc': {
+ 'zh-CN': '当按钮被点击时触发的回调函数',
+ 'en-US': 'Sets the callback function triggered when a button is clicked'
+ },
+ 'demoId': 'click'
+ }
+ ],
+ 'slots': [
+ {
+ 'name': 'default',
+ 'type': '',
+ 'defaultValue': '--',
+ 'desc': {
+ 'zh-CN': '默认插槽，自定义按钮展开时的内容',
+ 'en-US': 'Default slot, customize what the button is when expanded'
+ },
+ 'demoId': 'open'
+ }
+ ]
+ }
+ ],
+ types: [
+ {
+ name: 'IButtonType',
+ type: 'interface',
+ code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+ }
+ ]
+}
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index 33dc05d24..f39ca098c 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -225,7 +225,8 @@ export const cmpMenus = [
{ 'nameCn': '弹出框', 'name': 'Popover', 'key': 'popover' },
{ 'nameCn': '气泡确认框组件', 'name': 'Popconfirm', 'key': 'popconfirm' },
{ 'nameCn': '模态框', 'name': 'Modal', 'key': 'modal' },
- { 'nameCn': '通知', 'name': 'Notify', 'key': 'notify' }
+ { 'nameCn': '通知', 'name': 'Notify', 'key': 'notify' },
+ { 'name': 'FloatButton', 'nameCn': '悬浮按钮', 'key': 'float-button' }
]
},
{
diff --git a/packages/modules.json b/packages/modules.json
index 7ddc475f3..b247567f8 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -1413,6 +1413,14 @@
"pc"
]
},
+ "FloatButton": {
+ "path": "vue/src/float-button/index.ts",
+ "type": "component",
+ "exclude": false,
+ "mode": [
+ "pc"
+ ]
+ },
"FloatbarPc": {
"path": "vue/src/floatbar/src/pc.vue",
"type": "template",
@@ -3254,4 +3262,4 @@
"pc"
]
}
-}
+}
\ No newline at end of file
diff --git a/packages/renderless/src/float-button/index.ts b/packages/renderless/src/float-button/index.ts
new file mode 100644
index 000000000..4082a38c1
--- /dev/null
+++ b/packages/renderless/src/float-button/index.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import type { IFloatButtonRenderlessParams, IFloatButtonState } from '@/types'
+
+export const handleScroll = ({ props, state }: Pick
) => {
+ if (props.element) {
+ const beforeHeight = props.element.scrollTop || document.documentElement.scrollTop || document.body.scrollTop
+ if (beforeHeight <= props.visibilityHeight) {
+ state.show = false
+ }
+ props.element.onscroll = function () {
+ state.show = true
+ const height = props.element.scrollTop || document.documentElement.scrollTop || document.body.scrollTop
+ if (height <= props.visibilityHeight) {
+ state.show = false
+ }
+ }
+ }
+}
+export const handleClick =
+ ({ emit, props, state }: Pick) =>
+ (event: MouseEvent): void => {
+ if (props.trigger === 'click' && props.resetTime > 0 && !props.backTop) {
+ state.disabled = true
+ state.open = !state.open
+ state.timer = window.setTimeout(() => {
+ state.disabled = false
+ }, props.resetTime)
+ }
+ if (!props.trigger && (props.href || props.target) && !props.backTop) {
+ window.open(props.href, props.target)
+ }
+ if (props.backTop) {
+ props.element?.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ })
+ }
+ emit('click', event)
+ }
+
+export const clearTimer = (state: IFloatButtonState) => (): void => clearTimeout(state.timer)
diff --git a/packages/renderless/src/float-button/vue.ts b/packages/renderless/src/float-button/vue.ts
new file mode 100644
index 000000000..957ed7e5b
--- /dev/null
+++ b/packages/renderless/src/float-button/vue.ts
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import type {
+ ISharedRenderlessParamHooks,
+ IFloatButtonProps,
+ IFloatButtonApi,
+ IFloatButtonRenderlessParamUtils,
+ IFloatButtonState
+} from '@/types'
+
+import { handleClick, clearTimer, handleScroll } from './index'
+
+export const api = ['state', 'handleClick']
+const watchVariable = ({ watch, props, state, nextTick, vm, emit }) => {
+ watch(
+ () => props.disabled,
+ (value) => {
+ state.disabled = value
+ },
+ { immediate: true }
+ )
+ watch(
+ () => props.open,
+ (value) => {
+ state.open = value
+ },
+ { immediate: true }
+ )
+ watch(
+ () => state.open,
+ (value) => {
+ if (value) {
+ let beforeRootDom = vm.$refs.tinyFloatButton
+ let beforeRootDomStyle = beforeRootDom?.getClientRects()[0] || 0
+ nextTick(() => {
+ if (!beforeRootDomStyle) {
+ beforeRootDom = vm.$refs.tinyFloatButton
+ beforeRootDomStyle = beforeRootDom.getClientRects()[0]
+ }
+ const dom = vm.$refs.tinyFloatButtonOpen
+ const style = `left:0px;bottom:${beforeRootDomStyle.height + 4 + 'px'};`
+ dom?.setAttribute('style', style)
+ })
+ }
+ },
+ { immediate: true }
+ )
+ watch(
+ () => props.trigger,
+ (value) => {
+ if (value === 'hover' && !state.hasEvent) {
+ nextTick(() => {
+ const dom = vm.$refs.tinyFloatButton
+ dom.addEventListener('mouseover', (event: MouseEvent) => {
+ state.open = true
+ emit('mouseover', event)
+ })
+ dom.addEventListener('mouseout', (event: MouseEvent) => {
+ state.open = false
+ emit('mouseout', event)
+ })
+ state.hasEvent = true
+ })
+ }
+ },
+ { immediate: true }
+ )
+ watch(
+ () => props.backTop,
+ (value) => {
+ if (value) {
+ handleScroll({ props, vm, state })
+ }
+ },
+ { immediate: true }
+ )
+ watch(
+ () => props.element,
+ () => {
+ if (props.backTop) {
+ handleScroll({ props, vm, state })
+ }
+ }
+ )
+}
+export const renderless = (
+ props: IFloatButtonProps,
+ { computed, onBeforeUnmount, reactive, watch, inject, nextTick }: ISharedRenderlessParamHooks,
+ { emit, parent, vm }: IFloatButtonRenderlessParamUtils
+) => {
+ parent.tinyForm = parent.tinyForm || inject('form', null)
+ const state: IFloatButtonState = reactive({
+ timer: 0,
+ disabled: props.disabled,
+ open: props.open,
+ hasEvent: false,
+ show: true,
+ formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+ buttonDisabled: computed(
+ () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled
+ )
+ })
+
+ watchVariable({ props, vm, watch, state, nextTick, emit })
+ const api: IFloatButtonApi = {
+ state,
+ clearTimer: clearTimer(state),
+ handleClick: handleClick({ emit, props, state })
+ }
+
+ onBeforeUnmount(api.clearTimer)
+
+ return api
+}
diff --git a/packages/renderless/types/float-button.type.ts b/packages/renderless/types/float-button.type.ts
new file mode 100644
index 000000000..47794e10a
--- /dev/null
+++ b/packages/renderless/types/float-button.type.ts
@@ -0,0 +1,29 @@
+import type { ComputedRef, ExtractPropTypes } from 'vue'
+import type { floatButtonProps } from '@/float-button/src'
+import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
+import type { clearTimer, handleClick } from '../src/float-button'
+
+export interface IFloatButtonState {
+ timer: number
+ disabled: boolean
+ open: Boolean
+ show: Boolean
+ hasEvent: Boolean
+ formDisabled: ComputedRef
+ buttonDisabled: ComputedRef
+}
+
+export type IFloatButtonRenderlessParams = ISharedRenderlessFunctionParams & {
+ state: IFloatButtonState
+ props: IFloatButtonProps
+}
+
+export type IFloatButtonProps = ExtractPropTypes
+
+export interface IFloatButtonApi {
+ state: IFloatButtonState
+ clearTimer: ReturnType
+ handleClick: ReturnType
+}
+
+export type IFloatButtonRenderlessParamUtils = ISharedRenderlessParamUtils
diff --git a/packages/renderless/types/index.ts b/packages/renderless/types/index.ts
index 3a7881726..a3d8d5fd7 100644
--- a/packages/renderless/types/index.ts
+++ b/packages/renderless/types/index.ts
@@ -54,6 +54,7 @@ export * from './checkbox-group.type'
export * from './col.type'
export * from './collapse.type'
export * from './collapse-item.type'
+export * from './float-button.type'
export * from './column-list-group.type'
export * from './column-list-item.type'
export * from './common.type'
diff --git a/packages/theme/src/float-button/aurora-theme.js b/packages/theme/src/float-button/aurora-theme.js
new file mode 100644
index 000000000..8ce61608c
--- /dev/null
+++ b/packages/theme/src/float-button/aurora-theme.js
@@ -0,0 +1 @@
+export const tinyFloatButtonAuroraTheme = {}
diff --git a/packages/theme/src/float-button/index.less b/packages/theme/src/float-button/index.less
new file mode 100644
index 000000000..3da496a57
--- /dev/null
+++ b/packages/theme/src/float-button/index.less
@@ -0,0 +1,512 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../mixins/button.less';
+@import '../custom.less';
+@import './vars.less';
+
+@float-button-prefix-cls: ~'@{css-prefix}float-button';
+@svg-prefix-cls: ~'@{css-prefix}svg';
+
+.@{float-button-prefix-cls} {
+ .component-css-vars-float-button();
+ position: fixed;
+
+ display: inline-block;
+ appearance: none;
+ text-align: center;
+ box-sizing: border-box;
+ height: auto;
+ line-height: calc(var(--ti-float-button-size-normal-height) - 2px);
+ color: var(--ti-float-button-normal-text-color);
+ fill: var(--ti-float-button-normal-text-color);
+ font-size: var(--ti-float-button-font-size);
+ min-width: var(--ti-float-button-size-normal-min-width);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ cursor: pointer;
+ user-select: none;
+ border-width: var(--ti-float-button-border-width);
+ border-style: var(--ti-float-button-border-style);
+ border-color: var(--ti-float-button-normal-border-color);
+ border-image: initial;
+ border-radius: var(--ti-float-button-border-radius);
+ background: var(--ti-float-button-normal-background-color);
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+ transition:
+ border 0.3s ease 0s,
+ color 0.3s ease 0s,
+ background 0.3s ease 0s;
+ outline: 0;
+ vertical-align: middle;
+ z-index: 999;
+
+ .@{svg-prefix-cls} {
+ vertical-align: text-top;
+ }
+
+ &>img {
+ margin-right: 4px;
+ vertical-align: middle;
+ }
+
+ &.is-circle {
+ border-radius: 100%;
+ }
+
+ &.is-only-icon {
+ min-width: var(--ti-float-button-only-icon-min-width);
+ padding: 0 var(--ti-float-button-only-icon-padding-horizontal);
+ border-radius: var(--ti-float-button-only-icon-border-radius);
+ border-color: var(--ti-float-button-only-icon-border-color);
+
+ &:hover {
+ border-color: var(--ti-float-button-only-icon-hover-border-color);
+ }
+
+ &.is-disabled {
+ border-color: var(--ti-float-button-only-icon-disabled-border-color);
+
+ &:hover {
+ border-color: var(--ti-float-button-only-icon-disabled-border-color);
+ }
+ }
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &:focus,
+ &:hover {
+ .button-color(var(--ti-float-button-normal-hover-text-color),
+ var(--ti-float-button-normal-hover-border-color),
+ var(--ti-float-button-normal-hover-bg-color));
+ }
+
+ &:active,
+ &.is-active {
+ .button-color(var(--ti-float-button-normal-active-text-color),
+ var(--ti-float-button-normal-active-border-color),
+ var(--ti-float-button-normal-active-bg-color));
+ }
+
+ &.is-ghost {
+ background-color: transparent;
+
+ &:active,
+ &:focus,
+ &:hover {
+ .button-color(var(--ti-float-button-ghost-hover-text-color),
+ var(--ti-float-button-ghost-hover-border-color),
+ transparent);
+ }
+
+ &.is-disabled,
+ &.is-disabled:focus,
+ &.is-disabled:hover {
+ .button-color(var(--ti-float-button-ghost-disabled-text-color),
+ var(--ti-float-button-ghost-disabled-border-color),
+ transparent);
+ }
+ }
+
+ &.is-disabled,
+ &.is-disabled:focus,
+ &.is-disabled:hover {
+ cursor: not-allowed;
+ .button-color(var(--ti-float-button-normal-disabled-text-color),
+ var(--ti-float-button-normal-disabled-border-color),
+ var(--ti-float-button-normal-disabled-bg-color));
+ }
+
+ &+& {
+ margin-left: 8px;
+ }
+
+ &.is-loading {
+ pointer-events: none;
+ overflow: initial;
+
+ &:before {
+ pointer-events: none;
+ content: '';
+ position: absolute;
+ left: -1px;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ border-radius: inherit;
+ background-color: var(--ti-float-button-loading-bg-color);
+ }
+
+ .@{svg-prefix-cls} {
+ fill: var(--ti-float-button-info-text-color);
+ }
+
+ &.@{float-button-prefix-cls}--default {
+ border-radius: 100%;
+
+ .@{svg-prefix-cls} {
+ fill: var(--ti-float-button-normal-text-color);
+ }
+
+
+ }
+ }
+
+
+ &.is-icon {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &:not(.is-circle) {
+ .@{svg-prefix-cls}.is-text {
+ margin-right: var(--ti-float-button-text-has-svg-icon-margin-right);
+ }
+
+ &.is-loading {
+ .@{svg-prefix-cls} {
+ margin-right: 4px;
+ margin-top: 1px;
+ }
+ }
+ }
+
+ &.is-circle {
+ border-radius: 50%;
+ min-width: var(--ti-float-button-size-normal-height);
+ min-height: var(--ti-float-button-size-normal-height);
+ line-height: 1;
+ padding: var(--ti-float-button-size-normal-padding);
+
+ &.is-hide-boder {
+ border: none;
+ }
+ }
+
+ &.is-circle&--large {
+ .button-circle-size(var(--ti-float-button-size-large-height),
+ var(--ti-float-button-size-large-padding));
+ }
+
+ &.is-circle&--medium {
+ .button-circle-size(var(--ti-float-button-size-medium-height),
+ var(--ti-float-button-size-medium-padding));
+ }
+
+ &.is-circle&--small {
+ .button-circle-size(var(--ti-float-button-size-small-height),
+ var(--ti-float-button-size-small-padding));
+ }
+
+ &.is-circle&--mini {
+ .button-circle-size(var(--ti-float-button-size-mini-height),
+ var(--ti-float-button-size-mini-padding));
+ }
+
+ & .@{float-button-prefix-cls}--open {
+ color: var(--ti-float-button-normal-text-color);
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ }
+
+ &&--primary {
+ .button-type(var(--ti-float-button-primary-text-color),
+ var(--ti-float-button-primary-normal-bg-color),
+ var(--ti-float-button-primary-normal-border-color),
+ var(--ti-float-button-primary-hover-bg-color),
+ var(--ti-float-button-primary-hover-border-color),
+ var(--ti-float-button-primary-active-bg-color),
+ var(--ti-float-button-primary-disabled-text-color),
+ var(--ti-float-button-primary-disabled-bg-color),
+ var(--ti-float-button-primary-plain-text-color),
+ var(--ti-float-button-primary-plain-hover-text-color),
+ var(--ti-float-button-primary-plain-bg-color),
+ var(--ti-float-button-primary-plain-hover-bg-color),
+ var(--ti-float-button-primary-plain-border-color),
+ var(--ti-float-button-primary-plain-hover-border-color),
+ var(--ti-float-button-primary-plain-disabled-bg-color),
+ var(--ti-float-button-primary-disabled-border-color),
+ var(--ti-float-button-primary-ghost-text-color),
+ var(--ti-float-button-primary-ghost-hover-text-color),
+ var(--ti-float-button-primary-ghost-disabled-text-color),
+ var(--ti-float-button-primary-ghost-border-color),
+ var(--ti-float-button-primary-ghost-hover-border-color),
+ var(--ti-float-button-primary-ghost-disabled-border-color),
+ );
+ }
+
+ &&--success {
+ .button-type(var(--ti-float-button-success-text-color),
+ var(--ti-float-button-success-normal-bg-color),
+ var(--ti-float-button-success-normal-border-color),
+ var(--ti-float-button-success-hover-bg-color),
+ var(--ti-float-button-success-hover-border-color),
+ var(--ti-float-button-success-active-bg-color),
+ var(--ti-float-button-success-disabled-text-color),
+ var(--ti-float-button-success-disabled-bg-color),
+ var(--ti-float-button-success-plain-text-color),
+ var(--ti-float-button-success-plain-hover-text-color),
+ var(--ti-float-button-success-plain-bg-color),
+ var(--ti-float-button-success-plain-hover-bg-color),
+ var(--ti-float-button-success-plain-border-color),
+ var(--ti-float-button-success-plain-hover-border-color),
+ var(--ti-float-button-success-plain-disabled-bg-color),
+ var(--ti-float-button-success-disabled-border-color),
+ var(--ti-float-button-success-ghost-text-color),
+ var(--ti-float-button-success-ghost-hover-text-color),
+ var(--ti-float-button-success-ghost-disabled-text-color),
+ var(--ti-float-button-success-ghost-border-color),
+ var(--ti-float-button-success-ghost-hover-border-color),
+ var(--ti-float-button-success-ghost-disabled-border-color),
+ );
+ }
+
+ &&--warning {
+ .button-type(var(--ti-float-button-warning-text-color),
+ var(--ti-float-button-warning-normal-bg-color),
+ var(--ti-float-button-warning-normal-border-color),
+ var(--ti-float-button-warning-hover-bg-color),
+ var(--ti-float-button-warning-hover-border-color),
+ var(--ti-float-button-warning-active-bg-color),
+ var(--ti-float-button-warning-disabled-text-color),
+ var(--ti-float-button-warning-disabled-bg-color),
+ var(--ti-float-button-warning-plain-text-color),
+ var(--ti-float-button-warning-plain-hover-text-color),
+ var(--ti-float-button-warning-plain-bg-color),
+ var(--ti-float-button-warning-plain-hover-bg-color),
+ var(--ti-float-button-warning-plain-border-color),
+ var(--ti-float-button-warning-plain-hover-border-color),
+ var(--ti-float-button-warning-plain-disabled-bg-color),
+ var(--ti-float-button-warning-disabled-border-color),
+ var(--ti-float-button-warning-ghost-text-color),
+ var(--ti-float-button-warning-ghost-hover-text-color),
+ var(--ti-float-button-warning-ghost-disabled-text-color),
+ var(--ti-float-button-warning-ghost-border-color),
+ var(--ti-float-button-warning-ghost-hover-border-color),
+ var(--ti-float-button-warning-ghost-disabled-border-color),
+ );
+ }
+
+ &&--danger {
+ .button-type(var(--ti-float-button-danger-text-color),
+ var(--ti-float-button-danger-normal-bg-color),
+ var(--ti-float-button-danger-normal-border-color),
+ var(--ti-float-button-danger-hover-bg-color),
+ var(--ti-float-button-danger-hover-border-color),
+ var(--ti-float-button-danger-active-bg-color),
+ var(--ti-float-button-danger-disabled-text-color),
+ var(--ti-float-button-danger-disabled-bg-color),
+ var(--ti-float-button-danger-plain-text-color),
+ var(--ti-float-button-danger-plain-hover-text-color),
+ var(--ti-float-button-danger-plain-bg-color),
+ var(--ti-float-button-danger-plain-hover-bg-color),
+ var(--ti-float-button-danger-plain-border-color),
+ var(--ti-float-button-danger-plain-hover-border-color),
+ var(--ti-float-button-danger-plain-disabled-bg-color),
+ var(--ti-float-button-danger-disabled-border-color),
+ var(--ti-float-button-danger-ghost-text-color),
+ var(--ti-float-button-danger-ghost-hover-text-color),
+ var(--ti-float-button-danger-ghost-disabled-text-color),
+ var(--ti-float-button-danger-ghost-border-color),
+ var(--ti-float-button-danger-ghost-hover-border-color),
+ var(--ti-float-button-danger-ghost-disabled-border-color),
+ );
+ }
+
+ &&--info {
+ .button-type(var(--ti-float-button-info-text-color),
+ var(--ti-float-button-info-normal-bg-color),
+ var(--ti-float-button-info-normal-border-color),
+ var(--ti-float-button-info-hover-bg-color),
+ var(--ti-float-button-info-hover-border-color),
+ var(--ti-float-button-info-active-bg-color),
+ var(--ti-float-button-info-disabled-text-color),
+ var(--ti-float-button-info-disabled-bg-color),
+ var(--ti-float-button-info-plain-text-color),
+ var(--ti-float-button-info-plain-hover-text-color),
+ var(--ti-float-button-info-plain-bg-color),
+ var(--ti-float-button-info-plain-hover-bg-color),
+ var(--ti-float-button-info-plain-border-color),
+ var(--ti-float-button-info-plain-hover-border-color),
+ var(--ti-float-button-info-plain-disabled-bg-color),
+ var(--ti-float-button-info-disabled-border-color),
+ var(--ti-float-button-info-ghost-text-color),
+ var(--ti-float-button-info-ghost-hover-text-color),
+ var(--ti-float-button-info-ghost-disabled-text-color),
+ var(--ti-float-button-info-ghost-border-color),
+ var(--ti-float-button-info-ghost-hover-border-color),
+ var(--ti-float-button-info-ghost-disabled-border-color),
+ );
+ }
+
+ &&--text {
+ .button-text(var(--ti-float-button-text-color),
+ var(--ti-float-button-text-color-hover),
+ var(--ti-float-button-text-color-active),
+ var(--ti-float-button-text-color-disabled),
+ var(--ti-float-button-text-hover-weight),
+ );
+
+ &:hover {
+ text-decoration: var(--ti-float-button-text-hover-text-decoration);
+ }
+
+ &.is-disabled:hover {
+ text-decoration: none;
+ }
+
+ border-radius: var(--ti-float-button-text-hover-border-radius);
+
+ padding: 0 var(--ti-float-button-text-padding-horizontal);
+
+ &:has(.@{svg-prefix-cls}) {
+ padding: 0 var(--ti-float-button-text-svg-padding-horizontal);
+ color: var(--ti-float-button-text-has-svg-text-color);
+ }
+
+ &:has(.@{svg-prefix-cls}):hover {
+ background: var(--ti-float-button-text-hover-bg-color);
+ border-radius: var(--ti-float-button-text-hover-border-radius);
+ color: var(--ti-float-button-text-has-svg-hover-text-color);
+
+ & .@{svg-prefix-cls} {
+ fill: var(--ti-float-button-text-svg-hover-fill-color);
+ }
+ }
+
+ &:has(.@{svg-prefix-cls}).is-disabled {
+ background: transparent;
+ fill: var(--ti-float-button-text-svg-disabled-fill-color);
+ color: var(--ti-float-button-text-color-disabled);
+
+ & .@{svg-prefix-cls} {
+ fill: var(--ti-float-button-text-svg-disabled-fill-color);
+ }
+
+ &:hover {
+ fill: var(--ti-float-button-text-svg-disabled-fill-color);
+ background: transparent;
+ }
+ }
+
+ &.is-only-icon {
+ &:hover {
+ background: var(--ti-float-button-text-only-icon-hover-bg-color);
+ }
+ }
+
+ & .@{svg-prefix-cls} {
+ vertical-align: middle;
+ fill: var(--ti-float-button-text-svg-fill-color);
+ }
+
+ &.@{float-button-prefix-cls}.@{float-button-prefix-cls}--large {
+ .button-text-size(var(--ti-float-button-text-size-large-min-width),
+ var(--ti-float-button-text-size-large-height),
+ var(--ti-float-button-text-size-large-svg-width),
+ var(--ti-float-button-text-size-large-svg-height));
+ }
+
+ &.@{float-button-prefix-cls}.@{float-button-prefix-cls}--medium {
+ .button-text-size(var(--ti-float-button-text-size-medium-min-width),
+ var(--ti-float-button-text-size-medium-height),
+ var(--ti-float-button-text-size-medium-svg-width),
+ var(--ti-float-button-text-size-medium-svg-height));
+ }
+
+ &.@{float-button-prefix-cls} {
+ .button-text-size(var(--ti-float-button-text-size-default-min-width),
+ var(--ti-float-button-text-size-default-height),
+ var(--ti-float-button-text-size-default-svg-width),
+ var(--ti-float-button-text-size-default-svg-height));
+ }
+
+ &.@{float-button-prefix-cls}.@{float-button-prefix-cls}--small {
+ .button-text-size(var(--ti-float-button-text-size-small-min-width),
+ var(--ti-float-button-text-size-small-height),
+ var(--ti-float-button-text-size-small-svg-width),
+ var(--ti-float-button-text-size-small-svg-height));
+ }
+
+ &.@{float-button-prefix-cls}.@{float-button-prefix-cls}--mini {
+ .button-text-size(var(--ti-float-button-text-size-mini-min-width),
+ var(--ti-float-button-text-size-mini-height),
+ var(--ti-float-button-text-size-mini-svg-width),
+ var(--ti-float-button-text-size-mini-svg-height));
+ }
+ }
+
+ &&--large {
+ .button-size(var(--ti-float-button-size-large-font-size),
+ var(--ti-float-button-size-large-height),
+ var(--ti-float-button-size-large-padding-horizontal),
+ var(--ti-float-button-size-large-min-width),
+ );
+
+ &+& {
+ margin-left: var(--ti-float-button-size-large-margin-left);
+ }
+ }
+
+ &&--medium {
+ .button-size(var(--ti-float-button-size-medium-font-size),
+ var(--ti-float-button-size-medium-height),
+ var(--ti-float-button-size-medium-padding-horizontal),
+ var(--ti-float-button-size-medium-min-width),
+ );
+
+ &+& {
+ margin-left: var(--ti-float-button-size-medium-margin-left);
+ }
+ }
+
+ &&--small {
+ .button-size(var(--ti-float-button-size-small-font-size),
+ var(--ti-float-button-size-small-height),
+ var(--ti-float-button-size-small-padding-horizontal),
+ var(--ti-float-button-size-small-min-width),
+ );
+
+ &+& {
+ margin-left: var(--ti-float-button-size-small-margin-left);
+ }
+ }
+
+ &&--mini {
+ .button-size(var(--ti-float-button-size-mini-font-size),
+ var(--ti-float-button-size-mini-height),
+ var(--ti-float-button-size-mini-padding-horizontal),
+ var(--ti-float-button-size-mini-min-width),
+ );
+ }
+}
+
+.@{css-prefix-iconfont}-loading {
+ font-size: var(--ti-common-font-size-1);
+ line-height: 1;
+ animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+ 0% {
+ transform: rotateZ(0deg);
+ }
+
+ 100% {
+ transform: rotateZ(360deg);
+ }
+}
\ No newline at end of file
diff --git a/packages/theme/src/float-button/smb-theme.js b/packages/theme/src/float-button/smb-theme.js
new file mode 100644
index 000000000..e52ac20d4
--- /dev/null
+++ b/packages/theme/src/float-button/smb-theme.js
@@ -0,0 +1 @@
+export const tinyFloatButtonSmbTheme = {}
diff --git a/packages/theme/src/float-button/vars.less b/packages/theme/src/float-button/vars.less
new file mode 100644
index 000000000..e8d191d04
--- /dev/null
+++ b/packages/theme/src/float-button/vars.less
@@ -0,0 +1,445 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-float-button() {
+ // 按钮圆角
+ --ti-float-button-border-radius: var(--ti-common-border-radius-normal, 2px);
+ // 按钮字号
+ --ti-float-button-font-size: var(--ti-common-font-size-base, 12px);
+ // 朴素类按钮禁用文本色(非默认)
+ --ti-float-button-plain-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 按钮边框尺寸
+ --ti-float-button-border-width: var(--ti-common-border-weight-normal, 1px);
+ // 按钮边框样式
+ --ti-float-button-border-style: var(--ti-common-border-style-solid, solid);
+ // 按钮加载时背景色
+ --ti-float-button-loading-bg-color: rgba(255, 255, 255, 0.35);
+
+ // 默认按钮最小宽度
+ --ti-float-button-size-normal-min-width: 20px;
+ // 默认按钮最大宽度
+ --ti-float-button-size-normal-max-width: 80px;
+ // 默认按钮的高度
+ --ti-float-button-size-normal-height: var(--ti-common-size-height-normal, 28px);
+ // 默认按钮水平内边距
+ --ti-float-button-size-normal-padding-horizontal: var(--ti-common-size-5x, 20px);
+
+ // 超大按钮高度
+ --ti-float-button-size-large-height: var(--ti-common-size-height-large, 48px);
+ // 超大按钮字号
+ --ti-float-button-size-large-font-size: var(--ti-common-font-size-2, 16px);
+ // 超大按钮水平内边距
+ --ti-float-button-size-large-padding-horizontal: var(--ti-common-size-8x, 32px);
+ // 超大按钮最小宽度
+ --ti-float-button-size-large-min-width: var(--ti-common-size-20x, 80px);
+ // 超大按钮左侧外边距
+ --ti-float-button-size-large-margin-left: 8px;
+
+ // 中等按钮高度
+ --ti-float-button-size-medium-height: var(--ti-common-size-height-medium, 40px);
+ // 中等按钮字号
+ --ti-float-button-size-medium-font-size: var(--ti-common-font-size-1, 14px);
+ // 中等按钮水平内边距
+ --ti-float-button-size-medium-padding-horizontal: var(--ti-common-size-7x, 28px);
+ // 中等按钮最小宽度
+ --ti-float-button-size-medium-min-width: var(--ti-common-size-12x, 48px);
+ // 中等按钮左侧外边距
+ --ti-float-button-size-medium-margin-left: 8px;
+
+ // 小型按钮高度
+ --ti-float-button-size-small-height: var(--ti-common-size-height-small, 32px);
+ // 小型按钮字号
+ --ti-float-button-size-small-font-size: var(--ti-common-font-size-1, 14px);
+ // 小尺寸按钮水平内边距
+ --ti-float-button-size-small-padding-horizontal: var(--ti-common-size-3x, 12px);
+ // 小尺寸按钮最小宽度
+ --ti-float-button-size-small-min-width: var(--ti-common-size-7x, 28px);
+ // 小尺寸按钮左侧外边距
+ --ti-float-button-size-small-margin-left: 8px;
+
+ // 迷你尺寸按钮高度
+ --ti-float-button-size-mini-height: var(--ti-common-size-height-mini, 24px);
+ // 迷你尺寸按钮字号
+ --ti-float-button-size-mini-font-size: var(--ti-common-font-size-base, 12px);
+ // 迷你尺寸按钮水平内边距
+ --ti-float-button-size-mini-padding-horizontal: var(--ti-common-size-2x, 8px);
+ // 迷你尺寸按钮最小宽度
+ --ti-float-button-size-mini-min-width: var(--ti-common-size-5x, 20px);
+
+ // 默认按钮文本色
+ --ti-float-button-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
+ // 默认按钮边框色
+ --ti-float-button-normal-border-color: var(--ti-common-color-border, #adb0b8);
+ // 默认按钮背景色
+ --ti-float-button-normal-background-color: var(--ti-common-color-light, #fff);
+ // 默认按钮悬浮文本色
+ --ti-float-button-normal-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 默认按钮悬浮边框色
+ --ti-float-button-normal-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 默认按钮悬浮背景色
+ --ti-float-button-normal-hover-bg-color: var(--ti-common-color-light, #fff);
+ // 默认按钮点击瞬间文本色
+ --ti-float-button-normal-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 默认按钮点击瞬间边框色
+ --ti-float-button-normal-active-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 默认按钮点击瞬间背景色
+ --ti-float-button-normal-active-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
+ // 默认按钮禁用文本色
+ --ti-float-button-normal-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 默认按钮禁用边框色
+ --ti-float-button-normal-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
+ // 禁用类默认按钮背景色
+ --ti-float-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
+
+ // 文字按钮文本色
+ --ti-float-button-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 文字按钮悬浮文本修饰(hide)
+ --ti-float-button-text-hover-text-decoration: none;
+ // 文字按钮悬浮文本色
+ --ti-float-button-text-color-hover: var(--ti-common-color-text-link-hover, #344899);
+ // 文字按钮悬浮文本字重
+ --ti-float-button-text-hover-weight: var(--ti-common-font-weight-4, normal);
+ // 文字按钮点击瞬间文本色
+ --ti-float-button-text-color-active: var(--ti-common-color-primary-active, #7693f5);
+ // 文字按钮禁用文本色
+ --ti-float-button-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
+ // 文字按钮图标宽度
+ --ti-float-button-text-svg-width: 1em;
+ // 文字按钮图标高度
+ --ti-float-button-text-svg-height: 1em;
+ // 文字按钮悬浮背景色
+ --ti-float-button-text-hover-bg-color: transparent;
+ // 文字按钮只有图标悬浮背景色
+ --ti-float-button-text-only-icon-hover-bg-color: transparent;
+ // 文字按钮悬浮圆角
+ --ti-float-button-text-hover-border-radius: 0px;
+ // 文字按钮图标填充色
+ --ti-float-button-text-svg-fill-color: var(--ti-common-color-text-secondary, #575d6c);
+ // 文字按钮图标悬浮填充色
+ --ti-float-button-text-svg-hover-fill-color: var(--ti-float-button-text-color-hover);
+ // 文字按钮禁用时图标填充色
+ --ti-float-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 图标加文字按钮图标右侧外边距
+ --ti-float-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x, 8px);
+ // 图标加文字按钮字体颜色
+ --ti-float-button-text-has-svg-text-color: var(--ti-common-color-text-primary, #252b3a);
+ // 图标加文字按钮悬浮时字体颜色
+ --ti-float-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc);
+ // 文字按钮只有svg时水平内边距
+ --ti-float-button-text-svg-padding-horizontal: var(--ti-common-size-2x, 8px);
+
+ // 主要按钮的主题类背景色+朴素类文本边框色
+ --ti-float-button-primary-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 主要按钮的主题类边框色
+ --ti-float-button-primary-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 主题类主要按钮悬浮背景色
+ --ti-float-button-primary-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
+ // 主题类主要按钮悬浮边框色
+ --ti-float-button-primary-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
+ // 主要按钮点击瞬间背景色
+ --ti-float-button-primary-active-bg-color: var(--ti-common-color-primary-active, #7693f5);
+ // 主要按钮的禁用主题类背景色+禁用朴素类边框色
+ --ti-float-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6);
+ // 主题类主要按钮文本色
+ --ti-float-button-primary-text-color: var(--ti-common-color-light, #fff);
+ // 禁用主题类主要按钮文本色
+ --ti-float-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8);
+ // 禁用主题类主要按钮边框色
+ --ti-float-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border, #dfe1e6);
+ // 朴素类主要按钮文本色
+ --ti-float-button-primary-plain-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 朴素类主要按钮悬浮文本色
+ --ti-float-button-primary-plain-hover-text-color: var(--ti-common-color-light, #fff);
+ // 朴素类主要按钮背景色
+ --ti-float-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
+ // 朴素类主要按钮悬浮背景色
+ --ti-float-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 朴素类主要按钮边框色
+ --ti-float-button-primary-plain-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 朴素类主要按钮悬浮边框色
+ --ti-float-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 禁用朴素类主要按钮背景色
+ --ti-float-button-primary-plain-disabled-bg-color: var(--ti-common-color-primary-plain-disabled-bg-color,
+ rgba(191, 191, 191, 0.1));
+
+ // 成功按钮的主题类背景色+朴素类文本边框色
+ --ti-float-button-success-normal-bg-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 成功按钮的主题类边框色
+ --ti-float-button-success-normal-border-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 成功按钮悬浮背景色
+ --ti-float-button-success-hover-bg-color: var(--ti-common-color-success-hover, #acf2dc);
+ // 成功按钮悬浮边框色
+ --ti-float-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc);
+ // 成功按钮点击瞬间背景色
+ --ti-float-button-success-active-bg-color: var(--ti-common-color-success-active, #acf2dc);
+ // 成功按钮的禁用主题类背景色+禁用朴素类边框色
+ --ti-float-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor, #f5f5f6);
+ // 成功按钮文本色
+ --ti-float-button-success-text-color: var(--ti-common-color-light, #fff);
+ // 禁用主题类成功按钮文本色
+ --ti-float-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text, #adb0b8);
+ // 禁用主题类成功按钮边框色
+ --ti-float-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border, #dfe1e6);
+ // 朴素类成功按钮文本色
+ --ti-float-button-success-plain-text-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 朴素类成功按钮悬浮文本色
+ --ti-float-button-success-plain-hover-text-color: var(--ti-common-color-light, #fff);
+ // 朴素类成功按钮背景色
+ --ti-float-button-success-plain-bg-color: var(--ti-common-color-success-bg, #edfff9);
+ // 朴素类成功按钮悬浮背景色
+ --ti-float-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 朴素类成功按钮边框色
+ --ti-float-button-success-plain-border-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 朴素类成功按钮悬浮边框色
+ --ti-float-button-success-plain-hover-border-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 禁用朴素类成功按钮背景色
+ --ti-float-button-success-plain-disabled-bg-color: var(--ti-common-color-success-plain-disabled-bg-color,
+ rgba(166, 195, 185, 0.1));
+
+ // 警告按钮背景色|朴素类警告按钮悬浮背景色
+ --ti-float-button-warning-normal-bg-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 警告按钮的主题类边框色
+ --ti-float-button-warning-normal-border-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 警告按钮悬浮背景色
+ --ti-float-button-warning-hover-bg-color: var(--ti-common-color-warning-hover, #fac20a);
+ // 警告按钮点击瞬间背景色
+ --ti-float-button-warning-active-bg-color: var(--ti-common-color-warning-active, #fac20a);
+ // 警告按钮的禁用主题类背景色+禁用朴素类边框色
+ --ti-float-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor, #f5f5f6);
+ // 警告按钮文本色
+ --ti-float-button-warning-text-color: var(--ti-common-color-light, #fff);
+ // 禁用警告按钮文本色
+ --ti-float-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text, #adb0b8);
+ // 禁用主题类警告按钮边框色
+ --ti-float-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border, #dfe1e6);
+ // 朴素类主要按钮文本色
+ --ti-float-button-warning-plain-text-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 朴素类主要按钮悬浮文本色
+ --ti-float-button-warning-plain-hover-text-color: var(--ti-common-color-light, #fff);
+ // 朴素类警告按钮背景色
+ --ti-float-button-warning-plain-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
+ // 朴素类警告按钮悬浮背景色
+ --ti-float-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 朴素类警告按钮边框色
+ --ti-float-button-warning-plain-border-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 朴素类警告按钮悬浮边框色
+ --ti-float-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 禁用朴素类警告按钮背景色
+ --ti-float-button-warning-plain-disabled-bg-color: var(--ti-common-color-warning-plain-disabled-bg-color,
+ rgba(211, 198, 162, 0.1));
+
+ // 危险按钮默认背景色|朴素类危险按钮边框色
+ --ti-float-button-danger-normal-bg-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 危险按钮的主题类边框色
+ --ti-float-button-danger-normal-border-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 危险按钮悬浮背景色
+ --ti-float-button-danger-hover-bg-color: var(--ti-common-color-danger-hover, #d64a52);
+ // 危险按钮悬浮边框色
+ --ti-float-button-danger-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
+ // 危险按钮点击瞬间背景色
+ --ti-float-button-danger-active-bg-color: var(--ti-common-color-danger-active, #b12220);
+ // 危险按钮的禁用主题类背景色+禁用朴素类边框色
+ --ti-float-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
+ // 危险按钮文本色
+ --ti-float-button-danger-text-color: var(--ti-common-color-light, #fff);
+ // 禁用主题类危险按钮文本色
+ --ti-float-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text, #adb0b8);
+ // 禁用主题类危险按钮边框色
+ --ti-float-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border, #dfe1e6);
+ // 朴素类危险按钮文本色
+ --ti-float-button-danger-plain-text-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 朴素类危险按钮悬浮文本色
+ --ti-float-button-danger-plain-hover-text-color: var(--ti-common-color-light, #fff);
+ // 朴素类危险按钮背景色
+ --ti-float-button-danger-plain-bg-color: var(--ti-common-color-error-bg, #ffeeed);
+ // 朴素类危险按钮悬浮背景色
+ --ti-float-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 朴素类危险按钮边框色
+ --ti-float-button-danger-plain-border-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 朴素类危险按钮悬浮边框色
+ --ti-float-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 禁用朴素类危险按钮背景色
+ --ti-float-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
+ // 禁用朴素类危险按钮边框色
+ --ti-float-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
+
+ // 信息按钮背景色|朴素类信息按钮边框色
+ --ti-float-button-info-normal-bg-color: var(--ti-common-color-info-normal, #252b3a);
+ // 信息按钮的主题类边框色
+ --ti-float-button-info-normal-border-color: var(--ti-common-color-info-normal, #252b3a);
+ // 信息按钮悬浮背景色
+ --ti-float-button-info-hover-bg-color: var(--ti-common-color-info-hover, #5c6173);
+ // 信息按钮悬浮边框色
+ --ti-float-button-info-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
+ // 信息按钮点击瞬间背景色
+ --ti-float-button-info-active-bg-color: var(--ti-common-color-info-active, #5c6173);
+ // 信息按钮的禁用主题类背景色+禁用朴素类边框色
+ --ti-float-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor, #f5f5f6);
+ // 信息按钮文本色
+ --ti-float-button-info-text-color: var(--ti-common-color-light, #fff);
+ // 禁用信息按钮文本色
+ --ti-float-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text, #adb0b8);
+ // 禁用信息按钮边框色
+ --ti-float-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border, #dfe1e6);
+ // 朴素类信息按钮文本色
+ --ti-float-button-info-plain-text-color: var(--ti-common-color-info-normal, #252b3a);
+ // 朴素类信息按钮悬浮文本色
+ --ti-float-button-info-plain-hover-text-color: var(--ti-common-color-light, #fff);
+ // 朴素类信息按钮背景色
+ --ti-float-button-info-plain-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
+ // 朴素类信息按钮悬浮背景色
+ --ti-float-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal, #252b3a);
+ // 朴素类信息按钮边框色
+ --ti-float-button-info-plain-border-color: var(--ti-common-color-info-normal, #252b3a);
+ // 朴素类信息按钮悬浮边框色
+ --ti-float-button-info-plain-hover-border-color: var(--ti-common-color-info-normal, #252b3a);
+ // 禁用朴素类信息按钮背景色
+ --ti-float-button-info-plain-disabled-bg-color: var(--ti-common-color-info-plain-disabled-bg-color,
+ rgba(191, 191, 191, 0.1));
+
+ // 默认类型幽灵按钮文本色
+ --ti-float-button-ghost-text-color: var(--ti-common-color-text-primary, #252b3a);
+ // 默认类型幽灵按钮边框色
+ --ti-float-button-ghost-border-color: var(--ti-common-color-border, #adb0b8);
+ // 默认类型幽灵按钮悬浮文本色
+ --ti-float-button-ghost-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 默认类型幽灵按钮悬浮边框色
+ --ti-float-button-ghost-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 默认类型幽灵按钮禁用文本色
+ --ti-float-button-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 默认类型幽灵按钮禁用边框色
+ --ti-float-button-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 主要类型幽灵按钮文本色
+ --ti-float-button-primary-ghost-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 主要类型幽灵按钮边框色
+ --ti-float-button-primary-ghost-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 主要类型幽灵按钮悬浮文本色
+ --ti-float-button-primary-ghost-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
+ // 主要类型幽灵按钮悬浮边框色
+ --ti-float-button-primary-ghost-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
+ // 主要类型幽灵按钮禁用文本色
+ --ti-float-button-primary-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 主要类型幽灵按钮禁用边框色
+ --ti-float-button-primary-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 成功类型幽灵按钮文本色
+ --ti-float-button-success-ghost-text-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 成功类型幽灵按钮边框色
+ --ti-float-button-success-ghost-border-color: var(--ti-common-color-success-normal, #50d4ab);
+ // 成功类型幽灵按钮悬浮文本色
+ --ti-float-button-success-ghost-hover-text-color: var(--ti-common-color-success-active, #acf2dc);
+ // 成功类型幽灵按钮悬浮边框色
+ --ti-float-button-success-ghost-hover-border-color: var(--ti-common-color-success-active, #acf2dc);
+ // 成功类型幽灵按钮禁用文本色
+ --ti-float-button-success-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 成功类型幽灵按钮禁用边框色
+ --ti-float-button-success-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 信息类型幽灵按钮文本色
+ --ti-float-button-info-ghost-text-color: var(--ti-common-color-info-normal, #252b3a);
+ // 信息类型幽灵按钮边框色
+ --ti-float-button-info-ghost-border-color: var(--ti-common-color-info-normal, #252b3a);
+ // 信息类型幽灵按钮悬浮文本色
+ --ti-float-button-info-ghost-hover-text-color: var(--ti-common-color-info-hover, #5c6173);
+ // 信息类型幽灵按钮悬浮边框色
+ --ti-float-button-info-ghost-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
+ // 信息类型幽灵按钮禁用文本色
+ --ti-float-button-info-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 信息类型幽灵按钮禁用边框色
+ --ti-float-button-info-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 告警类型幽灵按钮文本色
+ --ti-float-button-warning-ghost-text-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 告警类型幽灵按钮边框色
+ --ti-float-button-warning-ghost-border-color: var(--ti-common-color-warning-normal, #fa9841);
+ // 告警类型幽灵按钮悬浮文本色
+ --ti-float-button-warning-ghost-hover-text-color: var(--ti-common-color-warning-active, #fac20a);
+ // 告警类型幽灵按钮悬浮边框色
+ --ti-float-button-warning-ghost-hover-border-color: var(--ti-common-color-warning-active, #fac20a);
+ // 告警类型幽灵按钮禁用文本色
+ --ti-float-button-warning-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 告警类型幽灵按钮禁用边框色
+ --ti-float-button-warning-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 危险类型幽灵按钮文本色
+ --ti-float-button-danger-ghost-text-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 危险类型幽灵按钮边框色
+ --ti-float-button-danger-ghost-border-color: var(--ti-common-color-danger-normal, #c7000b);
+ // 危险类型幽灵按钮悬浮文本色
+ --ti-float-button-danger-ghost-hover-text-color: var(--ti-common-color-danger-hover, #d64a52);
+ // 危险类型幽灵按钮悬浮边框色
+ --ti-float-button-danger-ghost-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
+ // 危险类型幽灵按钮禁用文本色
+ --ti-float-button-danger-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+ // 危险类型幽灵按钮禁用边框色
+ --ti-float-button-danger-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
+
+ // 按钮垂直内边距
+ --ti-float-button-padding-vertical: var(--ti-common-space-0, 0px);
+ // 默认圆形按钮内边距
+ --ti-float-button-size-normal-padding: var(--ti-common-space-2x, 8px);
+
+ // 纯文本按钮超大尺寸最小宽度
+ --ti-float-button-text-size-large-min-width: var(--ti-common-size-24x, 96px);
+ // 纯文本按钮超大尺寸高度
+ --ti-float-button-text-size-large-height: var(--ti-common-size-height-large, 48px);
+ // 纯文本按钮超大尺寸图标宽度
+ --ti-float-button-text-size-large-svg-width: 1em;
+ // 纯文本按钮超大尺寸图标高度
+ --ti-float-button-text-size-large-svg-height: 1em;
+ // 纯文本按钮水平内边距
+ --ti-float-button-text-padding-horizontal: var(--ti-common-space-0, 0px);
+ // 纯文本按钮中等尺寸最小宽度
+ --ti-float-button-text-size-medium-min-width: var(--ti-common-size-22x, 88px);
+ // 纯文本按钮中等尺寸高度
+ --ti-float-button-text-size-medium-height: var(--ti-common-size-height-medium, 40px);
+ // 纯文本按钮中等尺寸图标宽度
+ --ti-float-button-text-size-medium-svg-width: 1em;
+ // 纯文本按钮中等尺寸图标高度
+ --ti-float-button-text-size-medium-svg-height: 1em;
+
+ // 纯文本按钮默认尺寸最小宽度
+ --ti-float-button-text-size-default-min-width: var(--ti-common-size-20x, 80px);
+ // 纯文本按钮默认尺寸高度
+ --ti-float-button-text-size-default-height: var(--ti-common-size-height-normal, 28px);
+ // 纯文本按钮默认尺寸图标宽度
+ --ti-float-button-text-size-default-svg-width: 1em;
+ // 纯文本按钮默认尺寸图标高度
+ --ti-float-button-text-size-default-svg-height: 1em;
+
+ // 纯文本按钮小尺寸最小宽度
+ --ti-float-button-text-size-small-min-width: var(--ti-common-size-18x, 72px);
+ // 纯文本按钮小尺寸高度
+ --ti-float-button-text-size-small-height: var(--ti-common-size-height-small, 32px);
+ // 纯文本按钮小尺寸图标宽度
+ --ti-float-button-text-size-small-svg-width: 1em;
+ // 纯文本按钮小尺寸图标高度
+ --ti-float-button-text-size-small-svg-height: 1em;
+
+ // 纯文本按钮迷你尺寸最小宽度
+ --ti-float-button-text-size-mini-min-width: var(--ti-common-size-16x, 64px);
+ // 纯文本按钮迷你尺寸高度
+ --ti-float-button-text-size-mini-height: var(--ti-common-size-height-mini, 24px);
+ // 纯文本按钮迷你尺寸图标宽度
+ --ti-float-button-text-size-mini-svg-width: 1em;
+ // 纯文本按钮迷你尺寸图标高度
+ --ti-float-button-text-size-mini-svg-height: 1em;
+
+ // 纯图标按钮最小宽度
+ --ti-float-button-only-icon-min-width: unset;
+ // 纯图标按钮水平内边距
+ --ti-float-button-only-icon-padding-horizontal: 7px;
+ // 纯图标按钮边框圆角
+ --ti-float-button-only-icon-border-radius: 2px;
+ // 纯图标按钮边框颜色
+ --ti-float-button-only-icon-border-color: var(--ti-common-color-border, #adb0b8);
+ // 纯图标按钮悬浮时边框颜色
+ --ti-float-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+ // 纯图标按钮禁用时边框颜色
+ --ti-float-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
+}
\ No newline at end of file
diff --git a/packages/vue/package.json b/packages/vue/package.json
index e19300b18..7b5c65efd 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -152,6 +152,7 @@
"@opentiny/vue-filter-bar": "workspace:~",
"@opentiny/vue-filter-box": "workspace:~",
"@opentiny/vue-filter-panel": "workspace:~",
+ "@opentiny/vue-float-button": "workspace:~",
"@opentiny/vue-floatbar": "workspace:~",
"@opentiny/vue-floating-button": "workspace:~",
"@opentiny/vue-flowchart": "workspace:~",
diff --git a/packages/vue/src/float-button/index.ts b/packages/vue/src/float-button/index.ts
new file mode 100644
index 000000000..93c432dc9
--- /dev/null
+++ b/packages/vue/src/float-button/index.ts
@@ -0,0 +1,18 @@
+import FloatButton from './src/index'
+import { version } from './package.json'
+
+/* istanbul ignore next */
+FloatButton.install = function (Vue) {
+ Vue.component(FloatButton.name, FloatButton)
+}
+
+FloatButton.version = version
+
+/* istanbul ignore next */
+if (process.env.BUILD_TARGET === 'runtime') {
+ if (typeof window !== 'undefined' && window.Vue) {
+ FloatButton.install(window.Vue)
+ }
+}
+
+export default FloatButton
diff --git a/packages/vue/src/float-button/package.json b/packages/vue/src/float-button/package.json
new file mode 100644
index 000000000..6c004df70
--- /dev/null
+++ b/packages/vue/src/float-button/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@opentiny/vue-float-button",
+ "version": "3.7.0",
+ "description": "",
+ "main": "lib/index.js",
+ "module": "index.ts",
+ "sideEffects": false,
+ "type": "module",
+ "devDependencies": {
+ "@opentiny-internal/vue-test-utils": "workspace:*",
+ "vitest": "^0.31.0"
+ },
+ "scripts": {
+ "build": "pnpm -w build:ui $npm_package_name",
+ "//postversion": "pnpm build"
+ },
+ "dependencies": {
+ "@opentiny/vue-common": "workspace:~",
+ "@opentiny/vue-icon": "workspace:~",
+ "@opentiny/vue-renderless": "workspace:~"
+ },
+ "license": "MIT"
+}
\ No newline at end of file
diff --git a/packages/vue/src/float-button/src/index.ts b/packages/vue/src/float-button/src/index.ts
new file mode 100644
index 000000000..e7d0037c6
--- /dev/null
+++ b/packages/vue/src/float-button/src/index.ts
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc'
+
+export const floatButtonProps = {
+ ...$props,
+ trigger: {
+ default: 'click',
+ type: String,
+ validator(val: string) {
+ return ['click', 'hover', ''].includes(val)
+ }
+ },
+ open: Boolean,
+ shape: {
+ type: String,
+ default: 'circle',
+ validator(val: string) {
+ return ['circle', 'square'].includes(val)
+ }
+ },
+ top: {
+ type: String,
+ default: ''
+ },
+ bottom: {
+ type: String,
+ default: '20px'
+ },
+ right: {
+ type: String,
+ default: '20px'
+ },
+ left: {
+ type: String,
+ default: ''
+ },
+
+ href: {
+ type: String,
+ default: ''
+ },
+ target: {
+ type: String,
+ default: ''
+ },
+
+ type: {
+ type: String,
+ default: 'default'
+ },
+ icon: {
+ type: [Object, String],
+ default: ''
+ },
+ description: {
+ type: String,
+ default: ''
+ },
+ tooltip: {
+ type: String,
+ default: ''
+ },
+ resetTime: {
+ type: Number,
+ default: 1000
+ },
+
+ size: {
+ type: String,
+ default: '',
+ validator(val: string) {
+ return ['large', 'medium', 'small', 'mini', ''].includes(val)
+ }
+ },
+ loading: Boolean,
+ disabled: Boolean,
+ backTop: Boolean,
+ // 以下属性只有backTop设置为true才生效
+ // 滚动高度达到此参数值才出现悬浮按钮
+ visibilityHeight: {
+ default: 400,
+ type: Number
+ },
+ // 设置需要监听其滚动事件的元素
+ element: {
+ default: document.body,
+ type: HTMLElement
+ }
+}
+
+export default defineComponent({
+ name: $prefix + 'FloatButton',
+ inject: {
+ buttonGroup: {
+ default: ''
+ }
+ },
+ props: floatButtonProps,
+ setup(props, context) {
+ return $setup({ props, context, template })
+ }
+})
diff --git a/packages/vue/src/float-button/src/pc.vue b/packages/vue/src/float-button/src/pc.vue
new file mode 100644
index 000000000..ba0b117a3
--- /dev/null
+++ b/packages/vue/src/float-button/src/pc.vue
@@ -0,0 +1,68 @@
+
+
+ {{ description }}
+
+
+
+
+
+
+