🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

36 lines
1.1 KiB

import { defineComponent } from 'vue';
import FileTextOutlined from '@ant-design/icons-vue/FileTextOutlined';
import { floatButtonContentProps } from './interface';
import { filterEmpty } from '../_util/props-util';
const FloatButtonContent = defineComponent({
compatConfig: { MODE: 3 },
name: 'AFloatButtonContent',
inheritAttrs: false,
props: floatButtonContentProps(),
setup(props, { attrs, slots }) {
return () => {
const { prefixCls } = props;
const description = filterEmpty(slots.description?.());
return (
<div {...attrs} class={[attrs.class, `${prefixCls}-content`]}>
{slots.icon || description.length ? (
<>
{slots.icon && <div class={`${prefixCls}-icon`}>{slots.icon()}</div>}
{description.length ? (
<div class={`${prefixCls}-description`}>{description}</div>
) : null}
</>
) : (
<div class={`${prefixCls}-icon`}>
<FileTextOutlined />
</div>
)}
</div>
);
};
},
});
export default FloatButtonContent;