Ant Design使用笔记

最新推荐文章于 2025-04-08 10:09:27 发布

Verena_YF

最新推荐文章于 2025-04-08 10:09:27 发布

阅读量1.0k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Verena_YF/article/details/108848035

版权

本文介绍了如何在Ant Design中使用Card组件实现富文本title，包括字体颜色、大小和加粗的设置。此外，展示了如何合并Table表格并使其两端对齐，以及在Card上添加右上角按钮和调用Modal模态框的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Card添加富文本title

import {Card} from 'antd'
import React from 'react'

const showTitle = () => {
	<div>
		<span>纵有疾风起</span>
		<span>人生不言弃</span> 
	</div>
}

<Card title={showTitle()}>
	content...
	content...
</Card>

修改字体颜色、大小、加粗

<span style={{ 
		color: 'rgb(125,125,125)', 
		fontSize: 'small', 
		fontWeight: 'bold' 
		}}>
		面朝大海，春暖花开
</span>

Table表格合并

效果图所示

<Table columns={columns1} dataSource={data2} pagination={false} summary={pageData => {
            return (
              <>
              <Table.Summary.Row>
                <Table.Summary.Cell>总金额</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={6}>{totalFee}</Table.Summary.Cell>
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell>税费</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={6}>{tax}</Table.Summary.Cell>
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell>含税费总金额</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={6}>{totalFeeTax}</Table.Summary.Cell>
              </Table.Summary.Row>
              </>
            );
        }}/>

组件在两头，空白居中

<Space 
align='center' 
style={{ display: 'flex',justifyContent:'space-between'}}>
	两个组件
</Space>

Card右上角添加按钮

<Card title="Title" 
 	  extra={<Button onClick={} type="primary">Button</Button>} />

Modal弹框作为函数调用

Modal.confirm({
        title: '删除任务',
        content: '确定删除该任务吗？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => deleteItem(id)
      });