antDesign Card 右上角删除
时间: 2023-09-01 22:13:40 浏览: 69
要在Ant Design Card组件的右上角添加一个删除按钮,你可以通过在Card组件中添加一个自定义操作按钮来实现。下面是一个示例代码:
```
import { Card, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
const onDelete = () => {
// 处理删除操作
}
const cardExtra = (
<Button type="text" onClick={onDelete}>
<DeleteOutlined />
</Button>
);
const MyCard = () => (
<Card title="Card title" extra={cardExtra}>
<p>Card content</p>
</Card>
);
```
在上面的示例中,我们创建了一个名为`onDelete`的函数来处理删除操作。然后,我们创建了一个名为`cardExtra`的变量来存储自定义操作按钮,该按钮包含一个名为`DeleteOutlined`的Ant Design图标和`onClick`事件处理程序`onDelete`。最后,我们将`cardExtra`变量作为Card组件的`extra`属性传递,以显示自定义操作按钮。
相关问题
ant-design-vue card只显示右边边框
您好,关于您提出的问题,可以通过设置 `bordered` 属性为 `false`,然后自定义样式隐藏左、上、下边框,只显示右边框。具体的代码可以参考以下示例:
```html
<a-card bordered="false" class="custom-card">
<!-- card内容 -->
</a-card>
```
```css
.custom-card {
border-right: 1px solid #e8e8e8;
border-top: none;
border-bottom: none;
border-left: none;
}
```
注意要将 `bordered` 属性设置为 `false`,然后自定义样式只显示右边框。希望能对您有所帮助,如有疑问请随时追问。
Ant Design Vue 两个card怎么调距离
您可以使用Ant Design Vue的Grid组件来调整两个Card之间的距离。在Grid组件里,您可以使用Col组件来设置每个Card所占的列数,以及设置它们之间的间隔。
例如:
```
<template>
<a-row :gutter="16">
<a-col :span="12">
<a-card>Card 1</a-card>
</a-col>
<a-col :span="12">
<a-card>Card 2</a-card>
</a-col>
</a-row>
</template>
```
在上面的示例中,我们使用Grid组件将两个Card放在同一行,并使用Col组件将它们分别放在两个12列的栅格中。我们还设置了一个gutter属性来设置它们之间的间隔,这里设置为16。
您可以根据需要调整Col组件的span属性和gutter属性来达到您想要的距离效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)