react wired elements
`0.1.6` release
反応成分としての有線元素。
ストーリーブックのデモには、インタラクティブな例と、各コンポーネントの小道具と使用に関する詳細なドキュメントが含まれています。
Wired Elementsは、SVGを使用したワイヤーフレームルックを備えたWebコンポーネントを提供する非常にクールなライブラリです。このライブラリは、それぞれの有線要素をReactコンポーネントにラップし、利用可能な属性、方法、スタイリングオプションを小道具として(可能な限り最善)させます。
ステップ1。 yarnまたはnpmを使用してこのライブラリをインストールします。
yarn add react-wired-elements
ステップ2。メインHTMLファイルのヘッドにマテリアルアイコンCSSファイルを含めます。
< 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 >
) ;
} ;インタラクティブな例と詳細な小道具の定義と使用手順については、ストーリーブックのデモをチェックアウトします。
コンポーネントの完全なリストは次のとおりです。任意のコンポーネントをクリックして、ストーリーブックの例に向けます。
有線要素とこのライブラリの間には、いくつかの命名と機能の違いがあります。これは、部分的には、ReactとWebコンポーネントがどのように機能するかの違いと、反応の一般的な命名規則/パターンに従う努力によるものです。これらはWebコンポーネントであるため、合成イベントを反応するのではなく、ネイティブイベントを派遣します。
WiredTextAreaコンポーネントのmaxRows小道具が機能していませんfirstDateとlastDate WiredCalendarで作業していません