Built-in Component
OpenSumi has built-in some basic components, which can be imported and used through the sumi-browser
module when the browser-side plug-in is running.
The current built-in components include:
├── Badge
├── Button
├── Checkbox
├── Dialog
├── Icon
├── Input
├── Message
├── Notification
├── Overlay
├── Popover
├── RecycleList
├── BasicRecycleTree
├── Scrollbars
├── Select
├── Tabs
├── Tooltip
For some usage examples, see: Use Built-in Components.
Other component libraries
You can also continue to use the popular AntD
component library in the community in OpenSumi, and you only need to import the theme package we provide to use it normally.
- opensumi/antd-theme - AntD theme package based on OpenSumi
The usage is as follows:
import '@opensumi/antd-theme/lib/index.css';
import { ConfigProvider } from 'antd';
// ...
return (
<ConfigProvider prefixCls="sumi_antd">
<App />
</ConfigProvider>
);
其他主题库适配期待社区的贡献。
自定义适配主题的组件
For developers who do not meet the above schemes, or expect to write their own CSS styles to adapt to the theme, you can refer to the Token table below to use the corresponding CSS Token, such as Token is kt.disableForeground
, you can pass var( --kt-disableForeground)
reference.
Blocks | Doc |
---|---|
主题色板 | 主题色板 |
基础颜色 | 基础颜色 |
Button | Button 按钮 |
Checkbox | Checkbox 多选框 |
Input | Input 输入框 |
Select | Select 选择器 |
Editor | Editor 编辑 器 |
ActionBar | ActionBar 操作组 |
ActivityBar | ActivityBar 左右侧活动栏 |
Bottom Panel | Bottom Panel 底部面板 |
Explorer | Explorer 资源管理器 |
Keybinding | Keybinding 快捷键页 |
MenuBar | MenuBar 菜单栏 |
Message | Message 全局提示 |
Modal | Modal 对话框 |
Notification | Notification 通知提醒框 |
Popover | Popover 气泡卡片 |
SCM | SCM 源代码管理 |
Search | Search 搜索 |
Setting | Setting 设置页 |
Sidebar | Sidebar 侧边栏面板 |
StatusBar | StatusBar 底部状态栏 |
Tab | Tab 标签页 |
ToolBar | ToolBar 工具栏 |
Tooltip | Tooltip 文字提示 |
Most custom tokens are usually backward compatible with Theme Color of VS Code, and you can also use these tokens directly.
If you feel that the definition of this part of the color value table cannot meet your needs, on the one hand, you can consider providing a PR for OpenSumi to expand it, on the other hand, you can also bypass this part of the limitation by processing it on the integration side To solve, two common methods are introduced below:
Style customization by ClassName
Customize through the scope of ClassName, such as:
.vs-dark {
.a {
color: #fff; // Dark Theme Model, the text will be white
}
}
.vs {
.a {
color: #000; // Light Theme Model, the text will be black
}
}
Use the registerColor
method to register a custom token
It should be noted here that it is necessary to ensure that the registerColor
method is called before the application starts, and it is recommended to introduce it in the renderApp
phase.
// The entry file
import './custom-token';
// ...
renderApp({...});
// custom-token.ts
import {
registerColor,
ktPrimaryButtonForeground,
ktPrimaryButtonBackground,
ktPrimaryButtonClickBackground
} from '@opensumi/ide-theme';
import { localize } from '@opensumi/ide-core-browser';
export const ktToolbarButtonSelectionForeground = registerColor(
'kt.toolbarButton.selectionForeground',
{
dark: ktPrimaryButtonForeground,
light: ktPrimaryButtonForeground,
hcDark: null,
hcLight: null
},
localize('Active toolbar button foreground.')
);
export const ktToolbarButtonSelectionBackground = registerColor(
'kt.toolbarButton.selectionBackground',
{
dark: ktPrimaryButtonBackground,
light: ktPrimaryButtonBackground,
hcDark: null,
hcLight: null
},
localize('Active toolbar button background.')
);
export const ktToolbarButtonForeground = registerColor(
'kt.toolbarButton.foreground',
{
dark: ktPrimaryButtonForeground,
light: ktPrimaryButtonForeground,
hcDark: null,
hcLight: null
},
localize('Default toolbar button foreground.')
);
export const ktToolbarButtonBackground = registerColor(
'kt.toolbarButton.background',
{
dark: ktPrimaryButtonClickBackground,
light: ktPrimaryButtonClickBackground,
hcDark: null,
hcLight: null
},
localize('Default toolbar button background.')
);
Use floating components
When writing extensions, we will inevitably use floating windows to allow users to perform secondary interactions. When writing such codes on the OpenSumi Browser side, since the overall solution adopts a sandbox isolation mechanism, the Browser layer in the extension cannot get the top Document
, so when using components with floating properties such as Modal
, Dialog
, Select
in some libraries, you need to re-bind a rendering container for such components.
Take the Modal
component in AntD as an example, you need to pass in the rendering container of the current component when using it, otherwise the corresponding component will not work properly.
// ...
<Modal title="Basic Modal" getContainer={ref.current}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>