HIsheR
23 lines
1.1 KiB
TypeScript
23 lines
1.1 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { FloatButtonProps } from './types.js';
|
|
|
|
/*** 悬浮操作按钮：固定停靠左下 / 右下角，label 缺省为纯图标圆形；返回 fixed 包裹层，挂 body 才不被父级 overflow 裁剪 ***/
|
|
export function floatButton(props: FloatButtonProps): HTMLElement {
|
|
const cls = ['ua-fab', props.label ? 'has-label' : ''].filter(Boolean).join(' ');
|
|
const btn = h('button', {
|
|
class: cls,
|
|
type: 'button',
|
|
'aria-label': props.tooltip ?? props.label ?? '快捷操作', // 纯图标时必须有可读名称
|
|
title: props.tooltip ?? null,
|
|
},
|
|
props.icon ? h('span', { class: 'ua-fab-icon', 'aria-hidden': 'true' }, props.icon) : null,
|
|
props.label ? h('span', { class: 'ua-fab-label' }, props.label) : null,
|
|
props.badge != null ? h('span', { class: 'ua-fab-badge' }, String(props.badge)) : null);
|
|
if (props.onClick) btn.addEventListener('click', props.onClick);
|
|
const offset = `${props.offset ?? 24}px`; // 缺省离边 24px，与常见浮动件手感一致
|
|
return h('div', {
|
|
class: `ua-fab-wrap is-${props.position ?? 'right-bottom'}`,
|
|
style: `--ua-fab-offset:${offset}`,
|
|
}, btn);
|
|
}
|