TheLandGame
uikit 0.1.4
Install from the command line:
Learn more about npm packages
$ npm install @thelandgame/uikit@0.1.4
Install via package.json:
"@thelandgame/uikit": "0.1.4"
About this version
-
安装
#使用 yarn yarn add @ICodeWorld-Inc/uikit #使用 npm npm install @ICodeWorld-Inc/uikit
-
安装 material-ui 相关依赖
#使用 yarn yarn add @emotion/react @emotion/styled @mui/material@next @mui/icons-material@next @mui/lab@next @mui/styles@next @mui/system@next react-slick slick-carousel react-table date-fns #使用 npm npm install @emotion/react @emotion/styled @mui/material@next @mui/icons-material@next @mui/lab@next @mui/styles@next @mui/system@next react-slick slick-carousel date-fns
-
请在入口文件处引入字体文件
import React from 'react'; import { ThemeProvider, CssBaseline } from '@mui/material'; import { theme } from '@ICodeWorld-Inc/uikit'; import '@ICodeWorld-Inc/uikit/dist/src/font/font.css'; ReactDOM.render( <React.StrictMode> <CssBaseline /> <ThemeProvider theme={theme}> <Root /> </ThemeProvider> </React.StrictMode>, container.querySelector('#root'), );
-
Layout使用方法// application entry // 注入 ThemeProvider 提供 config import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider } from '@mui/material/styles'; import { theme, LayoutConfigProvider } from '@ICodeWorld-Inc/uikit'; import CssBaseline from '@mui/material/CssBaseline'; import App from './route'; import '@ICodeWorld-Inc/uikit/dist/src/font/font.css'; ReactDOM.render( <React.StrictMode> <CssBaseline /> <ThemeProvider theme={theme}> <LayoutConfigProvider value={{ config: [ { label: 'Code GUI Junior' }, { label: '课程' }, { label: '我的作品' }, ], }} > <App /> </LayoutConfigProvider> </ThemeProvider> </React.StrictMode>, document.getElementById('root'), );
// 具体页面使用 Layout component import React from 'react'; import { Layout } from '@ICodeWorld-Inc/uikit'; export const Page = () => ( <Layout active={1}> <Other /> </Layout> );
// 具体页面覆盖 Provider 的值 import React from 'react'; import { Layout } from '@ICodeWorld-Inc/uikit'; import type { TLayoutConfigObject } from '@ICodeWorld-Inc/uikit'; cosnt customConfig:TLayoutConfigObject[] = [ { label: 'Python软件下载 · 少儿编程双师课堂', onClick:({index,label})=>console.log('hello ',index,label), sx:{ color:"pink" } }, { label: '学习系统-专业少儿编程', }, { label: 'Code GUI Junior', },] export const Page = ()=>( <Layout active={1} config={customConfig}> <Other /> </Layout> )
-
发布新版本
pnpm run publish:uikit
