反应字体IconPicker组件

反应版本 字体Icon Picker 键这是 重写, 不是围绕 jQuery 版本的包装 .

使用 FontIconPicker 组件,您可以呈现一个用户界面,人们可以选择一个或 更多字体。 在赤骨中,它看起来像这样.

安装

国家预防机制或也门

国家预防机制是首选的设置方式。 你可以从那里找到它 这里。 。 。 .

从你的项目做

npm i @fonticonpicker/react-fonticonpicker

同时安装对等依赖性 .

npm i react react-dom classnames prop-types react-transition-group

并需要文件.

ES6 标准

import FontIconPicker from '@fonticonpicker/react-fonticonpicker';

ES5号机车

const FontIconPicker = require('@fonticonpicker/react-fonticonpicker');

并用作回放组件. 检查 文档网站 比方说.

光盘N

出于某种原因,如果你更喜欢CDN,那么它可以在 unpkg.com (英语)。 。 。 .

在您的 HTML 文档中设置它们, 并同时设置对等依赖的 UMD 构建 .

下载源

我们分发源文件的制作版本 基子释放头在那边 和下载 fonticonpicker.react.zip 文档.

使用量

这里有一个例子,与 创建- 反应- 应用程序。 。 。 .

从您的工程目录中可以 :

yarn add classnames prop-types react-transition-group @fonticonpicker/react-fonticonpicker

现在编辑您的 App.js 文档包含以下内容.

import React, { Component } from 'react';
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
import logo from './logo.svg';
import './App.css';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'fipicon-angle-left',
    };
  }
  handleChange = (value) => {
    this.setState({ value });
  }
  render() {
    const props = {
      icons: ['fipicon-angle-left', 'fipicon-angle-right', 'fipicon-angle-up', 'fipicon-angle-down'],
      theme: 'bluegrey',
      renderUsing: 'class',
      value: this.state.value,
      onChange: this.handleChange,
      isMulti: false,
    };
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <FontIconPicker {...props} />
      </div>
    );
  }
}

export default App;

这将成为一个基本的 FontIconPicker 组件 。 高级用法如下: 页:1 文档。 。 。 .

道具

发展环境

开发和建设是在下列各方的帮助下进行的: 网络软件包。 。 。 .

先用叉子和克特克隆你的机器上的回波.

git clone [email protected]:<username>/react-fonticonpicker.git

现在安装所有依赖。 确保你有 节点 版本9或更高.

npm install

现在运行服务器

npm start

这将打开一个热重装的 Webpack dev 服务器 。 您可以访问服务器 从 http://localhost:7770 (英语)。 。 。 .

现在对组件进行修改,并看到其活化. 增加单位测试和 酌情进行融合测试.

如果您的修改会使快照无效, 请确保将它们更新( 使用 理由充分).

在做公关时,尽量不要建立文件或文件。 这会造成不必要的 合并冲突.

正在处置的其他 npm 命令 :

• npm run test: 运行 eslint 接下来是 stylelint 财务报告和审定财务报表 jest 测试.
• npm run start:运行有热重载的dev服务器.
• npm run docs:为生产建造文件.
• npm run build: 构建UMD & CSS文件以供发行.

贷项

反应字体IconPicker 已被开发 洗手间 主要用于: 表格。 。 。 . 最初的想法来自 j 查询字体 以 亚历山德罗·比诺伊特。 。 。 .

没有凉爽,这些都不可能 韦斯·博斯 他的电话 对初学者课程的反应这真是太棒了.