DataV:タブリスト

グラフスタイル

タブリストは、対話カテゴリに属します。 他のウィジェットとの対話イベントを使用して、DataVプロジェクトのタブを動的に表示できます。 タブの色、数量、タイプ、スタイルを設定できます。

設定パネル

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• フォント: タブリストのフォント。

• 背景色: タブリストの背景色。

• 行: タブリストの行数。

• 列: タブリスト内の列の数。

• 選択タイプ: タブリストの選択タイプ。 有効な値: 単一選択および複数選択。

• カルーセル: タブリストのカルーセル間隔。 カルーセル効果を有効または無効にするには、左側をクリックします。

• 開始時に選択されたタブ: 最初に選択されるタブのID。 このパラメーターの値は、[データ] タブのidパラメーターの値と同じである必要があります。 [選択タイプ] が [単一選択] に設定されている場合、入力できる値は1つだけです。 [選択タイプ] が [複数選択] に設定されている場合、複数の値を入力できます。 値はコンマ (,) で区切ります。

  図 1. タイプをシングルに選択

  図2. タイプを複数として選択

  図3. タブリストの初期化値

• [すべて] ボタン: [すべて] タブを表示するかどうかを指定します。 このパラメーターは、[選択タイプ] パラメーターが [複数] に設定されている場合にのみ使用できます。

• 開始時に選択したすべてのタブ: デフォルトですべてのタブを選択するかどうかを指定します。 スイッチをオンにすると、[開始中に選択されたタブ] パラメーターは表示されません。 このパラメーターは、[選択タイプ] パラメーターが [複数] に設定されている場合にのみ使用できます。

• タグのデフォルト設定

  パラメーター	説明
  フォントサイズ	タブのフォントサイズ。
  フォントの色。	タブのフォントの色。 詳細は、「カラーピッカー」をご参照ください。
  フォントの太さ	タブのフォントの太さ。
  背景色	タブの背景色。
  フィレット半径	タブのコーナー半径。 値が大きいほど角が丸くなっていることを示す。 デフォルト値：0 この値は、タブが長方形であることを示します。
  ホバー背景色	ポインターをタブの上に移動したときのタブの背景色。 設定効果は、プレビューまたは公開ページでのみ表示できます。
  選択したテキストの色	選択したタブのテキストの色。
  選択した背景色	選択したタブの背景色。
  アイコン設定	タブアイコンの幅、高さ、位置、およびアイコンとテキストの間の距離。

• コールバックID: ウィジェット間でデータを関連付けるために使用される変数。 コールバックIDは、[データ] タブで設定されたパラメーターである必要があります。

  重要

  ウィジェットのバージョンが最新でない場合は、ウィジェットxxxをアップグレードし、[インタラクション] タブでコールバックIDを設定します。

データパネル

設定フィールドの説明

相互作用パネル

ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 タブをクリックすると、データ要求がトリガーされ、コールバックIDが渡されてデータが動的に読み込まれます。 デフォルトでは、idおよびcontentパラメーターが渡されます。 詳細については、「コールバックIDの設定」をご参照ください。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. ページの左上隅にあるアイコンをクリックします。

3. Blueprint Editorで、[ノードのインポート] ペインで [タブリスト] コンポーネントをクリックします。 次の図に示すように、Tab Listコンポーネントの設定パラメーターをキャンバスに表示できます。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータについては、「データ」をご参照ください。
     タブがクリックされたとき	タブをクリックすると、このイベントがトリガーされてタブのデータが渡されます。

   • ポリシーアクション

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 上流のコンバータまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、タブリストで、APIデータソースはhttp:// api.testで、要求地理検索ボックスインターフェイスに渡されるデータは { id: '1'} で、最終的な要求インターフェイスはhttp:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータについては、「データ」をご参照ください。
     アイテムの選択	このイベントは1つ以上のタブを選択し、配列またはオブジェクトの入力が必要です。
     カルーセルの有効化	この操作により、タブリストのカルーセルが有効になります。
     カルーセルの無効化	この操作により、タブリストのカルーセルが無効になります。
     Switch to All	この操作は、すべてのタブを選択または解除します。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 次に、ブループリントエディターのデータ処理ノードのボックスにデータを貼り付け、フィールド値を設定します。
     表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
     非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。
     暗黙の状態への切り替え	ウィジェットは非表示または表示されます。 参照データの例は以下の通りである。 { //true indicates that a widget is shown, whereas false indicates that a widget is hidden. "status": true, // Animation is displayed. "animationIn": { // The animation type, which can be set to fade. If it is not specified, no animation is displayed. "animationType": "fade", // The duration in which animation is displayed. It is in the unit of milliseconds. "animationDuration": 1000, // The function that is used to display animation. You can set this parameter to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" }, // Animation is hidden. "animationOut": { // The animation type, which can be set to fade. If it is not specified, no animation is displayed. "animationType": "fade", // The duration in which animation is hidden. It is in the unit of milliseconds. "animationDuration": 1000, // The function that is used to hide animation. You can set this parameter to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     移動	ウィジェットが指定された場所に移動されます。 参照データの例は以下の通りである。 { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }