Skip to main content

 

アプリケーションの開発

 

OutSystems

ウィジェットの外観をスタイルエディタで変更する

スタイルエディタは、基本ビジュアルプロパティを編集するためのパネルです。たとえば、フォントの色やマージン、または枠線の太さを変更する際に使用します。[Interface]タブで、画面やブロックを開き要素を選択して、プロパティペインのスタイルエディタ切り替えボタンをクリックします。スタイルエディタパネルは、スタイルシートエディタでも使用可能で、エディタを使用して保存したスタイルを変更できます。

ウィジェットのスタイルを設定するには、FontLayoutおよびBordersのオプションを使用します。以下は、スタイルエディタを使用して変更できる項目の概要です。

Font
スタイル(太字、イタリック、下線)、サイズ、色。
Layout
幅、高さ、配置(左、中央、右)、背景色。マージン、間隔。選択した要素が該当する場合、WidthプロパティとMargin Leftプロパティの値はグリッドの列数になります。
Borders
枠線の太さと色。角の丸み。

MarginsBordersには、どのようにしてウィジェットに編集を適用するかを示すアイコンがあります。

アイコン 意味
この値は、他のすべての関連するプロパティに適用されます。
この値は、現在のプロパティのみに適用されます。

すべての変更は現在のウィジェットのみに適用されます。

他のウィジェットで同じスタイルを使用する場合は、スタイルを一連のプロパティ(クラス)として保存します。次に、スタイルを設定するウィジェットのスタイルエディタの[Style Classes]セクションにクラスを追加します。スタイルをクラスに昇格するには、モジュールにローカルテーマがある必要があります。

拡張可能な[Styles Properties Applied]セクションは、スタイルがどこで定義されたかにかかわらず、ウィジェットに適用されたすべてのスタイルを一覧表示します。スタイルをクリックして、スタイル定義のスタイルシートエディタを開きます。

モジュールのThemeで直接CSSを編集することで、ビジュアル要素をうまく制御できます。

なお、CSSの詳細度のルールに従って、スタイルエディタでの編集がExtended Propertiesstyleの値で上書きされる場合があります。ご注意ください。また、class拡張プロパティで追加されたクラスはエディタに表示されません。

使用例

ウィジェットの外観を変更してスタイルを保存し、アプリケーションの他のウィジェットに適用するためのスタイルエディタの使用例を以下に示します。

ウィジェットのスタイルを変更する

  1. ウィジェットを(Web)画面にドラッグします。
  2. プロパティペイン内で切り替えボタンをクリックします。
  3. テキストを含む要素について、[Font]セクションでテキストプロパティを編集します。
  4. Color]フィールドを使用してカラーピッカーを開き、プロパティの色を設定します。
  5. Layout]で、幅、高さ、配置を変更します。
  6. Layout/Margin]と[Layout/Padding]で、外側と内側のスペースを調整します。
  7. Borders]セクションに枠線を追加し、角の丸みを調整します。

スタイルを保存する

  1. スタイルエディタでウィジェットを編集します。
  2. Style Classes]セクション(または[Styles Properties Applied]セクション)で[Save changes to reusable class]をクリックします。
  3. 開いているダイアログで、クラス名を入力します(myStyleなど)。クラスによってすべてのスタイル要素がグループ化されます。
  4. 開いている[Style Sheet Editor]ウィンドウで[OK]を押します。

保存したスタイルを適用する

  1. スタイルを適用するウィジェットをクリックします。
  2. Style Classes]セクションで、鉛筆アイコンをクリックします。
  3. スタイルリストをスペースで区切ってスタイルクラスに追加します。例: BaseStyle1 BaseStyle2 myStyle

保存したスタイルを編集する

  1. 編集するスタイルを持つウィジェットをクリックします。
  2. Style Classes]セクション(または[Style Properties Applied]セクション)で、myStyleなどのスタイル名をクリックします。
  3. 開いている画面で、埋め込まれているスタイルエディタのプロパティを編集します。
  4. 編集が終了したら、[OK]をクリックします。
  • Was this article helpful?