mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2025-04-06 21:40:23 +08:00
60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="overflow: hidden">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>sunmao-ui runtime examples</title>
|
|
</head>
|
|
<body>
|
|
<select></select>
|
|
<div id="root"></div>
|
|
<script type="module">
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { initSunmaoUI } from './src';
|
|
import { ChakraProvider } from '@chakra-ui/react';
|
|
import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
|
|
import { ArcoDesignLib } from '@sunmao-ui/arco-lib/lib';
|
|
import examples from '@example.json';
|
|
import '@arco-design/web-react/dist/css/arco.css';
|
|
|
|
const selectEl = document.querySelector('select');
|
|
for (const example of examples) {
|
|
const optionEl = document.createElement('option');
|
|
optionEl.innerText = example.name;
|
|
selectEl.appendChild(optionEl);
|
|
}
|
|
selectEl.addEventListener('change', () => {
|
|
render(examples.find(e => e.name === selectEl.value));
|
|
});
|
|
|
|
const rootEl = document.querySelector('#root');
|
|
const render = example => {
|
|
ReactDOM.unmountComponentAtNode(rootEl);
|
|
const { App, registry } = initSunmaoUI({
|
|
libs: [sunmaoChakraUILib, ArcoDesignLib],
|
|
});
|
|
const { app, modules = [] } = example.value;
|
|
window.registry = registry;
|
|
modules.forEach(m => {
|
|
registry.registerModule(m);
|
|
});
|
|
ReactDOM.render(
|
|
React.createElement(
|
|
React.StrictMode,
|
|
null,
|
|
React.createElement(
|
|
ChakraProvider,
|
|
null,
|
|
React.createElement(App, { options: app }, null)
|
|
)
|
|
),
|
|
rootEl
|
|
);
|
|
};
|
|
|
|
render(examples[0]);
|
|
</script>
|
|
</body>
|
|
</html>
|