30日間の無料評価版をお試しいただけます。

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

概要

グラフィックウィジェットを使用して、事前にデザインされたグラフィックをダッシュボードに追加します。これは、ウィジェット選択から選択することで図形、矢印、アイコンを追加することができます。



グラフィックウィジェットタイプ

名前説明
図形展開やカスタマイズ、境界として使用できる円や四角といった、キャンバスに追加できる図形のタイプです。
矢印のような、キャンバスに追加できる線のタイプです。
アイコンキャンバスに追加できるアイコンのタイプです。





グラフィックウィジェットの使用方法

  1. 画面の左側のグラフィックボタンをクリックして、パネルを展開します。
  2. (図形や線、アイコンなど)パネル内の任意の項目を展開し、ダッシュボードキャンバスの任意の箇所に選択したウィジェットをドラッグします。


  3. プロパティパネルから、グラフィックウィジェットをカスタマイズできます。このパネルはウィジェットを選択することで、画面の右側に表示されます。図形、線、アイコンウィジェットに適用できるカスタマイズのタイプについては、以下のプロパティ項目を参照してください。
  4. 右クリックをして表示されるメニューを使用することで、さらなるオプションを利用できます。メニューオプションについて、より詳細な情報は、こちらを参照してください。



グラフィックのプロパティ

以下の表は、カスタマイズに使用できるグラフィックウィジェットのプロパティを示しています。

コードモードのヒント:カスタマイズしたアイコンをコピーして、「fa」classを使用してアイコンのタイプを変更します。例えば、「fa_android」は、「fa_arrow」に切り替えることができます。コードモードはアイコンを変更する唯一の方法です。



注意:図形、アイコン、線など、選択したグラフィックウィジェットのタイプに応じて、プロパティは若干異なります。

プロパティの名前説明
色を付ける

図形内部の色を選択します。

注意:矢印のような線では、矢印の頭の色を指定します。

ストロークカラー

選択した図形の外側、または境界の色を定義します。

注意:矢印のような線では、矢印の線や本体の色を指定します。

ストロークの幅図形の外側や境界の太さを定義します。
不透明度を付ける選択した図形の(内側)色の不透明度を指定します。数字が大きいほど、色が濃くなります。
サイズと位置
Xダッシュボードキャンバスに正確に配置するために、図形ウィジェットの左上隅のX座標を指定します。
Yダッシュボードキャンバスに正確に配置するために、図形ウィジェットの左上隅のY座標を指定します。
現在選択しているウィジェットの幅をピクセル単位で指定することで、正確にサイズを変更します。
高さ現在選択しているウィジェットの高さをピクセル単位で指定することで、正確にサイズを変更します。
こちらのオプションは、テキストウィジェットの境界の角の丸みを定義します。ヒント:角の丸みを最大にするには、ウィジェットの高さの半分の値を設定します。例えば、高さが130ピクセルの場合、角の値を65ピクセルに設定します。さらに、角の値を65より大きくしたとしても、今回の例ではこれ以上の効果はありません。
回転選択した図形ウィジェットを時計回りに回転する角度を指定します。
アスペクト比

こちらのトグルを有効にして、アスペクト比を維持します。これにより、図形ウィジェットのサイズを大きくしたり、小さくしたりしても、その形状が維持されます。(幅と高さの関係)

こちらが無効の場合、図形ウィジェットは水平、または垂直方向に引き伸ばされます。

ウィジェットの固定こちらのトグルを有効にして、図形ウィジェットの位置を固定します。これにより、ウィジェットの移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択している場合にも適用されます。図形ウィジェットは引き続きカスタマイズできることに注意してください。
背景の書式設定
背景色図形ウィジェットの背景色を指定します。これは、図形そのものをを除く、ウィジェット内のエリアが対象です。
不透明度ウィジェット上の背景色の不透明度を指定します。
余白のカスタマイズこちらのオプションを有効にすることで、余白のカスタマイズや、テウィジェットの周りのバッファをピクセル単位で定義します。これには、ウィジェットの両側の余白が含まれます。こちらの設定が無効の場合、全体的な余白サイズを定義できます。
上部の余白余白のカスタマイズが有効な場合、ウィジェットの上部に追加する余白を定義します。
下部の余白余白のカスタマイズが有効な場合、ウィジェットの下部に追加する余白を定義します。
右側の余白余白のカスタマイズが有効な場合、ウィジェットの右側に追加する余白を定義します。
左側の余白余白のカスタマイズが有効な場合、ウィジェットの左側に追加する余白を定義します。
余白図形ウィジェットの全体的な余白サイズを定義します。ピクセル単位で定義するこちらのサイズは、ウィジェットの各サイドで一定になります。任意のサイドに異なる余白サイズを設定する場合は、余白のカスタマイズオプションを有効にします。
境界の幅

ウィジェットの境界の太さを指定します。

注意:境界を表示するには、3つの境界プロパティすべてに値を定義しなくてはいけません。

境界のスタイルウィジェットの境界のスタイルを選択します。選択肢は、次の通りです。破線、実線、点線、溝、など。
境界の色ウィジェットの境界の色を指定します。
水平方向の影こちらのオプションは、そのサイズをピクセル単位で定義することで、水平方向に影を投影します。
垂直方向の影こちらのオプションは、そのサイズをピクセル単位で定義することで、垂直方向に影を投影します。
影のぼかしこちらのオプションは、影の鮮明さを定義します。値が小さくなるにつれて、鮮明さが増し、影が濃くなります。影をぼかす場合は、大きな値を定義します。
影の色こちらのオプションは、影に色を設定します。





  • No labels