Other · ConfigProvider
ConfigProvider
Provide a unified global configuration for components.

Demos

How to import

Basic Usage

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

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)
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.
  • Table fixed columns or headers, tree data, and virtualized tables do not support RTL at the moment, Slider does not support RTL at the moment.

API Reference

PropertiesInstructionstypeDefault
directionSets the direction of the textltr| rtlltr
getPopupContainerSpecifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set 'position: relative`function():HTMLElement() => document.body
localeMulti-language configuration, same as the usage of locale parameter in LocaleProviderobject
timeZoneTime zone identifierstring|number

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.
When you use numbers or similar writing of GMT-09:00, Semi will internally convert these time zone identifiers to the IANA.
  • If you set -9 or GMT-09:00, it will be converted to Pacific/Gambier. There may be multiple IANA identifiers corresponding to certain numbers. Semi prefers IANA identifiers without daylight saving time;
  • If the number does not have a corresponding IANA identifier without daylight saving time, such as -3.5, 3.5, 10.5, 13.75, then we are mapping an IANA identifier with daylight saving time, and the time zone with daylight saving time will be adjust the offset. For example, -3.5 will add 1h to the standard time after entering daylight saving time.
If you want to accurately set the time zone of a region, it is recommended to use the IANA identifiers instead of the previous usage. 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

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED