二、通用、布局、导航组件

最新推荐文章于 2022-03-24 15:58:49 发布

谁诉离殇~

最新推荐文章于 2022-03-24 15:58:49 发布

阅读量1.3k

点赞数 1

分类专栏：框架(level 1) # React系列(level 2) # antd(level 3) 文章标签： html css 前端

本文链接：https://blog.csdn.net/rocktanga/article/details/121328560

版权

本文详细介绍了Ant Design前端框架中的通用组件（Button、Icon、Typography）、布局组件（Grid、Layout）以及导航组件（Affix、Breadcrumb、Dropdown、Menu、Pagination、PageHeader、Steps）。Button组件提供了丰富的属性定制按钮样式和功能，Icon组件支持自定义SVG图标和Font图标，Typography组件用于文本排版。Grid组件包括Row和Col，用于创建24栅格布局，Layout组件提供整体页面布局。导航组件包括Affix（固钉效果）、Breadcrumb（面包屑导航）、Dropdown（下拉菜单）、Menu（导航菜单）、Pagination（分页）和Steps（步骤条），用于实现不同场景的交互导航需求。

摘要由CSDN通过智能技术生成

一、通用组件

1、Button按钮

按钮用于开始一个即时操作。

何时使用：标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑

(0)<Button>组件对应的事件

<1>onClick事件：表示点击按钮时的回调.可选值：无；默认值： false；类型：(event) => void。

(1)<Button>组件对应属性: 这个即单独的一个按钮组件。支持原生 button 的其他所有属性

<1>disabled: 表示按钮失效状态.可选值：无；默认值： false；类型：boolean。

<2>ghost: 表示幽灵属性，使按钮背景透明，按钮背景显示颜色为背景色.可选值：无；默认值： false；类型：boolean。

<3>href: 表示点击跳转的地址，指定此属性 button 的行为和 a 链接一致.可选值：无；默认值： -；类型：string。

<4>htmlType: 表示设置 button 原生的 type 值，可选值请参考 HTML 标准.可选值：无；默认值： button；类型：string。

<5>icon: 表示给按钮添加小图标.可选值：无；默认值： -；类型：string。

如果button里面还有文字的话，icon出现在button左边,文字出现在button右边

<6>loading: 表示使按钮显示为加载状态.可选值：无；默认值： false；类型：boolean | { delay: number }。

<7>shape: 表示设置按钮形状，可选值为 circle、 round 或者不设.可选值：无；默认值： -；类型：string。

circle: 按钮为圆形

round: 按钮垂直方向的border-radius为50%。即左右看起来为半圆

不设: 按钮为长方形，只有一点点的border-radius

<8>size: 表示设置按钮大小，可选值为 small large 或者不设.可选值：无；默认值： default(中等大小)；类型：string。

<9>target: 表示相当于 a 链接的 target 属性，href 存在时生效.可选值：无；默认值： -；类型：string。

<10>type: 表示设置按钮类型，可选值为 primary dashed danger link或者不设.可选值：无；默认值： -；类型：string。

primary: 主按钮，背景为蓝色，里面文字为白色

dashed: 边框为虚线的按钮，背景为白色

danger: 背景为红色，里面文字为白色

link: 链接按钮，没有边框为背景，只有一个蓝色的文字

不设置type: 不设置type，边框实线的按钮，背景为白色

<11>block: 表示将按钮宽度调整为其父宽度的选项.可选值：无；默认值： false；类型：boolean。

(2)<Button>的子组件<Button.Group>按钮组组件对应属性: 这个即一个按钮组，几个按钮挨着放的那个。这个在引入的时候只需要引入一个Button属性就好了，按钮组是Button组件上面的属性

<1>size: 表示设置按钮组的大小，可选值为 small large 或者不设.可选值：无；默认值： default(中等大小)；类型：string。

import React from 'react';
import { Button } from 'antd';
const ButtonGroup = Button.Group;

class demo extends React.Component {
  state = {loading: false,};
  enterLoading = () => {this.setState({ loading: true });};
    render() {
      return (
        <div>
            <Button type="primary" shape="round" icon="search" ghost>Adsadsad</Button>
            <Button type="primary" shape="circle" size="large" icon="search" disabled />
            <Button type="primary" loading={this.state.loading} onClick={() => {this.enterLoading()}}>Click me!</Button>
            <ButtonGroup size="large">
              <Button type="primary" icon="cloud" />
              <Button type="primary" icon="cloud-download" />
            </ButtonGroup>
        </div>
      );
    }
  }
export default demo;

2、Icon图标

语义化的SVG 图标。地址 https://ant.design/components/icon-cn/#components-icon-demo-iconfont

何时使用：可以用一个link标签，type属性制定为对应类名；或者配合其它组件使用，用在其它组件的icon属性上面

(1)<Icon>组件对应属性: 这个即一个图标组件

<1>type: 表示图标类型。遵循图标的命名规范.可选值：无；默认值： -；类型：string。

<2>style: 表示设置图标的样式，例如 fontSize 和 color(这里面color的优先级低于theme的twoTone，和属性twoToneColor).可选值：无；默认值： -；类型：CSSProperties。

由于这个的值为一个对象，所以在使用的时候，里面也要加个大括号。<Icon type="smile" theme="filled" style={ {fontSize: '50px',color: 'green'}}/>

<3>theme: 表示图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标.可选值：无；默认值： ‘outlined’；类型：‘filled’ | ‘outlined’ | ‘twoTone’。

filled: 这个主题，即把图标填充的主题

outlined: 这个主题，即图标只有一条线的主题

twoTone: 这个主题，说的是把图标设置为两种颜色，但是实际上测试出来还是只有一种颜色，并且会覆盖设置在style上面的color

<4>spin: 表示是否让图标一直旋转.可选值：无；默认值： false；类型：boolean。

<5>rotate: 表示图标旋转的角度，相当于css3中的transform：rotate();.可选值：无；默认值： -；类型：number。

<6>component: 表示这个属性就算把传入的svg代码，作为svg显示出来.可选值：无；默认值： -；类型：ComponentType，即一个svg代码。

<7>twoToneColor: 表示当theme值为twoTone的时候，设置图标的颜色(这时候设置color无效).可选值：无；默认值： -；类型：string (十六进制颜色)。

(2)自定义 font 图标createFromIconfontCN()方法：这个方法用来传入在 iconfont.cn 上生成的url，来自定义图标

import React from 'react';
import { Icon } from 'antd';
class demo extends React.Component {
    render() {
      return (
        <div className="icons-list">
            <Icon type="setting" spin/>
            <Icon type="home" theme="twoTone" twoToneColor="red" rotate={180}/>
            <Icon type="smile" theme="filled" style={
  {fontSize: '50px',color: 'red'}}/>
        </div>
      );
    }
  }
export default demo;

// 自定义图标如下
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);

3、Typography排版

文本的基本格式

何时使用：<1>当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。<2>当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。

二、布局组件

1、Grid栅格

24 栅格系统，就算一个行组件和一个列组件。和element ui的布局系统差不多的

何时使用：布局的时候使用

(1)<Row>组件对应属性: 一个行组件

<1>gutter: 表示栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]，数组形式无效.可选值：无；默认值： 0；类型：number/object/array。还没用

<2>justify: 表示flex 布局下的水平排列方式.可选值：start end center space-around space-between；默认值： start；类型：string。

<3>align: 表示flex 布局下的垂直对齐方式,值(和CSS里面写align-items是不一样的值).可选值：top middle bottom；默认值： top；类型：string。

<4>type: 表示布局模式，可选 flex.可选值：无；默认值： -；类型：string。

(2)<Col>组件对应属性: 一个列组件。列（Col）必须放在 Row 内

<1>span: 表示栅格占据的列数（总共为24个），为 0 时相当于 display: none.可选值：无；默认值： -；类型：number。

如果一个row里面的所以col的span的总数大于了24个，多余的那个会到下一行

<2>order: 表示当type值为flex的时候，调整当前的栅格col的顺序.可选值：无；默认值： 0；类型：number。

<3>offset: 表示栅格左侧的间隔格数，offset会占用一列总共的num，所以会改变后面元素的位置，把后面的元素往后面挤.可选值：无；默认值： 0；类型：number。

实际上就是给目标元素加上了margin-left。有可能把元素挤到下一行去

<4>pull: 表示栅格向左移动格数，push和pull不会占用一列总共的num，所以不会改变后面元素的位置</