semi.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="screen-orientation" content="portrait">
  7. <meta name="x5-orientation" content="portrait">
  8. <meta name="format-detection" content="telephone=no">
  9. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1, minimal-ui, viewport-fit=cover">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  12. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  13. <!-- <script crossorigin src="https://unpkg.com/browse/@babel/[email protected]/babel.min.js"></script> -->
  14. <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  15. <!-- <script src='../packages/semi-ui-react/dist/umd/semi-ui-react.js'></script>
  16. <link rel="stylesheet" href="../packages/semi-theme-default/css/semi.css"> -->
  17. <script src="https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js"></script>
  18. <link rel="stylesheet" href="https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css">
  19. </head>
  20. <body>
  21. <div id="root">1</div>
  22. <script type="text/babel">
  23. console.log(SemiUI)
  24. const { Input, Button, Toast, Icon, Form } = SemiUI;
  25. ReactDOM.render(
  26. <div>
  27. <Button onClick={() => Toast.warning({ duration: 0, content: 'wah' })}>test</Button>
  28. <Input defaultValue='semi' onChange={(value) => Toast.info('abc')}></Input>
  29. <Icon type='youtube' />
  30. <Form render={({ formState, formApi, values }) => (
  31. <div>
  32. <Form.Select field="Role" label='角色' style={{width:176}}>
  33. <Form.Select.Option value="admin">管理员</Form.Select.Option>
  34. <Form.Select.Option value="user">普通用户</Form.Select.Option>
  35. <Form.Select.Option value="guest">访客</Form.Select.Option>
  36. </Form.Select>
  37. <Form.Input field='UserName' label='用户名' style={{width:80}}/>
  38. <Form.Input field='Password' label='密码' style={{width:176}}/>
  39. <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
  40. </div>
  41. )} layout='horizontal' onValueChange={values=>console.log(values)}>
  42. </Form>
  43. </div>,
  44. document.getElementById("root")
  45. );
  46. </script>
  47. </body>
  48. </html>