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