Welcome

Clearly convey to users the achievable scope and expected functions.

When to use

Using appropriate welcome recommendation components can effectively reduce the user's learning cost, allowing them to quickly understand and get started smoothly.

Examples

Basic

Hello, I'm Ant Design X

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

Basic

Basic usage.

<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>

Hide source

Variant

Hello, I'm Ant Design X

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

Variant

Sets style variants through the variant property.

<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>

Hide source

Custom background

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~

Custom background

Customize some styles.

<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>

Hide source

API

WelcomeProps

Prop	Description	Type	Default	Version
classNames	Custom style class names, used for various parts.	Record<SemanticType, string>	-	-
description	Description content.	VNode	string	(() => VNode
extra	Additional operation content.	VNode	string	(() => VNode
icon	Icon, supports passing a URL string to automatically render as an image.	VNode	string	(() => VNode
rootClassName	Root class name。	string	-	-
styles	Custom styles, used for various parts.	Record<SemanticType, CSSProperties>	-	-
title	Title content.	VNode	string	(() => VNode
variant	Variant type.	'filled'	'borderless'	'filled'

Welcome Slots

Slot	Description
title	Title content
description	Description content
icon	Icon content
extra	Extra operation content

SemanticType

Name	Description
root	Root node
title	Title
description	Description
icon	Icon
extra	Extra content

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

This component has no custom Component Token. Customize it through global Design Tokens.

Contributors

Contributors

Loading contributors…