antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
128 lines (122 loc) • 2.52 kB
text/typescript
import { IBaseProps } from '../_util/base';
export interface PopoverListItem {
/**
* @description 菜单的icon
*/
icon: string;
/**
* @description 菜单的icon的图片, 优先取iconImage 没有再取icon字段
* @default ''
*/
iconImage: string;
/**
* @description 菜单项的文案,如果没有则不展示该菜单
* @default ''
*/
text: string;
/**
* @description 菜单项是否展示红点徽标
* @default false
*/
showBadge: boolean;
/**
* @description 菜单项的唯一标识
* @default ''
*/
id: string;
}
/**
* @description 气泡,内部配合 PopoverItem 使用。
*/
export interface IPopoverListProps extends IBaseProps {
/**
* @description 是否可见
* @default false
*/
visible: boolean;
/**
* @description 默认是否可见
* @default false
*/
defaultVisible: boolean;
/**
* @description 是否关闭后销毁内部元素
* @default false
*/
destroyOnClose: boolean;
/**
* @description content区样式
*/
contentStyle: string;
/**
* @description content类名
*/
contentClassName: string;
/**
* @description content 内容
*/
content?: string;
/**
* @description 蒙层类名
*/
maskClassName: string;
/**
* @description 蒙层样式
*/
maskStyle: string;
/**
* @description visible 变更时回调
*/
onVisibleChange?: (visible: boolean, e: Record<string, any>) => void;
/**
* @description 点击列表项
*/
onTapItem?: (item: PopoverListItem, e: Record<string, any>) => void;
/**
* @description 气泡框位置
*/
placement:
| 'top'
| 'top-right'
| 'top-left'
| 'bottom'
| 'bottom-left'
| 'bottom-right'
| 'left'
| 'left-top'
| 'left-bottom'
| 'right'
| 'right-top'
| 'right-bottom';
/**
* @description 是否展示蒙层
* @default false
*/
showMask: boolean;
/**
* @description 气泡被遮挡时自动调整位置
* @default true
*/
autoAdjustOverflow: boolean;
/**
* @description 菜单列表数据
* @default []
*/
list: PopoverListItem[];
}
export const PopoverDefaultProps: Partial<IPopoverListProps> = {
visible: null,
defaultVisible: false,
destroyOnClose: false,
contentClassName: '',
contentStyle: '',
showMask: true,
placement: 'top',
autoAdjustOverflow: true,
maskClassName: '',
maskStyle: '',
content: '',
list: [],
onVisibleChange() {},
onTapItem() {},
};