Ajaxフレームワーク UI部品リファレンス

1.3.2 スタイルの設定

画面部品のスタイルの指定には、以下の3つの方法があります。

• スタイルプロパティでの設定
• CSSでの設定
• JavaScript APIでの設定

■スタイルプロパティでの設定

画面部品では、その部品で指定できるスタイルをプロパティ(スタイルプロパティ)として設定できます。
例えば、TextInput部品で背景色、文字色、フォントの大きさを変更したい場合は、以下のように指定します。

<span rcf:type="TextInput"
 rcf:backgroundColor="#FFFFFF" rcf:color="#000000" rcf:fontSize="large"></span>

その画面部品で指定できないスタイルプロパティが指定された場合は、無視されます。

スタイルプロパティには、部品全体に対するスタイルプロパティと部品の特定のパーツに対するスタイルプロパティがあります。
スタイルプロパティの命名規則については、“スタイルプロパティ”のポイントを参照してください。
また、各部品のスタイルプロパティについては、各部品の説明を参照してください。

■CSSでの設定

各画面部品は、styleClassプロパティによってクラス名が指定できます。クラス名を利用することで、スタイルをCSSによって記述できます。

以下に、Panel部品での記述例を示します。

<style type="text/css">
  .myClass .rcf-SelectList{
    width: 100px;
    height: 200px;
    color: blue;
    border-color: black;
    background-color: lightgrey;
  }
  .myClass .rcf-SelectList-optionSelected {
    color: red;
  }
</style>

<div rcf:type="SelectList" rcf:styleClass="myClass" rcf:options="foo;bar">
</div>

styleClassプロパティによってクラス名を指定すると、その部品のスタイルプロパティで指定できるスタイルをCSSで記述することができます。

CSSで指定する場合のルールは、以下のとおりです。

• スタイルプロパティ名がすべて小文字のもの (例: width、height)
  CSSでは、同じ名前で指定できます。
• スタイルプロパティ名に大文字を含んでいるもの (例: backgroundColor、fontSize)
  CSSでは、大文字の前に“-”を挿入し、大文字を小文字にした名前になります。
  • backgroundColor → backgournd-color
  • fontSize → font-size
• スタイルプロパティでプレフィックス(パーツ名)が前にあるもの (例: titleHeight、bodyPadding)
  特定のクラス名とCSSで指定できます。(.myClassは、styleClassで指定したクラス名)

  PanelのtitleHeightの場合

  .myClass .rcf-Panel-title {
     height: 30px;
  }

  PanelのbodyBackgroundColorの場合

  .myClass .rcf-Panel-body {
     background-color: white;
  }

  特定のクラス名は、部品ごとに異なります。クラス名の命名規則は、以下のようになります。

  "rcf-部品名-パーツ名"

  なお、画面部品のスタイルプロパティで指定できないスタイルをCSSに記述した場合の動作は不定です。

■JavaScript APIでの設定

JavaScriptから、rcf:idで指定した値を変数としたオブジェクトとしてUI部品を操作することで、スタイルを設定することができます。
詳細は、“JavaScriptからの操作”を参照してください。