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>
    );
  }
}
相关推荐
quweiie13 分钟前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan201529 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20182 小时前
Ruby如何采集直播数据源地址
前端·chrome