123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <script setup lang="tsx">
- import { BulbOutlined, InfoCircleOutlined, RocketOutlined, SmileOutlined, WarningOutlined } from '@ant-design/icons-vue';
- import { App } from 'ant-design-vue';
- import { Prompts, type PromptsProps } from 'ant-design-x-vue';
- defineOptions({ name: 'AXPromptsBasic' });
- const items: PromptsProps['items'] = [
- {
- key: '1',
- icon: <BulbOutlined style={{ color: '#FFD700' }} />,
- label: 'Ignite Your Creativity',
- description: 'Got any sparks for a new project?',
- },
- {
- key: '2',
- icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
- label: 'Uncover Background Info',
- description: 'Help me understand the background of this topic.',
- },
- {
- key: '3',
- icon: <RocketOutlined style={{ color: '#722ED1' }} />,
- label: 'Efficiency Boost Battle',
- description: 'How can I work faster and better?',
- },
- {
- key: '4',
- icon: <SmileOutlined style={{ color: '#52C41A' }} />,
- label: 'Tell me a Joke',
- description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
- },
- {
- key: '5',
- icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
- label: 'Common Issue Solutions',
- description: 'How to solve common issues? Share some tips!',
- },
- ];
- const Demo = () => {
- const { message } = App.useApp();
- return (
- <Prompts
- title="✨ Inspirational Sparks and Marvelous Tips"
- items={items}
- onItemClick={(info) => {
- message.success(`You clicked a prompt: ${info.data.label}`);
- }}
- />
- );
- };
- defineRender(() => {
- return (
- <App>
- <Demo />
- </App>
- )
- });
- </script>
|