インバース
明るい背景または暗い背景に合わせて、任意のコンポーネントの色を反転させます。
一般的に、UIkit スタイルには、デフォルトの UIkit スタイルや、暗い背景を持つスタイルなど、明るい背景を持つものがあります。背景色に応じて、デフォルトのテキストカラーは、明るい背景では暗く、暗い背景では明るくなります。しかし、異なる背景色や背景画像を使用する場合、反対のテキストカラーが必要になる場合があります。そのような背景には、インバースコンポーネントを使用してテキストカラーを反転させます。
使い方
テキストとすべてのコンテンツを暗い背景で見栄え良くするために、.uk-light クラスを追加し、明るい背景には対応する .uk-dark クラスを追加します。
すでにデフォルトのテキストカラーがあり、明るいスタイルでは暗く、暗いスタイルでは明るいため、異なる背景に対してテキストカラーを変更するには、クラスのいずれか一方のみが必要です。明るいスタイルでは .uk-light クラスが必要で、暗いスタイルでは .uk-dark クラスが必要です。クラスのいずれかを使用すると、色を元に戻すことはできませんのでご注意ください。
<div class="uk-light"></div>
<div class="uk-dark"></div>ライト
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
ダーク
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-child-width-1-2@s" uk-grid> <div> <div class="uk-light uk-background-secondary uk-padding"> <h3>Light</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <button class="uk-button uk-button-default">Button</button> </div> </div> <div> <div class="uk-dark uk-background-muted uk-padding"> <h3>Dark</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <button class="uk-button uk-button-default">Button</button> </div> </div> </div>
コンポーネントの拡張
セクション、タイル、カード、オーバーレイ、オフキャンバス、ナビバー、ドロップダウン、ドロップバーなど、背景を作成するコンポーネントのスタイル修飾子は、テキストカラーを変更するために自動的にインバーススタイルを拡張するため、クラスを追加する必要はありません。
セクションおよび タイルコンポーネントはこの動作を防ぐことができます。.uk-preserve-color クラスを追加するだけです。これは、例えば カードを含んでいる場合に必要です。
<div class="uk-section uk-section-primary uk-preserve-color"></div>
<div class="uk-tile uk-tile-primary uk-preserve-color"></div>カードを使用したプライマリセクション
カードを使用したプライマリタイル
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
カードを使用したセカンダリタイル
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="uk-section uk-section-primary uk-preserve-color"> <div class="uk-container"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Section Primary with cards</h3> </div> <div class="uk-grid-match uk-child-width-expand@m" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </div> <div class="uk-child-width-1-2@s uk-grid-collapse uk-grid-match uk-text-center" uk-grid> <div> <div class="uk-tile uk-tile-primary"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Tile Primary with card</h3> </div> <div class="uk-card uk-card-default uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div> <div class="uk-tile uk-tile-secondary"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Tile Secondary with card</h3> </div> <div class="uk-card uk-card-default uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div>
コンテンツの重なり
.uk-light および .uk-dark クラスは、コンテナ要素に設定され、そのコンテンツを着色します。しかし、要素がネストされておらず、位置コンテキストを持ち、互いに重なり合っている場合があります。たとえば、スクロール中にスティッキーナビバーが背後のさまざまなセクションに重なり合います。交差する要素に応じてコンテンツを着色するには、uk-inverse 属性を追加します。これにより、背後のセクションに応じて .uk-light または .uk-dark クラスが設定されます。
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse uk-navbar>…</nav>
</div>
</div>
<div class="uk-section uk-section-default">…</div>
<div class="uk-section uk-section-primary">…</div>
<div class="uk-section uk-section-muted">…</div>
<div class="uk-section uk-section-secondary">…</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-position-relative"> <div class="uk-position-top"> <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80"> <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2"> <div class="uk-drop-grid uk-child-width-1-2" uk-grid> <div> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> </div> </div> </nav> </div> </div> <div class="uk-section uk-section-default"> <div class="uk-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> <div class="uk-section uk-section-primary"> <div class="uk-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> <div class="uk-section uk-section-muted"> <div class="uk-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> <div class="uk-section uk-section-secondary"> <div class="uk-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> </div>
これは、.uk-light および .uk-dark クラスと、すべての拡張コンポーネントが、--uk-inverse カスタムプロパティを light または dark のいずれかに設定するためです。JavaScript は、スタッキングコンテキスト内で最も近い交差要素の --uk-inverse カスタムプロパティを探し、それに応じて .uk-light または .uk-dark クラスを設定します。
複数の部分を個別に着色する
コンテナ内の異なる部分を個別に着色するには、uk-inverse 属性に target: SELECTOR オプションを追加するだけです。
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right" uk-navbar>…</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">…</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">…</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">…</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="uk-position-relative"> <div class="uk-position-top"> <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80"> <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> </ul> </div> <div class="uk-navbar-center"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="">Active</a></li> <li><a href="#">Item</a></li> </ul> </div> <div class="uk-navbar-right"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="">Active</a></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </nav> </div> </div> <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid> <div> <div class="uk-tile uk-tile-default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-tile uk-tile-primary"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-tile uk-tile-secondary"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid> <div> <div class="uk-tile uk-tile-primary"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-tile uk-tile-muted"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-tile uk-tile-default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid> <div> <div class="uk-tile uk-tile-default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-tile uk-tile-secondary"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-tile uk-tile-muted"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>
非アクティブ状態
要素が透明でなくなったときに自動的に色が変わらないようにするには、uk-inverse 属性に sel-active: SELECTOR オプションを追加するだけです。
<div uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
<nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent" uk-navbar>…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-position-relative"> <div class="uk-position-top"> <div uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; end: !.uk-position-relative; offset: 80"> <nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2"> <div class="uk-drop-grid uk-child-width-1-2" uk-grid> <div> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> </div> </div> </nav> </div> </div> <div class="uk-section uk-section-secondary"> <div class="uk-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> </div>
重なり合うコンテンツのみを着色する
コンテンツのテキストカラーを保持し、重なり合うコンテンツのみ色を反転させる必要がある場合は、.uk-inverse-light または .uk-inverse-dark クラスを使用します。これらは、--uk-inverse カスタムプロパティを対応する色に設定しますが、コンテンツを着色することはありません。
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>…</nav>
</div>
<div class="uk-section uk-section-primary uk-preserve-color uk-inverse-light">カードを使用したプライマリセクション
<div class="uk-position-relative"> <div class="uk-position-top"> <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80"> <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#">Parent</a> <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2"> <div class="uk-drop-grid uk-child-width-1-2" uk-grid> <div> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> </div> </div> </nav> </div> </div> <div class="uk-section uk-section-primary uk-preserve-color uk-inverse-light"> <div class="uk-container"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Section Primary with cards</h3> </div> <div class="uk-grid-match uk-child-width-expand@m" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </div> </div>
コンポーネントオプション
これらのオプションのいずれかをコンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら
| オプション | 値 | デフォルト | 説明 |
|---|---|---|---|
target |
CSSセレクター | false |
チェックされるターゲットのリスト。 |
sel-active |
CSSセレクター | false |
色を設定するために一致する必要があるセレクター。一致しない場合は色が削除されます。省略した場合、常に色が設定されます。 |
JavaScript
JavaScriptコンポーネントの詳細をご覧ください。
初期化
UIkit.inverse(element, options);インバースコンポーネントを無効にする
インバースコンポーネントは、対応する背景色のすべてのコンポーネントを着色する CSS を生成します。プロジェクトでコンテンツの色を反転させる必要がない場合は、Less のコンパイル時にインバースコンポーネントを無効にすることができます。