Ant Design使用

news2024/11/26 15:26:46

- - 官网
  - 在项目中使用
  - - 下载
    - 引入
    - - 方法1:全部引入
      - 方法2:按需引入-手动加载
      - 方法3:按需引入-自动加载
    - 组件
    - - Anchor
      - 作用：用于跳转到页面指定位置
        案例1-基础使用
        案例2-添加偏移量
        案例3-指定容器
        总结

官网

Ant Design官网

在项目中使用

在react中使用Ant Design

下载

使用如下命令安装最新版本 - 5.1.4
```
  npm i antd
```
目前使用的- 4.19.0
```
  npm i antd@4.19
```

引入

方法1:全部引入

[1]在App.css中引入样式
```
@import '~antd/dist/antd.css';
```

[2] 在需要使用antd组件的组件中引入组件并使用

import { Button } from 'antd';
export default function About (props) {
  return (
    <div>
      我是about组件111<Button type="primary">Button</Button>
    </div>
  )
}

在页面显示如下

方法2:按需引入-手动加载

向方法1中及时只是使用Button组件，也需要将所有组件的样式引入。

为了提高性能，我们可以仅将自己需要的组件引入 -> 按需引入。

import Button from 'antd/lib/button';
import 'antd/lib/button/style';
export default function About (props) {
  return (
    <div>
      我是about组件111<Button type="primary">Button</Button>
    </div>
  )
}

上述代码在页面显示如下

样式并没有起作用！
原因： ant design 在js中引入不起作用
```
@import 'antd/lib/button/style';
```
```
import Button from 'antd/lib/button';
import './index.css';
export default function About (props) {
  return (
    <div>
      我是about组件111<Button type="primary">Button</Button>
    </div>
  )
}
```
上述代码能正确显示样式

方法3:按需引入-自动加载

使用方法2虽然可以实现按需加载，但是若是使用多个组件，还需要多次引入组件+样式

babel-plugin-import 插件可以帮助我们自动加载
[1] 安装babel-plugin-import插件
```
npm i babel-plugin-import --save-dev 
```
[2] react配置文件默认是隐藏的 -> 使用命令npm run eject显示配置文件

在package.json 或 babel配置文件中添加配置

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins":[
    ["import", {
      "libraryName":"antd",
      "style":"css"
    }]
  ]
}

重启项目

[3]在组件中使用

import { Button } from 'antd';
function App() {
  return (
    <div className="App">
    <Button type='primary'>1111</Button>
    </div>
  );
}

export default App;

在组件中通过如下方式引入

  import { Button } from 'antd';

babel-plugin-import 插件会将上述代码转换为按需引入

  import Button from 'antd/lib/button';
  import 'antd/lib/button/style';

组件

Anchor

作用：用于跳转到页面指定位置

案例1-基础使用

将官方案例复制，稍作修改

import { Anchor } from 'antd';
import './useAnchor.css'
const { Link } = Anchor;
export default function UseAnchor(){
  return(
    <>
      <div style={{ height: '100px', background: 'rgba(255,0,0,0.02)', marginBottom:'20px'}}></div>
      <Anchor className='anchorlink'>
        <Link href='#part-1' title='看点1' />
        <Link href='#part-2' title='看点2' />
        <Link href='#part-3' title='看点3' />
        <Link href='#part-4' title='看点4' />
      </Anchor>
      <div id="part-1">
        <h2>看点1</h2>
        <div style={{ height: '200px', background: 'rgba(255,0,0,0.02)'}}></div>
      </div>
      <div id="part-2">
        <h2>看点2</h2>
        <div style={{ height: '200px', background: 'rgba(0,255,0,0.02)'}}></div>
      </div>
      <div id="part-3">
        <h2>看点3</h2>
        <div style={{ height: '200px', background: 'rgba(0,0,255,0.02)'}}></div>
      </div>
      <div id="part-4">
        <h2>看点4</h2>
        <div style={{ height: '200px', background: 'rgba(0,0,200,0.02)'}}></div>
      </div>
    </>
  )
}

上述代码在页面显示如下：
在这里插入图片描述

可以看到固定定位的元素遮盖了最前面的内容，我们可以设置一些偏移量。

案例2-添加偏移量

在案例1的基础上进行更改 -> Anchor组件添加targetOffset属性

<Anchor className='anchorlink' targetOffset={40}>

在这里插入图片描述
但是有时候我们并不是在window元素进行锚点定位而是在某个元素内，就可以给Anchor组件指定一个容器。

案例3-指定容器

注意：指定容器必须设置高度和overflow:auto;
在案例1的基础上进行修改

import { Anchor } from 'antd';
import './useAnchor.css'
const { Link } = Anchor;
export default function UseAnchor(){
  return(
    <>
      <div style={{ height: '100px', background: 'rgba(255,0,0,0.02)', marginBottom:'20px'}}></div>
      <div id='contain' style={{height:'300px', overflow: 'auto'}}>
        <Anchor 
          className='anchorlink' 
          targetOffset={40}
          getContainer={() => document.getElementById('contain')}
        >
          <Link href='#part-1' title='看点1' />
          <Link href='#part-2' title='看点2' />
          <Link href='#part-3' title='看点3' />
          <Link href='#part-4' title='看点4' />
        </Anchor>
        <div id="part-1">
          <h2>看点1</h2>
          <div style={{ height: '200px', background: 'rgba(255,0,0,0.02)'}}></div>
        </div>
        <div id="part-2">
          <h2>看点2</h2>
          <div style={{ height: '200px', background: 'rgba(0,255,0,0.02)'}}></div>
        </div>
        <div id="part-3">
          <h2>看点3</h2>
          <div style={{ height: '200px', background: 'rgba(0,0,255,0.02)'}}></div>
        </div>
        <div id="part-4">
          <h2>看点4</h2>
          <div style={{ height: '200px', background: 'rgba(0,0,200,0.02)'}}></div>
        </div>
      </div>
    </>
  )
}

在这里插入图片描述

总结

Anchor组件用于包裹Link组件
- affix 是否固定为固定模式，默认为固定模式
  - 若是固定模式(true) :Anchor组件在滑动到当前组件之前是静态定位，滑动到当前组件之后为固定定位(固定在可视窗口的最顶端)
  - 若是非固定模式(false):Anchor组件一直都为静态定位(不脱标)
  - 举例说明 -> 案例1
- targetOffset:锚点滚动偏移量,默认为0
  - 若是设置偏移量：对应元素不是滑动到当前元素的最顶端而是 最顶端下移对应偏移量
  - 举例说明-> 案例2
- getContainer：指定滚动的容器，默认为window
  - 注意：指定容器必须设置高度和overflow:auto;
  - 举例说明 -> 案例3
- onClick事件
  - 在这里可以阻止a标签的默认事件
  - 若是滚动位置存在偏差，可在此进行设置
```
onClick={ (e, link)=>{ 
  e.preventDefault() 
  // 找到锚点对应得的节点
  let element = document.querySelector(link.href)
  // 如果对应id的锚点存在，就跳滚动到锚点顶部
  element && element.scrollIntoView({ block: 'end', behavior: 'smooth', alignToTop: 'false' })
}}
```
Link组件 -> 最终被渲染为a标签
- href：锚点链接
- target：该属性指定在何处显示链接的资源
- title：文本内容