React TypeScript | 快速了解 antd 的使用

1. 安装:

就像安装其他插件库一样,在项目文件夹下执行:

shell 复制代码
npm install antd --save

如果你安装了 yarn,也可以执行:

shell 复制代码
yarn add antd

2. 引用

typescript 复制代码
import { Button, Tooltip } from "antd";
import "antd/dist/antd.css";

注意不要忘了引用样式,否则代码没问题显示会出问题。

3. 使用

如下,一个简单 demo:

完整代码:

typescript 复制代码
import { Component } from "react";
import { Button, Tooltip } from "antd";
import "antd/dist/antd.css";

export default class AntdPage extends Component {
  render() {
    return (
      <div style={{ margin: "50px" }}>
        <p>在 Ant Design 中我们提供了五种按钮。</p>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <br />
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
        <br />
        {/* 文字提示 */}
        <Tooltip title="prompt text">
          <span>Tooltip will show on mouse enter.</span>
        </Tooltip>
        <Tooltip placement="topLeft" title="Prompt Text">
          <Button>Align edge / 边缘对齐</Button>
        </Tooltip>
        {/* 等价于 */}
        <Tooltip
          placement="topLeft"
          title="Prompt Text"
          arrowPointAtCenter={false}
        >
          <Button>Align edge / 边缘对齐</Button>
        </Tooltip>
        <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
          <Button>Arrow points to center / 箭头指向中心</Button>
        </Tooltip>
        {/* 自定义children */}
        <Tooltip placement="bottom" title="提示文本" arrowPointAtCenter>
          <div
            style={{
              width: "50px",
              height: "50px",
              backgroundColor: "red",
              margin: "30px",
            }}
          >
            <p>自定义child</p>
          </div>
        </Tooltip>
      </div>
    );
  }
}
相关推荐
风无雨25 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780092 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记3 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆3 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js