2022年6月7日火曜日

コンポーネント、入力フィールド、ボタンの角を丸くする

 テーマ・ローラーを使って、コンポーネント入力フィールドおよびボタンの角を丸くすることができます。

コンポーネントの四隅は、コンテナコンテナ枠線の角の丸めで調整します。


内部的には、CSS変数--ut-component-border-radiusの値を変更しています。
:root {
  --ut-component-border-radius: 28px;
}
カスタムCSSで変更したときは、カスタムCSSの定義が優先されます。


ボタンの角は、ボタン枠線の角の丸めで調整します。変更しているCSS変数は--a-button-border-radiusです。


入力フィールドは、フォーム枠線の角の丸めで調整します。変更しているCSS変数は--a-field-input-border-radius--a-filedrop-border-radiusです。

通常、テーマ・ローラーでの見かけの変更は、即時で反映されます。保存は不要です。


ただし、モーダル・ダイアログのページについては、即時で反映されないようです


テーマ・ローラーでの変更を保存し、再度ダイアログを開くと、変更されていることを確認できます。


変更されたCSS変数は、静的アプリケーション・ファイルの領域に保存され(共有コンポーネントからは参照できない)、ブラウザに読み込まれます。


ファイルの内容を確認すると、多数のCSS変数に値が設定されていることがわかります。


利用可能なCSS変数についての説明は、ユニバーサル・テーマのサンプル・アプリケーションに、Referenceとして含まれています。

簡単ですが、テーマ・ローラーで、コンポーネント、入力フィールド、ボタンの角を丸くする設定の紹介は以上です。

Oracle APEXのアプリケーション作成の参考になれば幸いです。