ConfigProvider

Scenes to be used

Coverage configuration is divided into two scenarios

When you need to override the public Props configuration of multiple components (such as timezone, rtl), use ConfigProvider
When the ConfigProvider props are not enough and you want to modify a certain type of Props of a certain component globally (for example, set the theme of all Buttons to solid, or the position of all Popovers), use semiGlobal

ConfigProvider is built on provide / inject, so it affects the child components in the component tree. ConfigProvider and ConfigConsumer discard undeclared attributes: class, style and the like do not land on the DOM.

Demos

How to import

<script setup lang="ts">
    import { ConfigProvider, ConfigConsumer, useConfig } from '@fibrous/semi-ui-vue';
</script>

Basic Usage

By passing in the timeZone parameter, users can configure the time zone for the time components:

Select Time Zone:

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { ConfigProvider, DatePicker, Select, TimePicker } from '@fibrous/semi-ui-vue';

    const timeZone = ref('GMT+08:00');
    const defaultTimestamp = 1581599305265;
    const gmtList: string[] = [];
    for (let hourOffset = -11; hourOffset <= 14; hourOffset++) {
        const prefix = hourOffset >= 0 ? '+' : '-';
        gmtList.push(`GMT${prefix}${String(Math.abs(hourOffset)).padStart(2, '0')}:00`);
    }
    // fractional offsets stay fixed all year; an IANA name follows its daylight saving time
    gmtList.push('GMT-03:30', 'GMT+05:45', 'GMT+13:45', 'America/New_York');
</script>

<template>
    <ConfigProvider :timeZone="timeZone">
        <div :style="{ width: '300px' }">
            <h5 :style="{ margin: '10px' }">Select Time Zone:</h5>
            <Select aria-label="时区" :modelValue="timeZone" placeholder="请选择时区" showClear :style="{ width: '300px' }" @select="(value) => (timeZone = String(value))">
                <Select.Option v-for="gmt in gmtList" :key="gmt" :value="gmt">{{ gmt }}</Select.Option>
            </Select>
            <br />
            <br />
            <DatePicker :defaultValue="defaultTimestamp" type="dateTime" @change="(date, dateString) => console.log('DatePicker changed: ', date, dateString)" />
            <br />
            <br />
            <TimePicker :defaultValue="defaultTimestamp" @change="(date, dateString) => console.log('DatePicker changed: ', date, dateString)" />
        </div>
    </ConfigProvider>
</template>

Manually obtain values

Usually, the value of ConfigProvider is automatically obtained and consumed within the component, so you don't need to worry about it. However, in some special scenarios, you may need to manually obtain the value to perform other operations.

Use the default scoped slot of ConfigConsumer to obtain the value of ConfigProvider; in the <script setup> of a child component you can also call useConfig(), which returns ComputedRef<ContextValue> and is an empty object without a ConfigProvider.

{"direction":"ltr","timeZone":"GMT+08:00","responsiveObserve":false,"responsiveMap":{"xs":"(max-width: 575px)","sm":"(min-width: 576px)","md":"(min-width: 768px)","lg":"(min-width: 992px)","xl":"(min-width: 1200px)","xxl":"(min-width: 1600px)"},"screens":{"xs":false,"sm":false,"md":false,"lg":false,"xl":false,"xxl":false}}

Code

<script setup lang="ts">
    import { ConfigConsumer, ConfigProvider, TypographyText } from '@fibrous/semi-ui-vue';
</script>

<template>
    <ConfigProvider timeZone="GMT+08:00">
        <ConfigConsumer #default="value">
            <TypographyText :ellipsis="{ showTooltip: { opts: { style: { minWidth: '1200px' } } } }" :style="{ width: '600px' }">
                {{ JSON.stringify(value) }}
            </TypographyText>
        </ConfigConsumer>
    </ConfigProvider>
</template>

Responsive breakpoints

ConfigProvider supports responsive breakpoint configuration and subscriptions to breakpoint changes.

Enable observing & custom breakpoints

Use responsiveObserve to enable breakpoint observing (recommended only when you really need subscriptions)
Use responsiveMap to customize breakpoints (falls back to default map when not provided)

<!-- breakpoint-subscriber.vue -->
<script setup lang="ts">
    import { onBeforeUnmount, onMounted, ref } from 'vue';
    import { TypographyText, useConfig } from '@fibrous/semi-ui-vue';

    const config = useConfig();
    const screens = ref(config.value.screens);
    let unsubscribe: (() => void) | undefined;

    onMounted(() => {
        unsubscribe = config.value.onBreakpoint?.((next) => {
            screens.value = next;
        });
    });
    onBeforeUnmount(() => unsubscribe?.());
</script>

<template>
    <TypographyText>{{ JSON.stringify(screens) }}</TypographyText>
</template>

<script setup lang="ts">
    import { ConfigProvider } from '@fibrous/semi-ui-vue';
    import BreakpointSubscriber from './breakpoint-subscriber.vue';

    const responsiveMap = {
        xs: '(max-width: 575px)',
        sm: '(min-width: 576px)',
        md: '(min-width: 768px)',
        lg: '(min-width: 992px)',
        xl: '(min-width: 1200px)',
        xxl: '(min-width: 1600px)',
    };
</script>

<template>
    <ConfigProvider responsiveObserve :responsiveMap="responsiveMap">
        <BreakpointSubscriber />
    </ConfigProvider>
</template>

Subscription API

onBreakpoint supports two overloads (both return an unsubscribe function):

onBreakpoint((screens) => void): callback receives the full screens map
onBreakpoint(['md', 'lg'], (screen, match) => void): listen to specific breakpoints only

RTL/LTR

Global configuration direction can change the text direction of components. rtl means right to left (similar to Hebrew or Arabic), ltr means left to right (similar to most languages such as English). When an explicitly passed direction differs from the outer one, including at the outermost level, ConfigProvider wraps its content in a div carrying the dir attribute. The RTL styles of components match :dir(rtl) and follow the nearest ancestor dir attribute; popup roots carry a dir from the ConfigProvider direction. When the page sets dir="rtl" itself, for example on <html>, components in the page look RTL, but their logic such as arrow-key direction and popup placement only reads the ConfigProvider direction, and popups and Table inside a ConfigProvider follow its direction (ltr by default), so set direction="rtl" as well.

Special components:

Command call of Modal, Notification and Toast needs to be passed to 'direction' through prop.
If you want to internationalize the directional icon, you need to handle it on your own. We think RTL for icon will make it difficult to understand and maintain. Semi has adapted the icons in other components.
The tree data of Table does not support RTL (Chrome, Safari have different behave with Firefox), and fixed column supports RTL.

In Vue, command calls cannot read ConfigProvider (it is a component-level provide). To follow the direction, pass direction in the options, or use Modal.useModal(), Toast.useToast() and Notification.useNotification(), which inherit the ConfigProvider wherever their returned Holder component is rendered.

Buttons

Input

Navigation

每页条数：10

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Finished

This is a description

In Process

This is a description

Waiting

This is a description

Display

XZ5

YB5

LX5

grey tag

blue tag

ghost tag

solid tag

red tag

green tag

orange tag

teal tag

violet tag

white tag

I am Popover

I am Tooltip

审核中
2019-07-14 10:35
发布成功
2019-06-13 16:17
审核失败
2019-05-14 18:34

Feedback

I am loading...

Here are some texts.

And more texts on the way.

Code

<script setup lang="ts">
    import { h, ref, type CSSProperties } from 'vue';
    import { IconCamera, IconChevronDown, IconEdit, IconList, IconSidebar, IconVigoLogo } from '@fibrous/semi-icons-vue';
    import {
        Avatar,
        Badge,
        Breadcrumb,
        Button,
        ButtonGroup,
        Cascader,
        Checkbox,
        Col,
        ConfigProvider,
        DatePicker,
        Input,
        Modal,
        Nav,
        Notification,
        Pagination,
        Popover,
        Radio,
        Rating,
        Row,
        Select,
        Spin,
        Steps,
        Switch,
        Tag,
        TextArea,
        TimePicker,
        Timeline,
        Toast,
        Tooltip,
        TypographyText,
        type NavItemConfig,
    } from '@fibrous/semi-ui-vue';

    const direction = ref<'ltr' | 'rtl'>();
    const flexStyle: CSSProperties = { display: 'flex', marginBottom: '32px', flexWrap: 'wrap' };
    const titleStyle = { margin: '50px 0 16px 0' };
    const rowStyle = { margin: '16px 10px' };
    const badgeStyle = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
        display: 'inline-block',
    };
    const tagStyle = { marginRight: '8px', marginBottom: '8px' };
    const buttonStyle = { ...tagStyle };
    const opts = () => ({
        title: 'Hi,Bytedance',
        content: 'ies dance dance dance',
        duration: 3,
        direction: direction.value,
    });
    const treeData = [
        {
            label: '浙江省',
            value: 'zhejiang',
            children: [
                {
                    label: '杭州市',
                    value: 'hangzhou',
                    children: [
                        { label: '西湖区', value: 'xihu' },
                        { label: '萧山区', value: 'xiaoshan' },
                        { label: '临安区', value: 'linan' },
                    ],
                },
                {
                    label: '宁波市',
                    value: 'ningbo',
                    children: [
                        { label: '海曙区', value: 'haishu' },
                        { label: '江北区', value: 'jiangbei' },
                    ],
                },
            ],
        },
    ];
    const navItems = [
        { itemKey: 'user', text: 'Option1' },
        { itemKey: 'union', text: 'Option2' },
        { itemKey: 'approve-management', text: 'Group3', items: ['3-1', '3-2'] },
    ];
    const navIcons = { user: IconEdit, union: IconCamera, 'approve-management': IconList };
    const navIconOf = (item: NavItemConfig) => navIcons[item.itemKey as keyof typeof navIcons];
    const vigoNotice = (color?: string) => Notification.info({ ...opts(), icon: h(IconVigoLogo, color ? { style: { color } } : null) });
</script>

<template>
    <div>
        <div :style="{ marginBottom: '20px' }">
            <ButtonGroup>
                <Button @click="direction = 'ltr'">LTR</Button>
                <Button @click="direction = 'rtl'">RTL</Button>
            </ButtonGroup>
        </div>
        <ConfigProvider :direction="direction">
            <Row>
                <h3 :style="titleStyle">Buttons</h3>
            </Row>
            <Row :style="rowStyle">
                <Button loading :style="{ marginRight: '8px' }" theme="solid">加载</Button>
                <Button :style="{ marginRight: '8px' }" theme="solid">
                    <template #icon>
                        <IconSidebar />
                    </template>
                    收起
                </Button>
                <Button iconPosition="right" :style="{ marginRight: '8px' }" theme="solid">
                    <template #icon>
                        <IconChevronDown />
                    </template>
                    展开选项
                </Button>
                <br />
                <br />
                <ButtonGroup>
                    <Button>拷贝</Button>
                    <Button>查询</Button>
                    <Button>剪切</Button>
                </ButtonGroup>
            </Row>
            <Row>
                <h3 :style="titleStyle">Input</h3>
            </Row>
            <Row :gutter="16" :style="rowStyle">
                <Col :span="12">
                    <Input aria-label="输入框" placeholder="输入框" />
                    <br />
                    <br />
                    <Input aria-label="禁用的输入框" disabled placeholder="输入框" />
                    <br />
                    <br />
                    <Input aria-label="带前缀的输入框" showClear>
                        <template #prefix>Prefix</template>
                    </Input>
                    <br />
                    <br />
                    <Input aria-label="带后缀的输入框" showClear>
                        <template #suffix>
                            <TypographyText strong :style="{ margin: '0 8px' }" type="secondary">Suffix</TypographyText>
                        </template>
                    </Input>
                    <br />
                    <br />
                    <TextArea aria-label="文本框" :maxCount="100" placeholder="文本框" />
                    <br />
                    <br />
                    <div :style="flexStyle">
                        <Switch aria-label="已开启的开关" defaultChecked :style="{ marginRight: '8px' }" />
                        <Switch aria-label="已关闭的开关" :style="{ marginRight: '8px' }" />
                        <Switch aria-label="禁用的开关" defaultChecked disabled :style="{ marginRight: '8px' }" />
                    </div>
                    <div :style="flexStyle">
                        <Checkbox defaultChecked :style="{ marginRight: '8px' }">多选框</Checkbox>
                        <Checkbox defaultChecked disabled :style="{ marginRight: '8px' }">禁用的多选框</Checkbox>
                        <Checkbox disabled :style="{ marginRight: '8px' }">禁用的多选框</Checkbox>
                    </div>
                    <div :style="{ ...flexStyle, marginBottom: 0 }">
                        <Radio defaultChecked :style="{ marginRight: '8px' }">单选框</Radio>
                        <Radio defaultChecked disabled :style="{ marginRight: '8px' }">禁用的单选框</Radio>
                        <Radio disabled :style="{ marginRight: '8px' }">禁用的单选框</Radio>
                    </div>
                </Col>
                <Col :span="12">
                    <DatePicker :style="{ width: '100%' }" @change="(_date, dateString) => console.log(dateString)" />
                    <br />
                    <br />
                    <TimePicker :style="{ width: '100%' }" />
                    <br />
                    <br />
                    <Select aria-label="选择器-单选" placeholder="选择器-单选" :style="{ width: '100%' }">
                        <Select.Option value="abc">抖音</Select.Option>
                        <Select.Option value="hotsoon">火山</Select.Option>
                        <Select.Option disabled value="pipixia">皮皮虾</Select.Option>
                        <Select.Option value="xigua">西瓜视频</Select.Option>
                    </Select>
                    <br />
                    <br />
                    <Select aria-label="选择器-禁用" disabled placeholder="选择器-禁用" :style="{ width: '100%' }">
                        <Select.Option value="abc">抖音</Select.Option>
                        <Select.Option value="hotsoon">火山</Select.Option>
                        <Select.Option disabled value="pipixia">皮皮虾</Select.Option>
                        <Select.Option value="xigua">西瓜视频</Select.Option>
                    </Select>
                    <br />
                    <br />
                    <Select aria-label="选择器-多选" multiple placeholder="选择器-多选" :style="{ width: '100%' }">
                        <Select.Option value="abc">抖音</Select.Option>
                        <Select.Option value="hotsoon">火山</Select.Option>
                        <Select.Option disabled value="pipixia">皮皮虾</Select.Option>
                        <Select.Option value="xigua">西瓜视频</Select.Option>
                    </Select>
                    <br />
                    <br />
                    <Cascader placeholder="级联选择器" :style="{ width: '100%' }" :treeData="treeData" />
                </Col>
            </Row>
            <Row>
                <h3 :style="titleStyle">Navigation</h3>
            </Row>
            <Row :style="rowStyle">
                <Breadcrumb>
                    <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>
                    <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
                    <Breadcrumb.Item>Default</Breadcrumb.Item>
                </Breadcrumb>
                <Nav :items="navItems" mode="horizontal">
                    <template #icon="{ item }">
                        <component :is="navIconOf(item)" />
                    </template>
                </Nav>
                <br />
                <br />
                <Pagination showSizeChanger :total="80" />
                <br />
                <Steps :current="1">
                    <Steps.Step>
                        <template #title>Finished</template>
                        <template #description>This is a description.</template>
                    </Steps.Step>
                    <Steps.Step>
                        <template #title>In Progress</template>
                        <template #description>This is a description.</template>
                    </Steps.Step>
                    <Steps.Step>
                        <template #title>Waiting</template>
                        <template #description>This is a description.</template>
                    </Steps.Step>
                </Steps>
                <br />
                <Steps :current="1" status="error">
                    <Steps.Step>
                        <template #title>Finished</template>
                        <template #description>This is a description</template>
                    </Steps.Step>
                    <Steps.Step>
                        <template #title>In Process</template>
                        <template #description>This is a description</template>
                    </Steps.Step>
                    <Steps.Step>
                        <template #title>Waiting</template>
                        <template #description>This is a description</template>
                    </Steps.Step>
                </Steps>
            </Row>
            <Row>
                <h3 :style="titleStyle">Display</h3>
            </Row>
            <Row :style="rowStyle">
                <div :style="{ display: 'flex' }">
                    <div :style="{ padding: '8px' }">
                        <Badge :count="5" theme="solid">
                            <Avatar color="blue" shape="square" :style="badgeStyle">XZ</Avatar>
                        </Badge>
                    </div>
                    <div :style="{ padding: '8px' }">
                        <Badge :count="5" theme="light">
                            <Avatar color="cyan" shape="square" :style="badgeStyle">YB</Avatar>
                        </Badge>
                    </div>
                    <div :style="{ padding: '8px' }">
                        <Badge :count="5" theme="inverted">
                            <Avatar color="indigo" shape="square" :style="badgeStyle">LX</Avatar>
                        </Badge>
                    </div>
                    <div :style="{ padding: '8px' }">
                        <Badge dot theme="solid">
                            <Avatar color="light-blue" shape="square" :style="badgeStyle">YZ</Avatar>
                        </Badge>
                    </div>
                    <div :style="{ padding: '8px' }">
                        <Badge dot theme="light">
                            <Avatar color="teal" shape="square" :style="badgeStyle">HW</Avatar>
                        </Badge>
                    </div>
                    <div :style="{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }">
                        <Badge dot theme="inverted">
                            <Avatar color="green" shape="square" :style="badgeStyle">XM</Avatar>
                        </Badge>
                    </div>
                </div>
                <br />
                <div>
                    <Tag color="grey" :style="tagStyle">grey tag</Tag>
                    <Tag color="blue" :style="tagStyle">blue tag</Tag>
                    <Tag color="blue" :style="tagStyle" type="ghost">ghost tag</Tag>
                    <Tag color="blue" :style="tagStyle" type="solid">solid tag</Tag>
                    <Tag color="red" :style="tagStyle">red tag</Tag>
                    <Tag color="green" :style="tagStyle">green tag</Tag>
                    <Tag color="orange" :style="tagStyle">orange tag</Tag>
                    <Tag color="teal" :style="tagStyle">teal tag</Tag>
                    <Tag color="violet" :style="tagStyle">violet tag</Tag>
                    <Tag color="white" :style="tagStyle">white tag</Tag>
                </div>
                <br />
                <div :style="{ display: 'flex', alignItems: 'center' }">
                    <Popover :style="{ padding: '8px' }">
                        <Tag :style="{ marginRight: '8px' }">I am Popover</Tag>
                        <template #content>hi semi-design</template>
                    </Popover>
                    <Tooltip>
                        <Tag :style="{ marginRight: '8px' }">I am Tooltip</Tag>
                        <template #content>hi semi-design</template>
                    </Tooltip>
                    <Rating :defaultValue="3" size="small" :style="{ marginRight: '8px' }" />
                </div>
                <br />
                <Timeline>
                    <Timeline.Item type="ongoing">
                        <template #time>2019-07-14 10:35</template>
                        审核中
                    </Timeline.Item>
                    <Timeline.Item type="success">
                        <template #time>2019-06-13 16:17</template>
                        发布成功
                    </Timeline.Item>
                    <Timeline.Item type="error">
                        <template #time>2019-05-14 18:34</template>
                        审核失败
                    </Timeline.Item>
                </Timeline>
            </Row>
            <Row>
                <h3 :style="titleStyle">Feedback</h3>
            </Row>
            <Row :style="rowStyle">
                <Button :style="buttonStyle" type="primary" @click="Notification.success(opts())"> 成功信息的通知 </Button>
                <Button :style="buttonStyle" @click="Notification.info(opts())">提示信息的通知</Button>
                <Button :style="buttonStyle" type="warning" @click="Notification.warning(opts())"> 警告信息的通知 </Button>
                <Button :style="buttonStyle" type="danger" @click="Notification.error(opts())">失败信息的通知</Button>
                <Button aria-label="Vigo 图标通知" :style="buttonStyle" @click="vigoNotice()">
                    <template #icon>
                        <IconVigoLogo />
                    </template>
                </Button>
                <Button aria-label="粉色 Vigo 图标通知" :style="buttonStyle" @click="vigoNotice('pink')">
                    <template #icon>
                        <IconVigoLogo />
                    </template>
                </Button>
                <br />
                <Button :style="buttonStyle" type="primary" @click="Modal.success(opts())">成功信息的弹窗</Button>
                <Button :style="buttonStyle" @click="Modal.info(opts())">提示信息的弹窗</Button>
                <Button :style="buttonStyle" type="warning" @click="Modal.warning(opts())">警告信息的弹窗</Button>
                <Button :style="buttonStyle" type="danger" @click="Modal.error(opts())">失败信息的弹窗</Button>
                <br />
                <Button :style="buttonStyle" type="primary" @click="Toast.success(opts())">成功信息的提示</Button>
                <Button :style="buttonStyle" @click="Toast.info(opts())">提示信息的提示</Button>
                <Button :style="buttonStyle" type="warning" @click="Toast.warning(opts())">警告信息的提示</Button>
                <Button :style="buttonStyle" type="danger" @click="Toast.error(opts())">失败信息的提示</Button>
                <br />
                <br />
                <Spin>
                    <template #tip>I am loading...</template>
                    <div
                        :style="{
                            backgroundColor: 'var(--semi-color-primary-light-default)',
                            border: '1px solid var(--semi-color-primary)',
                            borderRadius: '4px',
                            padding: '16px 10px',
                        }"
                    >
                        <p>Here are some texts.</p>
                        <p>And more texts on the way.</p>
                    </div>
                </Spin>
            </Row>
        </ConfigProvider>
    </div>
</template>

Nesting

ConfigProvider can be nested. The inner one overrides only the props it is given; props it does not pass (direction, locale, timeZone, getPopupContainer, responsiveObserve, responsiveMap) are inherited from the outer one. A prop set to undefined counts as not passed; locale={null} is explicit, so it clears the outer locale and leaves it to the LocaleProvider inside, or the default language.

An inner direction="ltr" switches a subtree inside an rtl ConfigProvider back to left to right, for both the logic and the styles of its components.

外层：locale = en-US，timeZone = Asia/Tokyo，direction = ltr

内层只传 timeZone，其余继承外层：locale = en-US，timeZone = 8，direction = ltr

Code

<script setup lang="ts">
    import en_US from '@fibrous/semi-foundation/locale/source/en_US';
    import { ConfigConsumer, ConfigProvider } from '@fibrous/semi-ui-vue';
</script>

<template>
    <ConfigProvider direction="ltr" :locale="en_US" timeZone="Asia/Tokyo">
        <ConfigConsumer #default="{ locale, timeZone, direction }">
            <div :style="{ margin: '8px' }">
                外层：locale = {{ locale?.code ?? '未设置' }}，timeZone = {{ String(timeZone) }}，direction =
                {{ direction }}
            </div>
        </ConfigConsumer>
        <ConfigProvider :timeZone="8">
            <ConfigConsumer #default="{ locale, timeZone, direction }">
                <div :style="{ margin: '8px' }">内层只传 timeZone，其余继承外层：locale = {{ locale?.code ?? '未设置' }}，timeZone = {{ String(timeZone) }}，direction = {{ direction }}</div>
            </ConfigConsumer>
        </ConfigProvider>
    </ConfigProvider>
</template>

API Reference

ConfigProvider

Props

Property	Description	Type	Default
direction	Text direction: ltr or rtl. Inherited from the outer ConfigProvider when omitted, and ltr at the outermost level.	`"ltr" \| "rtl"`	`undefined`
timeZone	Time zone for time components: a number (hour offset from UTC), a GMT±HH:MM string or an IANA identifier. Numbers and GMT strings are fixed offsets all year. Inherited from the outer ConfigProvider when omitted.	`string \| number`	`undefined`
locale	Locale configuration, which takes precedence over LocaleProvider. Inherited from the outer ConfigProvider when omitted; when no ConfigProvider sets it, LocaleProvider decides, and zh_CN is used without either. Pass null to clear the outer locale.	`Locale \| null`	`undefined`
getPopupContainer	Function returning the popup container. It only affects Modal, SideSheet and ImagePreview, which still render through a Portal; the container needs position: relative. Inherited from the outer ConfigProvider when omitted, and document.body at the outermost level.	`Type`	`undefined`
responsiveObserve	Whether to observe responsive breakpoints. When off, no matchMedia listener is registered; when on, listeners are registered on the first subscription and removed when none remain. Inherited from the outer ConfigProvider when omitted, and false at the outermost level.	`boolean`	`undefined`
responsiveMap	Custom responsive breakpoints: keys are xs, sm, md, lg, xl and xxl, values are media query strings. Compared by content, so an inline object does not re-register listeners. Inherited from the outer ConfigProvider when omitted, and defaultResponsiveMap at the outermost level.	`ResponsiveMap`	`undefined`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Content affected by the configuration. When an explicitly passed direction differs from the outer one, including at the outermost level, the content is wrapped in a div carrying the dir attribute.	`any`

Exposes

Name	Description	Type
None

ConfigProvider.defaultResponsiveMap and the named export defaultResponsiveMap are the default breakpoint map. locale works like the locale parameter of LocaleProvider, see its usage.

ConfigConsumer

Props

Property	Description	Type	Default
None

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Scoped slot receiving the effective configuration (ContextValue). Inside a ConfigProvider it also holds screens and onBreakpoint; without a ConfigProvider it is an empty object.	`ContextValue`

Exposes

Name	Description	Type
None

useConfig

useConfig(): ComputedRef<ContextValue> returns the effective configuration, and an empty object without a ConfigProvider. ContextValue holds direction, timeZone, locale, getPopupContainer, responsiveObserve and responsiveMap from the table above, plus the read-only screens (which breakpoints match) and onBreakpoint (the subscribe function, see "Subscription API" above).

Time Zone Identifier

Numbers, such as 1,-9.5, represent the time offset from UTC, the unit is hour, and it can be negative or decimal;
A string, such as "GMT-09:30","GMT+08:00", which is a characterization offset string starting with "GMT", or IANA, such as "Asia/Shanghai","America/Los_Angeles", etc.

A number or a string like GMT-09:30 is a fixed offset all year round and never shifts for daylight saving time. For example, -3.5 and GMT-03:30 are UTC-03:30 in every season, and the time zone name (z) in a format shows GMT-03:30.

To follow the daylight saving time of a region, use an IANA identifier. Here you can check the IANA list, and whether the time zone has daylight saving time.

FAQ

The ConfigProvider does not provide the function of global custom prefix classname. How to achieve similar requirements (for example, Semi is used in the SDK, and it is expected that the packaged dom style does not have the .semi-xx prefix, so as not to be affected by the host's global CSS)?
- Since prefixCls needs to be consumed by the js/css of the component layer at the same time, Semi put this switch in the configuration item of webpack plugin, rather than as a configuration item of ConfigProvider.
- If you use webpack, please configure it in the parameters of SemiWebpackPlugin

# webpack config example: webpack.config.js
const SemiWebpackPlugin = require('@fibrous/semi-webpack-plugin').default;
module.exports = {
+    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
}

semiGlobal

You can override the default Props of global components.

In semiGlobal.config.overrideDefaultProps you can configure the component default Props. A default of a non-function type is read and cached the first time an instance omits the prop; a default of a function type (such as getPopupContainer) is read by each component when it needs it, at a time that varies by component. The global configuration is not reactive, so changing it does not update instances that already exist. Set it before the app is created, at the entrance of the entire site. To give one app its own configuration, use app.provide(semiGlobalKey, { config: { overrideDefaultProps } }); semiGlobalKey is also exported from @fibrous/semi-ui-vue.

Properties that are unique to each instance, such as id, insetLabelId, wrapperId, addonId and extraId, cannot be set through the global defaults: the types have no such keys, and they are ignored at runtime.

For example, the configuration below sets all Buttons to warning by default, and filter of Select to enabled by default, etc.

import { semiGlobal } from '@fibrous/semi-ui-vue';

semiGlobal.config.overrideDefaultProps = {
    Button: {
        type: 'warning',
    },
    Select: {
        filter: true,
    },
    Tooltip: {
        trigger: 'click',
    },
};