カスタムプレフィックスとスコープモードを使用して、UIkitをあらゆる環境で動作させることができます。
デフォルトでは、UIkitのすべてのクラスと属性はuk-プレフィックスで始まります。これにより、UIkitを既存のプロジェクトに導入したり、他のフレームワークと組み合わせたりする場合に、名前の衝突を回避できます。UIkitでは、そのプレフィックスを変更することができます。これにより、複数のバージョンのUIkitを並行して使用することもできます。さらに、スコープモードを使用すると、UIkitのスタイルをページの特定の部分にのみ適用するように制限できます。
カスタムプレフィックスを使用すると、同じページで複数のバージョンのUIkitを使用できます。これは、CMSプラグインのようなものを構築する場合に必要になることがあります。このような場合、他のどのバージョンのUIkitがロードされるかわからないため、カスタムプレフィックスを使用することをお勧めします。
GitHubソースからUIkitをセットアップしたら、カスタムプレフィックスを使用してコンパイルできます。たとえば、xyzのようなカスタムプレフィックスを選択すると、すべての属性とクラスは、uk-gridの代わりにxyz-gridのように、そのプレフィックスで始まるようになります。グローバルJavaScriptオブジェクトUIkitもxyzUIkitに名前が変更されます。
pnpm prefix -- -p xyz # replace xyz with your custom prefix.注記 pnpm prefix はプレフィックスの入力を促します。
スクリプトは/distフォルダ内のすべてのCSSファイルを確認し、カスタムプレフィックスバージョンに置き換えます。
注記 ベースコンポーネントには、一部の基本HTML要素に影響を与えるスタイルが引き続き含まれます。これを回避するには、ベースコンポーネントを含めずにカスタムビルドを作成するか、スコープモードを使用します。
UIkitのスコープバージョンを使用すると、スタイルをドキュメントの特定の部分にのみ適用するように制限できます。これは、WordPressやJoomlaのバックエンドなどの管理インターフェースの環境で必要になることがあります。GitHubソースからUIkitをセットアップしたら、UIkitをスコープバージョンとして再コンパイルできます。
pnpm scope注記 詳細なオプションについては、pnpm scope -- -h と入力してください。
生成されたCSSファイルとJSファイルは/distフォルダにあります。スコープバージョンを使用するには、UIkitマークアップを含むドキュメントセクションを.uk-scopeクラスを持つ要素で囲みます。
<!DOCTYPE html>
<html>
<head>…</head>
<body>
<!-- non UIkit markup -->
…
<div class="uk-scope">
<!-- your UIkit markup -->
…
</div>
</body>
</html>次に、`container` オプションが設定されていない場合、つまり、上記のコンポーネントのデフォルトコンテナがない場合に、`uk-modal`、`uk-tooltip`、`uk-lightbox` が DOM のどこに自身を追加するかを指示する必要があります。そのためには、次のパラメータを設定します。
// simply pass the selector
UIkit.container = '.uk-scope';
// or you can set an element directly, for example:
UIkit.container = document.getElementById('#id-of-scope-element');