成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

antd源碼解讀（2）- Icon

fjcgreat / 2392人閱讀

摘要：作為開發(fā)當中使用相對頻繁的一個組件，其實現也很簡單，但是其中比較麻煩的一部分是字體的制作，可以參看這篇文章。接口中的種屬性方法，不屬于上述六種。為事件屬性，可以大家也可以根據上面所提供的制作的方法和這樣的方式來實現自己的組件

Icon

icon作為開發(fā)當中使用相對頻繁的一個組件，其實現也很簡單，但是其中比較麻煩的一部分是icon字體的制作，可以參看這篇文章。

Antd的Icon組件使用了很簡單的css來實現交互與動效

import React from "react";
import classNames from "classnames";  
import omit from "omit.js";
//classNames是條件判斷輸出className的值
//omit是移出對象的指定屬性，而實現淺拷貝

//定義IconProps接口
export interface IconProps {
  type: string;
  className?: string;
  title?: string;
  onClick?: React.MouseEventHandler;
  spin?: boolean;
  style?: React.CSSProperties;
}

const Icon = (props: IconProps) => {
  const { type, className = "", spin } = props;
  const classString = classNames({
    anticon: true,
    "anticon-spin": !!spin || type === "loading", // 是否需要旋轉動畫，loading這個icon是默認加上旋轉動效的
    [`anticon-${type}`]: true,
  }, className);

  // 這里說一下為什么要用omit()：html的標簽，其標準標簽屬性只有六種：id、class、title、style、dir、lang。
  // IconProps接口中的6種屬性（方法），type、spin不屬于上述六種。onClick為事件屬性，可以；
  return ;
};

export default Icon;

大家也可以根據上面所提供的制作icon的方法和這樣的方式來實現自己的Icon組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/89006.html

相關文章

  • antd源碼解讀（3）- Button

    Button Button包括了兩個組件，Button與ButtonGroup。 ButtonProps 看一個組件首先看的是他的傳參也就是props，所以我們這里先看Button組件的ButtonProps export type ButtonType = primary | ghost | dashed | danger; export type ButtonShape = circl...

    miguel.jiang 評論0 收藏0

  • antd源碼解讀（1）-index.js

    github: 地址gitbook: 地址 Index.js 看一個代碼的時候首先當然是從他的入口文件開始看起，所以第一份代碼我們看的是/index.js文件 開始 打開index.js文件，代碼只有28行，其中包含了一個camelCase函數（看函數名就知道這是個給名稱進行駝峰命名法的函數），一個req變量，以及這個的變量操作和export操作 在這個文件里面我首先查了require.conte...

    zeyu 評論0 收藏0

  • antd源碼解讀（二）Tooltip組件解析

    摘要：結構項目結構如下，負責外層封裝，負責事件綁定與渲染控制。節(jié)點通過決定事件綁定情況，即通過屬性綁定事件情況，事件控制組件的屬性，這里就不詳細說了。為隱藏狀態(tài)下的添加的，并包裹懶加載組件。 引言 antd的Tooltip組件在react-componment/trigger的基礎上進行封裝，而組件Popover和Popconfirm是使用Tooltip組件的進行pop，在react-com...

    fanux 評論0 收藏0

  • antd源碼解讀（6）- Affix

    摘要：這個組件是一個圖釘組件，使用的布局，讓組件固定在窗口的某一個位置上，并且可以在到達指定位置的時候才去固定。 Affix 這個組件是一個圖釘組件，使用的fixed布局，讓組件固定在窗口的某一個位置上，并且可以在到達指定位置的時候才去固定。 AffixProps 還是老樣子，看一個組件首先我們先來看看他可以傳入什么參數 // Affix export interface Affix...

    coordinate35 評論0 收藏0

  • antd源碼解析（一）Form組件解析

    摘要：引言看過源碼的都知道，其實是在一組組件的基礎上進行了一層封裝，本文主要解讀組件的基礎組件，另外會略過模式下的代碼。解讀源碼首先要從自己最常用的或者感興趣的入手，首先組件最主要的還是在這個裝飾器入手。 引言 看過antd源碼的都知道，antd其實是在一組react-componment組件的基礎上進行了一層ui封裝，本文主要解讀antd組件Form的基礎組件react-componmen...

    timger 評論0 收藏0

發(fā)表評論

0條評論

fjcgreat

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<