node-red-node-ui-list
Version:
Node-RED Dashboard UI widget node for simple list
39 lines (35 loc) • 3.43 kB
HTML
<script type="text/html" data-help-name="ui_list">
<p>項目リスト表示Node-RED widgetノード</p>
<h3>入力</h3>
<dl class="message-properties">
<dt>payload<span class="property-type">配列</span></dt>
<dd>以下の属性を持つオブジェクト配列:
<ul>
<li><b>title</b> - 要素のタイトル,</li>
<li><b>description</b> - 要素の説明。種別が「<b>1行</b>」の場合は省略可(省略可),</li>
<li><b>menu</b> - メニュー要素(省略可),</li>
<li><b>icon</b> - アイコンのURL (省略可),</li>
<li><b>icon_name</b> - フォントアイコン名 (省略可).</li>
</ul>
</dd>
</dl>
<h3>出力</h3>
<dl class="message-properties">
<dt>payload<span class="property-type">オブジェクト</span></dt>
<dd>要素もしくはメニュー要素がクリックもしくはチェックされた場合、要素を出力ポートに送信します。</dd>
</dl>
<h3>詳細</h3>
<p>要素配列を表示するUI widgetです。</p>
<p><code>msg.payload</code>に要素配列を渡します。要素は<code>title</code>、<code>description</code>、<code>menu</code>、<code>icon</code>および<code>icon_name</code>プロパティを含みます。<code>description</code>、<code>menu</code>、<code>icon</code>および<code>icon_name</code>プロパティは省略可能です。</p>
<p>要素の表示形式は<code>表示形式</code>メニューから選択可能です。</p>
<p>要素の対する動作は<code>動作</code>メニューから選択できます:</p>
<ul>
<li><b>なし</b> - 動作なし,</li>
<li><b>クリックした要素を送信</b> - クリック時に要素を出力ポートに送信,</li>
<li><b>チェック状態が変化した要素を送信</b> - チェックボックスの状態が変化した場合、要素を出力ポートに送信。チェックボックス状態は、出力されるペイロードオブジェクトの<code>isChecked</code>フラグに設定します。</li>
<li><b>スイッチが変化した要素を送信</b> - スイッチの状態が変化した場合、要素を出力ポートに送信。スイッチ状態は、出力されるペイロードオブジェクトの<code>isChecked</code>フラグに設定します。</li>
<li><b>選択されたメニュー要素を送信</b> - メニュー要素が選択された場合、要素を出力ポートに送信。選択された要素は、出力されるペイロードオブジェクトの<code>selected</code>プロパティに設定します。</li>
</ul>
<p>「<b>テキストにHTMLタグを利用</b>」チェックボックスを選択すると、HTMLタグを<code>title</code>および<code>description</code>で使用できます。</p>
<p><code>icon</code>もしくは<code>icon_name</code>プロパティでアイコンを指定できます。<code>icon</code>はアイコンファイルのURLを指定します。<code>icon</code>が<code>null</code>の場合、空のアイコンを表示します。<code>icon_name</code>はフォントアイコンのアイコン名を指定します。<code>icon</code>と<code>icon_bame</code>を両方指定した場合、<code>icon</code>を優先します。</p>
</script>