Welcome 欢迎

清晰传达给用户可实现的意图范围和预期功能。

何时使用

使用合适的欢迎推荐组件，可以有效降低用户学习成本，让用户快速了解并顺利开始。

代码演示

基本

基础用法。

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~

<script setup lang="tsx">
import { Welcome } from 'ant-design-x-vue';

defineOptions({ name: 'AXWelcomeBasic' });

const Demo = () => {
  return (
    <Welcome
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="Hello, I'm Ant Design X"
      description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
    />
  );
};

defineRender(() => {
  return (
    <Demo />
  )
})
</script>

隐藏源代码

变体

通过 variant 属性设置样式变体。

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~

<script setup lang="tsx">
import { EllipsisOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
import { Button, Space } from 'ant-design-vue';
import { Welcome } from 'ant-design-x-vue';

defineOptions({ name: 'AXWelcomeVariant' });

defineRender(() => {
  return (
    <Welcome
      variant="borderless"
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="Hello, I'm Ant Design X"
      description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
      extra={
        <Space>
          <Button icon={<ShareAltOutlined />} />
          <Button icon={<EllipsisOutlined />} />
        </Space>
      }
    />
  )
});
</script>

隐藏源代码

背景定制

自定义部分样式。

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~

<script setup lang="tsx">
import { Card, ConfigProvider, Flex, theme } from 'ant-design-vue';
import { Welcome } from 'ant-design-x-vue';

defineOptions({ name: 'AXWelcomeBackground' });

const items: {
  algorithm: typeof theme.defaultAlgorithm;
  background: string;
}[] = [
  {
    algorithm: theme.defaultAlgorithm,
    background: 'linear-gradient(97deg, #f2f9fe 0%, #f7f3ff 100%)',
  },
  {
    algorithm: theme.darkAlgorithm,
    background: 'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)',
  },
];

defineRender(() => {
  return (
    <Flex vertical>
      {items.map(({ algorithm, background }, index) => (
        <ConfigProvider
          key={index}
          theme={{
            algorithm,
          }}
        >
          <Card style={{ borderRadius: 0 }}>
            <Welcome
              style={{
                backgroundImage: background,
                borderStartStartRadius: 4,
              }}
              icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
              title="Hello, I'm Ant Design X"
              description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
            />
          </Card>
        </ConfigProvider>
      ))}
    </Flex>
  )
});
</script>

隐藏源代码

API

WelcomeProps

属性	说明	类型	默认值	版本
classNames	自定义样式类名，用于各个提示项的不同部分。	Record<'icon' | 'title' | 'description' | 'extra', string>	-	-
description	显示在提示列表中的描述。	VNode | string	-	-
extra	显示在提示列表末尾的额外操作。	VNode	-	-
icon	显示在提示列表前侧的图标。	VNode	-	-
rootClassName	根节点的样式类名。	string	-	-
styles	自定义样式，用于各个提示项的不同部分。	Record<'icon' | 'title' | 'description' | 'extra', CSSProperties>	-	-
title	显示在提示列表顶部的标题。	VNode | string	-	-
variant	变体类型。	'filled' | 'borderless'	'filled'	-

Semantic DOM

主题变量（Design Token）