contentContainerには、2つのリージョン(ボディ・リージョンとヘッダー・リージョン)が含まれます。ボディ・リージョンはcontentContainerのコンテンツを含み、ヘッダー・リージョンはcontentCotainerのヘッダーのテキストを含みます。 ボディ・リージョンには、OraContentContainerBodyスタイル・クラスを介してスタイルを適用できます。 同様に、ヘッダー・リージョンのスタイルは、OraContentContainerHeaderスタイル・クラスを介して指定します。
これら2つのリージョン自体は、外側のコンテナ内でレンダリングされます。このコンテナにもスタイルを適用できます。 外側のリージョンには、ヘッダーが存在するかどうかに応じて異なる2つのスタイル・クラス・セットが存在します。 ヘッダーが存在する場合、contentContainerの背景色に応じて次のいずれかのスタイル・クラスが使用されます。
- OraContentContainerDark
- OraContentContainerMedium
- OraContentContainerLight
- OraContentContainerTransparent
ヘッダーが存在しない場合、外側のコンテナは次のスタイル・クラスを使用します。
- OraContentContainerContentDark
- OraContentContainerContentMedium
- OraContentContainerContentLight
- OraContentContainerContentTransparent
特定の背景タイプのcontentContainerのボディまたはヘッダーにスタイルを適用するには、コンテキスト・セレクタを使用します。 たとえば、次のセレクタを使用して、dark contentContainerのヘッダー・リージョンとボディ・リージョンのプロパティを変更できます。
<style selector=".OraContentContainerDark .OraContentContainerHeader">
<!-- Style properties for dark contentContainer header -->
</style>
<style selector=".OraContentContainerDark .OraContentContainerBody">
<!-- Style properties for dark contentContainer body -->
</style>
また、次のセレクタを使用すると、ヘッダーを持たないdark contentContainerのボディ・リージョンのプロパティを変更できます。
<style selector=".OraContentContainerContentDark .OraContentContainerBody">
<!-- Style properties for dark headerless contentContainer body -->
</style>
異なる背景タイプのcontentContainerに共通のスタイル・プロパティを簡単に適用できるように、複数の名前付きスタイルが公開されています。 たとえば、ContentContainerDarkBackground名前付きスタイルを使用すると、すべてのdark contentContainerの背景色を設定できます。 外側のコンテナがOraContentContainerDark(ヘッダーが存在する)またはOraContentContainerContentDark(ヘッダーが存在しない)のどちらのスタイル・クラスを使用するかにかかわらず、この名前付きスタイルが使用されます。 使用可能なすべての名前付きスタイルのリストは、次の名前付きスタイルの表を参照してください。