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' });

defineRender(() => (
  <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~"
  />
));
</script>

隐藏源代码

变体

Hello, I'm Ant Design X

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

变体

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

<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(() => (
  <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(() => (
  <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<SemanticType, string>	-	-
description	描述内容。	VNode | string | (() => VNode | string)	-	-
extra	额外操作内容。	VNode | string | (() => VNode | string)	-	-
icon	图标，支持传入 URL 字符串自动渲染为图片。	VNode | string | (() => VNode | string)	-	-
rootClassName	根节点的样式类名。	string	-	-
styles	自定义样式，用于各个部分。	Record<SemanticType, CSSProperties>	-	-
title	标题内容。	VNode | string | (() => VNode | string)	-	-
variant	变体类型。	'filled' | 'borderless'	'filled'	-

Welcome Slots

插槽名	说明
title	标题内容
description	描述内容
icon	图标内容
extra	额外操作内容

SemanticType

名称	说明
root	根节点
title	标题
description	描述
icon	图标
extra	额外内容

Semantic DOM

Hello, I'm Ant Design X

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

• root

  根节点

• icon

  图标容器

• title

  标题容器

• description

  描述容器

• extra

  额外内容

主题变量（Design Token）

组件暂无自定义 Component Token，可通过全局 Design Token 定制。

贡献者

贡献者

正在加载贡献者信息...