UIkit3.x文档

避免冲突

使用自定义前缀和作用域模式可使UIkit在任何环境中都能正常工作。

默认情况下，UIkit中的所有类和属性都以 uk- 开头。在将UIkit引入现有项目或将其与其他框架结合时，这可以避免名称冲突。 UUIkit允许更改该前缀。这甚至允许同时使用多个版本的UIkit。此外，作用域模式允许将UIkit样式限制为仅影响页面上的某些部分。

自定义前缀

使用自定义前缀允许在同一页面上使用多个版本的UIkit。 当您构建类似CMS插件之类的内容时，可能需要使用此功能。 在这种情况下，您不知道是否会加载其他版本的UIkit，因此最好使用自定义前缀。

当你 从GitHub源设置UIKit, 您可以用自定义的前缀进行编译。例如 xyz，如果您选择一个自定义前缀，则所有属性和类现在都将以该前缀开头，例如 xyz-grid 而不是 uk-grid. 全局JavaScript对象 UIkit 也将重命名为 xyzUIkit.

yarn prefix -- -p xyz # 用自定义前缀xyz替换

Note yarn prefix 将提示您输入前缀。

该脚本将遍历文件 /dist 文件夹中的所有CSS文件，并将其替换为您的自定义前缀版本。

Note 基本组件仍将包含影响某些基本HTML元素的样式。为避免这种情况，请创建不包含Base组件的 自定义版本 或使用作用域模式。

作用域模式

使用作用域版本的UIkit可以将样式限制为仅应用于文档的特定部分。在管理界面的环境中，比如WordPress或Joomla的后端，这可能是必需的。 从Github源安装UIkit后，可以将UIkit重新编译为作用域版本。

yarn scope

Note 输入 yarn scope -- -h 以获取更多选项。

您将在 /dist 文件夹中找到生成的CSS和JS文件。 若要使用作用域版本，请将带有UIkit标记的文档部分包装在具有 .uk-scope 类的元素中。

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>

        <!-- non UIkit markup -->
        ...

        <div class="uk-scope">
            <!-- your UIkit markup -->
            ...
        </div>
    </body>
</html>

现在，您需要告诉 uk-modal, uk-tooltip 和 uk-lightbox 在未设置container 选项的情况下将其附加到DOM的位置，例如所述组件的默认容器。 为此，请设置以下参数：

//只需通过选择器
UIkit.container = '.uk-scope';
...
//或者您可以直接设置元素，例如：
UIkit.container = document.getElementById('#id-of-scope-element');