react wired elements

反应元素

有线元素作为反应组件。

• 非常适合快速原型制作
• 包括打字稿类型？

故事书演示

故事书演示包括互动式示例以及每个组件的道具和用法的详细文档。

有线元素是一个非常酷的库，可为Web组件提供使用SVG的线框外观。该库将每个有线元素包装在React组件中，并将可用属性，方法和样式选项揭示为道具（尽可能最好）。

安装

步骤1。使用yarn或npm安装此库。

 yarn add react-wired-elements

步骤2。将材料图标CSS文件包括在主HTML文件的头部。

 < head >
  < link
    href =" https://fonts.googleapis.com/css?family=Material+Icons&display=block "
    rel =" stylesheet "
  />
</ head > 

用法

 import React from 'react' ;
import { WiredCard , WiredButton } from 'react-wired-elements' ;

const App = ( ) => {
  return (
    < WiredCard fill = "#F5F5F5" elevation = { 3 } >
      < WiredButton onClick = { handleSubmit } > Submit </ WiredButton >
    </ WiredCard >
  ) ;
} ;

查看故事书演示，以获取互动示例以及详细的道具定义和使用说明。

这是组件的完整列表。单击要将其针对其故事书示例的任何组件。

• 纽带
• Wiredcalendar
• 戴德卡
• WiredCheckBox
• Wiredcombo
• 潜水员
• 潜水者
• 绳fab
• 导线布顿
• 高级时刻
• 潜水input
• 导线
• WiredLink
• WiredListBox
• WiredProgress
• Wiredradio
• Wiredradiogroup
• 有线搜索
• 导线
• 有线启动器
• Wiredtab
• 锻造塔
• 潜水区
• WiredToggle
• Wiredvideo

差异和已知问题

有线元素和该库之间存在一些命名和功能差异。这部分归因于反应和Web组件的工作方式的差异以及遵循React中常见的命名惯例/模式的努力。由于这些是Web组件，因此它们派遣本地事件而不是反应合成事件。

• maxRows WiredTextArea组件无法正常工作
• firstDate和lastDate不从事WiredCalendar