一.概要
1.バージョン
帳票サーババージョン | 機能変動 |
11.0 | コンポーネントスタイルに[テーマに従う]設定を追加 |
2.応用シーン
[ダッシュボード]において、[チャートブロック]、[帳票ブロック]、[タブブロック]は総称して「コンポーネント」と呼ばれます。
コンポーネントを選択した後、右下にある[属性]パネルで、[コンポーネント名称]、[座標・サイズ]、[スタイル設定]などの各種属性を設定できます。
以下の図のように表示されます：
二.コンポーネント名称
[コンポーネント名称]はデフォルトで「コンポーネントタイプ+数字のサフィックス」となります。例えば、[チャートブロック]の場合は「chart0」となります。空白または重複の名称がサポートされません。
三.コンポーネントの座標・サイズ
1）[コンポーネント位置]は「絶対レイアウト」時のみ手動で設定可能です。「自動調整レイアウト」の場合、[コンポーネント位置]はドラッグ操作のみで変更できます。以下の図のように表示されます：
2）「自動調整レイアウト」で、[コンポーネントサイズ]の最小値は幅が36、高さが21に制限されます。「絶対レイアウト」では制限がありません。
「自動調整レイアウト」では、コンポーネントをドラッグすると自動的に制限されます。座標値を手動で調整するとヒントメッセージが表示されます。以下の図のように表示されます：
四.コンポーネントスタイル
1.テーマに従う
コンポーネントスタイルはデフォルトで[テーマに従う]に設定されており、この場合、タイトルは「表示/非表示」と[タイトル内容]のみ設定可能です。テーマ内のコンポーネントスタイル設定については、ドキュメント「テンプレートテーマ管理」を参照してください。
2.カスタム
[カスタム]を選択すると、コンポーネントの[タイトル]、[主体]と[背景]のスタイルを個別に設定可能です。
2.1タイトルスタイル
注意：[タブブロック]にはコンポーネント[タイトルスタイル]の設定項目がありません。
[スタイル設定]で[カスタム]を選択すると、[タイトルスタイル]の設定項目は以下の図のように表示されます：
フロントエンドプレビュー時の表示位置は以下の図のように表示されます：
タイトルの各設定項目の説明は以下の表の通りです：
設定項目 | 機能 |
タイトルを表示 | [チャートブロック]はデフォルトでチェックされ、[帳票ブロック]はデフォルトでチェックされません プレビュー時、タイトルはコンポーネント[主体内容]の上部に表示されます。チェックを外すとタイトルは表示されません |
タイトル内容 | 編集ボックスに直接タイトルテキストを入力可能です。右側の数式ボタンを使用して編集する場合、テキストはダブルクォーテーションを付ける必要があります。 |
タイトル書式 | [タイトル内容]の文字書式で、[フォント]、[サイズ]、[色]、[斜体]、[太字]、[下線]を含みます |
インセット | タイトルに[インセット]を追加します：
[インセット]での画像形式として、gif、jpg、png、bmpがサポートされています。また、[インセット相対位置]と[画像と文字の間隔]を設定できます。
設定した[インセット]を削除するには、マウスを[インセット]にホバーすると右上に削除ボタンが表示され、クリックすると削除できます。
|
位置 | [タイトル内容]の揃え位置を[左詰め]、[中央揃え]、[右詰め]に設定できます |
タイトル背景 | タイトルエリアの背景充填を設定できます。充填方法は[背景なし]、[色]、[画像]、[段階変化色]が含まれます。[タイトル背景]エリアは以下の図のように表示されます：
注意：[タイトル背景]で[段階変化色]設定の[不透明度]は、モバイル端末での表示に対応しません。 |
2.2主体内容
[スタイル設定]で[カスタム]を選択すると、[主体内容]の設定項目は以下の図のように表示されます：
フロントエンドプレビュー時の塗りつぶしエリアは以下の図のように表示されます：
塗りつぶし方法は[背景なし]、[色]、[画像]、[段階変化色]が含まれます。[画像]で塗りつぶす場合、4種類の画像の自動調整スタイルがあり、それぞれは以下の通りです：
• [既定]：元の画像のまま表示します。元の画像のサイズがコンポーネントのサイズより大きい場合は、左上隅から表示し、超過する部分は切り捨てられ、表示されません。
• [展開]：画像を繰り返してコンポーネント全体を塗りつぶします。
• [拡張]：画像をコンポーネントの幅と高さに合わせて自動調整します。画像がコンポーネントのサイズより小さい場合は画像を拡大して塗りつぶし、大きい場合は縮小して塗りつぶします。
• [調整]：画像のアスペクト比を維持したまま、コンポーネントのサイズに合わせて自動調整します。
2.3背景スタイル
[スタイル設定]で[カスタム]を選択すると、[背景スタイル]の設定項目は以下の図のように表示されます：
フロントエンドプレビュー時、コンポーネントの[枠]は[タイトル]と[主体内容]を囲んで表示されます。以下の図の通りです：
[背景スタイル]の各設定項目の説明は以下の表の通りです：
設定項目 | 機能 |
レンダリングスタイル | 2つのオプションがあります：[一般]、[陰影]。[一般]に設定すると、レンダリング効果はありません。[陰影]に設定すると、[枠]の周囲に陰影が表示されます 注意：モバイル端末はサポートされていません |
枠 | [無]、[カスタム画像]、[線]に設定できます。 [線]に設定した場合、枠線（タイトル部分を含む）の色を設定できます。 [カスタム画像]に設定した場合、[9パッチ塗りつぶし設定]が可能です。この機能により、画像の拡張して変形する問題を効果的に解決できます 注意：[タブブロック]は[枠]の[カスタム画像]設定に対応しません |
丸角 | [枠]の四隅のラジアンを定義します。例えば、下図の四隅は丸角になっています
注意：[タブブロック]には[丸角]の設定項目がありません |
内マージン | [主体内容とタイトル]と[枠]の間の距離
注意1：[タブブロック]には[内マージン]の設定項目がありません 注意2：モバイル端末はサポートされていません |
前：ダッシュボードウィジェット