UIkit3.x文档

反相

反转任何组件的明暗背景样式。

用法

在深色背景上添加.uk-light 来增强元素的可见性。使用深色样式时，将 .uk-dark类添加到浅色背景。

Note 根据您使用的样式，只有一个class会生效。例如，当使用浅色背景的样式时，只能将 .uk-light class应用于优化深色背景上的内容，文本将在浅色背景上以深色显示，反之亦然。

<div class="uk-light"></div>

<div class="uk-dark"></div>

  • Light

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Dark

    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>

Note Section, Card, Tile, Overlay 和 Off-canvas等组件的一些修饰自带反转样式，因此不必为它们添加任何类。

Customize using Less

反相组件包括额外的样式来实现灵活的反相行为。如果项目没有使用这些样式，则可以在编译less时禁用反相组件 。