antd的基本使用示例
时间: 2023-07-11 16:08:17 浏览: 40
Ant Design是一个非常流行的React UI组件库,基本使用示例如下:
1. 安装Ant Design
```
npm install antd --save
```
2. 引入Ant Design样式文件
```
import 'antd/dist/antd.css';
```
3. 使用Ant Design组件
```
import React from 'react';
import { Button } from 'antd';
function App() {
return (
<div>
<Button type="primary">按钮</Button>
</div>
);
}
export default App;
```
这个例子中,我们使用了Ant Design组件库中的`Button`组件,并设置其`type`为`primary`,表示主要按钮。
当然,Ant Design还有很多其他组件可以使用,具体可以参考官方文档。
相关问题
antd 开关按钮使用
antd 的开关按钮使用非常简单。首先,确保你已经安装了 antd 库。然后,在你的代码中引入开关组件:
```jsx
import { Switch } from 'antd';
```
接下来,在你的组件中使用 Switch 组件,并为其添加相应的属性和事件处理程序:
```jsx
<Switch onChange={handleSwitchChange} checked={isChecked} />
```
在上面的代码中,`onChange` 属性是一个事件处理程序,它会在开关状态改变时被调用。`checked` 属性是一个布尔值,用于控制开关的状态。
你需要在组件的状态中定义一个变量来保存开关的状态,并在事件处理程序中更新它。下面是一个示例:
```jsx
import React, { useState } from 'react';
import { Switch } from 'antd';
const MyComponent = () => {
const [isChecked, setIsChecked] = useState(false);
const handleSwitchChange = (checked) => {
setIsChecked(checked);
};
return (
<div>
<Switch onChange={handleSwitchChange} checked={isChecked} />
</div>
);
};
export default MyComponent;
```
以上就是使用 antd 开关按钮的基本步骤。你可以根据自己的需求,进一步定制开关按钮的样式和行为。
antd中Layout使用
Ant Design的Layout组件提供了基础的页面布局,包括头部、侧边栏、底部、内容区域等。以下是一个简单的使用Ant Design的Layout组件的示例:
```jsx
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
function MyLayout() {
return (
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content">Content</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
);
}
export default MyLayout;
```
在这个示例中,我们使用了Layout、Header、Content和Footer组件来创建了一个基本的页面布局。在Header组件中,我们添加了一个Logo和一个菜单,而在Content组件中,我们添加了一个面包屑导航和内容区域。在Footer组件中,我们添加了版权信息。此外,你还可以使用Sider组件来添加侧边栏。
希望这个示例能够帮助你了解如何使用Ant Design的Layout组件。