svar-react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVAR React ships as a family of

@svar-ui/react-*

packages. This file routes to the per-package entry; each child file is standalone and contains the imports, public types, styling hooks, and recipes for its components.

Open the matching file for the package you are using. If the component you need is not listed in the routing table below, default to

core/index.md

SVAR React以

@svar-ui/react-*

系列包的形式发布。本文件是各包的入口路由；每个子文件都是独立的，包含对应组件的导入语句、公开类型、样式钩子和使用示例。

打开与你正在使用的包对应的文件。如果所需组件未在下方的路由表中列出，请默认查看

core/index.md

Component Routing

组件路由

File	Package	Components
`core/index.md`	`@svar-ui/react-core`	buttons, inputs, selectors, calendars, dropdowns, popups, modals, themes, locale (40+ widgets)
`menu/index.md`	`@svar-ui/react-menu`	`Menu` , `MenuBar` , `DropDownMenu` , `ContextMenu` , `ActionMenu`
`toolbar/index.md`	`@svar-ui/react-toolbar`	`Toolbar`
`layout/index.md`	`@svar-ui/react-layout`	`Layout` , `Cell` , `Panel`
`grid/index.md`	`@svar-ui/react-grid`	`Grid` , `HeaderMenu` , `Tooltip` , `ContextMenu` , `Toolbar`
`editor/index.md`	`@svar-ui/react-editor`	`Editor`
`filter/index.md`	`@svar-ui/react-filter`	`FilterBuilder` , `FilterEditor` , `FilterBar` , `FilterQuery`
`gantt/index.md`	`@svar-ui/react-gantt`	`Gantt` , `Toolbar` , `ContextMenu` , `Editor` , `Tooltip` , `HeaderMenu`
`tasklist/index.md`	`@svar-ui/react-tasklist`	`Tasklist`
`comments/index.md`	`@svar-ui/react-comments`	`Comments`
`filemanager/index.md`	`@svar-ui/react-filemanager`	`Filemanager`

文件	包	组件
`core/index.md`	`@svar-ui/react-core`	buttons, inputs, selectors, calendars, dropdowns, popups, modals, themes, locale (40+ widgets)
`menu/index.md`	`@svar-ui/react-menu`	`Menu` , `MenuBar` , `DropDownMenu` , `ContextMenu` , `ActionMenu`
`toolbar/index.md`	`@svar-ui/react-toolbar`	`Toolbar`
`layout/index.md`	`@svar-ui/react-layout`	`Layout` , `Cell` , `Panel`
`grid/index.md`	`@svar-ui/react-grid`	`Grid` , `HeaderMenu` , `Tooltip` , `ContextMenu` , `Toolbar`
`editor/index.md`	`@svar-ui/react-editor`	`Editor`
`filter/index.md`	`@svar-ui/react-filter`	`FilterBuilder` , `FilterEditor` , `FilterBar` , `FilterQuery`
`gantt/index.md`	`@svar-ui/react-gantt`	`Gantt` , `Toolbar` , `ContextMenu` , `Editor` , `Tooltip` , `HeaderMenu`
`tasklist/index.md`	`@svar-ui/react-tasklist`	`Tasklist`
`comments/index.md`	`@svar-ui/react-comments`	`Comments`
`filemanager/index.md`	`@svar-ui/react-filemanager`	`Filemanager`

Common Techniques

通用技巧

These apply to every

@svar-ui/react-*

package:

```
themes.md
```
- theme wrappers, CSS variables, the
```
css
```
prop convention, class hooks
```
locales.md
```
- locale context, bundled language packs, extending words and formats

The widget hierarchy need to be wrapped in a theme component to ensure proper styling Some widgets (grid,gantt,filemanager, etc) exports their own theme components that delegate to core theme and add their own variables

以下内容适用于所有

@svar-ui/react-*

包：

```
themes.md
```
- 主题包装器、CSS变量、
```
css
```
属性约定、类钩子
```
locales.md
```
- 本地化上下文、捆绑语言包、扩展词汇和格式

小部件层级结构需要包裹在主题组件中，以确保样式正确显示部分小部件（grid、gantt、filemanager等）会导出自身的主题组件，这些组件会继承核心主题并添加自定义变量