lil ui

lil ui

Reactプロジェクトの非常に基本的なコンポーネントのセット。

TailWindCSSまたはスタイルのコンポーネントを使用して、箱から出したり、DIY UIファッションで使用するように設計されています。

→デモとドキュメント

インストール

 yarn add lil-ui
npm install lil-ui

コンポーネント

• モーダル
• ペイン
• ボタン

モーダル

小道具	タイプ	デフォルト値	オプション
show	boolean	false	モーダルを示すのにtrue モーダルを非表示にするためのfalse
children	string / component	-	モーダルコンテンツは子供として渡すことができます
titleComponent	component	-	モーダル見出しのカスタムコンポーネント
backdropComponent	component	-	モーダル背景のカスタムコンポーネント
title	string	-	モーダルタイトル
onClose	function	-	モーダルが閉じるときに実行する機能
hideBackdrop	boolean	-	透明な背景を持つようにTRUEに設定します
modalWidth	string	500px	Modalのカスタム幅を設定します。たとえば、600px

ペイン

小道具	タイプ	デフォルト値	オプション
show	boolean	false	モーダルを示すのにtrue モーダルを非表示にするためのfalse
children	string / component	-	モーダルコンテンツは子供として渡すことができます
titleComponent	component	-	モーダル見出しのカスタムコンポーネント
backdropComponent	component	-	モーダル背景のカスタムコンポーネント
title	string	-	モーダルタイトル
onClose	function	-	モーダルが閉じるときに実行する機能
hideBackdrop	boolean	-	透明な背景を持つようにTRUEに設定します
paneWidth	string	500px	Modalのカスタム幅を設定します。たとえば、600px
position	string	-	left設定して、左からペインを表示します

ボタン

小道具	タイプ	デフォルト値	オプション
className	string	-	buttonタグのカスタムクラス名
onClick	function	-	ボタンがクリックされたときに呼び出される関数
style	object	-	buttonタグに適用するインラインスタイルのオブジェクト
children	string / component	-	ボタン用のラベル