XProvider 全局化配置

为组件提供统一的全局化配置。

使用说明

XProvider 继承了 antdv 的 ConfigProvider，且为 ant-design-x-vue 中的组件提供全局化配置。

如果您已经使用 antdv 的 ConfigProvider，请对您的代码做如下变更：

diff

- import { ConfigProvider } from 'ant-design-vue';
+ import { XProvider } from 'ant-design-x-vue';

  const App = () => (
-   <ConfigProvider>
+   <XProvider>
      <YourApp />
-   </ConfigProvider>
+   </XProvider>
  );

代码演示

使用

如何使用

Direction:

LTRRTL

Conversation - 1
Conversation - 2

Hello Ant Design X!

Hello World!

Ignite Your Creativity

Tell me a Joke

Hello Ant Design X!status: success

Ant Design X help you build AI chat/platform app as ready-to-use 📦.

Hello World!status: success

Pending...status: pending

<script setup lang="tsx">
import { AlipayCircleOutlined, BulbOutlined, CheckCircleOutlined, GithubOutlined, LoadingOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Card, Divider, Flex, Radio, Typography } from 'ant-design-vue';
import { Bubble, Conversations, Prompts, Sender, Suggestion, ThoughtChain, XProvider, type XProviderProps } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXProviderUse' });

const value = ref('');
const direction = ref<XProviderProps['direction']>('ltr');

defineRender(() => {
  return (
    <div>
      <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
        <Typography.Text>Direction:</Typography.Text>
        <Radio.Group value={direction.value} onChange={(e) => direction.value = e.target.value}>
          <Radio.Button value="ltr">LTR</Radio.Button>
          <Radio.Button value="rtl">RTL</Radio.Button>
        </Radio.Group>
      </Flex>
      <Card>
        <XProvider direction={direction.value}>
          <Flex style={{ height: '500px' }} gap={12}>
            <Conversations
              style={{ width: '200px' }}
              defaultActiveKey="1"
              items={[
                {
                  key: '1',
                  label: 'Conversation - 1',
                  icon: <GithubOutlined />,
                },
                {
                  key: '2',
                  label: 'Conversation - 2',
                  icon: <AlipayCircleOutlined />,
                },
              ]}
            />
            <Divider type="vertical" style={{ height: '100%' }} />
            <Flex vertical style={{ flex: 1 }} gap={8}>
              <Bubble.List
                style={{ flex: 1 }}
                items={[
                  {
                    key: '1',
                    placement: 'end',
                    content: 'Hello Ant Design X!',
                    avatar: { icon: <UserOutlined /> },
                  },
                  {
                    key: '2',
                    content: 'Hello World!',
                  },
                  {
                    key: '2',
                    content: '',
                    loading: true,
                  },
                ]}
              />
              <Prompts
                items={[
                  {
                    key: '1',
                    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
                    label: 'Ignite Your Creativity',
                  },
                  {
                    key: '2',
                    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
                    label: 'Tell me a Joke',
                  },
                ]}
              />
              <Suggestion
                items={[{ label: 'Write a report', value: 'report' }]}
                children={({ onTrigger, onKeyDown }) => {
                  return (
                    <Sender
                      value={value.value}
                      onChange={(nextVal) => {
                        if (nextVal === '/') {
                          onTrigger();
                        } else if (!nextVal) {
                          onTrigger(false);
                        }
                        value.value = nextVal;
                      }}
                      onKeyDown={onKeyDown}
                      placeholder='Type "/" to trigger suggestion'
                    />
                  );
                }}
              />
            </Flex>
            <Divider type="vertical" style={{ height: '100%' }} />
            <ThoughtChain
              style={{ width: '200px' }}
              items={[
                {
                  title: 'Hello Ant Design X!',
                  status: 'success',
                  description: 'status: success',
                  icon: <CheckCircleOutlined />,
                  content: 'Ant Design X help you build AI chat/platform app as ready-to-use 📦.',
                },
                {
                  title: 'Hello World!',
                  status: 'success',
                  description: 'status: success',
                  icon: <CheckCircleOutlined />,
                },
                {
                  title: 'Pending...',
                  status: 'pending',
                  description: 'status: pending',
                  icon: <LoadingOutlined />,
                },
              ]}
            />
          </Flex>
        </XProvider>
      </Card>
    </div>
  )
})
</script>

API

XProvider 完全继承 antdv 的 ConfigProvider, 属性参考：Antdv ConfigProvider

组件配置

属性	说明	类型	默认值
bubble	气泡组件的全局配置	'classNames' \| 'styles' \| 'className' \| 'style'	-
conversations	会话组件的全局配置	'classNames' \| 'styles' \| 'className' \| 'style'	-
prompts	提示集组件的全局配置	'classNames' \| 'styles' \| 'className' \| 'style'	-
sender	输入框组件的全局配置	'classNames' \| 'styles' \| 'className' \| 'style'	-
suggestion	建议组件的全局配置	'className' \| 'style'	-
thoughtChain	思维链组件的全局配置	'classNames' \| 'styles' \| 'className' \| 'style'	-

XProvider 全局化配置 ​

使用说明 ​

代码演示 ​

使用 ​