Kube Design
Kube Design is a set of React component libraries created for KubeSphere console.
Requirement
- Node.js 12.18+ (installation with nvm)
- Yarn 1.22.4+
Installation
yarn add @kube-design/componentsExample
import React, { Component } from "react";
import { Button } from "@kube-design/components";
class Example extends Component {
render() {
return <Button>Button</Button>;
}
}Import All Styles
There are two ways to import style files.
Use css
The css file can be imported directly, so no additional configuration is required in the webpack configuration file.
import "@kube-design/components/esm/styles/index.css";Use scss
If you import the scss file, you may need to compile this part of the scss file in the webpack configuration file.
import "@kube-design/components/esm/styles/index.scss";webpack.config.js
// module.rules
[
...otherRules,
{
test: /\.s[ac]ss$/i,
include: root("node_modules"),
use: ["style-loader", "css-loader", "sass-loader"],
},
];Modular Import
You can use babel-plugin-import to load the component library on demand.
When loading on demand, styles will also be imported on demand. You don't need to import all styles, only
main.scss.
Configure the babel as follows:
// babel.config.js
const getBabelPluginImportConfig = require('@kube-design/components/babel.plugin.import')
...
"plugins": [
['import', getBabelPluginImportConfig()],
]Import the main.scss instead of index.scss
import "@kube-design/components/esm/styles/main.scss";Localization
Kube Design use LocaleProvider component to support localization.
- Define locales
// locales.js
const locales = {
"en-US": {
HELLO: "Hello!",
},
"zh-CN": {
HELLO: "你好!",
},
};
export default locales;- Use the LocaleProvider component to wrap the root node
The locale method can be assigned to window for easy use.
import React from "react";
import ReactDOM from "react-dom";
import { LocaleProvider } from "@kube-design/components";
import locales from "./locales";
import App from "./App";
window.locale = LocaleProvider.locale;
const App = () => (
<LocaleProvider locales={locales} currentLocale="en">
<App />
</LocaleProvider>
);
ReactDOM.render(<App />, document.getElementById("root"));- In the root node App.jsx and its child nodes, use
locale.get('key')to get the language text
import React from "react";
import { Button } from "@kube-design/components";
export default () => <Button>{locale.get("HELLO")}</Button>;License
MIT © kubesphere