首页html 使用antd

html 使用antd

时间: 2023-10-24 21:23:33 浏览: 256

可以使用 Ant Design 提供的组件库来构建 HTML 页面。首先，在 HTML 文件中引入 Ant Design 的 CSS 和 JavaScript 文件： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ant Design Demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.css" /> </head> <body> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.js"></script> <script>ReactDOM.render(App(), document.getElementById('root'));</script> </body> </html> ``` 然后在 JavaScript 文件中编写代码，使用 Ant Design 的组件： ```jsx function App() { const { Option } = Select; const [value, setValue] = useState(''); function handleChange(value) { setValue(value); } return ( <div> <h1>Hello, Ant Design!</h1> <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}> <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> <Option value="disabled" disabled> Disabled </Option> <Option value="Yiminghe">yiminghe</Option> </Select> <p>You selected: {value}</p> </div> ); } ``` 这个例子中，使用了 `Select` 组件和 `useState` hook 来实现一个选择框，并在页面上展示用户选择的选项。最后，在 JavaScript 文件中使用 `ReactDOM.render` 将应用渲染到 HTML 页面中。

阅读全文