JavaScript

UIkitをインストールしたら、``セクションにJavaScriptファイルを追加して、ページに含めます。スクリプトの実行を遅らせるために`defer`属性を使用することもできます。

<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>

UIkitとリアクティブなJavaScriptフレームワーク

UIkitはDOM操作を監視し、コンポーネントがDOMに追加または削除されると、自動的にコンポーネントを初期化、接続、切断します。そのため、Vue.jsやReactなどのJavaScriptフレームワークと簡単に使用できます。

コンポーネントの使用

HTML要素に`uk-*`または`data-uk-*`属性を追加することで、JavaScriptを一行も記述せずにUIkitコンポーネントを使用できます。これはUIkitコンポーネントを使用する際のベストプラクティスであり、常に最初に検討する必要があります。

<div uk-sticky="offset: 50;"></div>

<div data-uk-sticky="offset: 50;"></div>

注記 Reactは`data-uk-*`プレフィックスのみで動作します。

JavaScriptを介してコンポーネントを初期化し、ドキュメント内の要素に適用することもできます。

var sticky = UIkit.sticky('#sticky', {
    offset: 50
});

セレクタまたは要素をコンポーネント関数への最初の引数として渡すことで、既に初期化されたコンポーネントを取得できます。

var sticky = UIkit.sticky('#sticky');

2番目のパラメータを省略すると、コンポーネントは再初期化されませんが、ゲッター関数として機能します。

コンポーネントの設定

各コンポーネントには、動作をカスタマイズできる設定オプションのセットが用意されています。インスタンスレベルまたはグローバルにオプションを設定できます。

インスタンス

オプションは、次の例のように設定できます。

`key: value;`形式で

<div uk-sticky="start: 100; offset: 50;"></div>

有効なJSON形式で

<div uk-sticky='{"start": 100, "offset": 50}'></div>

単一属性として

<div uk-sticky start="100" offset="50"></div>

または`data-`プレフィックス付きの単一属性として

<div uk-sticky data-start="100" data-offset="50"></div>

プライマリオプションの場合、属性値に1つのオプションしかない場合は、キーを省略できます。どのオプションがプライマリオプションであるかは、特定のコンポーネントのドキュメントを参照してください。

<span uk-icon="home"></span>

プログラムでコンポーネントコンストラクタにオプションを渡すこともできます。

// Passing an options object.
UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// If the component supports Primary options.
UIkit.drop('#drop', 'top-left');

優先順位

コンポーネント属性を介して渡されたオプションは、単一属性、JavaScriptの順で最も高い優先順位を持ちます。

<div uk-sticky="offset: 50;" offset="100"></div>

<!-- The offset will be 50 -->

グローバル

コンポーネントを拡張することで、コンポーネントオプションをグローバルに変更できます。新しく作成されたインスタンスのみに影響します。

UIkit.mixin({
    data: {
        offset: 50,
        top: 100
    }
}, 'sticky');

2番目のパラメータを省略すると、その後で作成されたすべてのUIkitインスタンスにカスタム動作が適用されます。

プログラムによる使用

プログラムでは、JavaScriptで`element, options`引数形式を使用してコンポーネントを初期化できます。`element`引数は、任意の`Node`、`selector`、または`jQueryオブジェクト`です。初期化されたコンポーネントが戻り値として返されます。関数型コンポーネント（例：`Notification`）では、`element`パラメータを省略する必要があります。

// Passing a selector and an options object.
var sticky = UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// Functional components should omit the 'element' argument.
var notifications = UIkit.notification('MyMessage', 'danger');

注記 オプション名は、キャメルケースで記述する必要があります（例：`show-on-up`は`showOnUp`になります）。

初期化後、`options`パラメータを省略して、同じ初期化関数を呼び出すことでコンポーネントを取得できます。

// Sticky is now the prior initialised components
var sticky = UIkit.sticky('.sticky');

注記 CSSセレクタを使用して`UIkit[componentName](selector)`を使用すると、常に最初の出現のみが返されます！すべてのインスタンスにアクセスする必要がある場合は、まずクエリで要素を取得します。次に、各要素にゲッターを個別に適用します - `UIkit[componentName](element)`。

プログラムでコンポーネントを初期化すると、その関数を直接呼び出すことができます。

UIkit.offcanvas('#offcanvas').toggle();

アンダースコアで始まるコンポーネント関数と変数は、内部APIの一部と見なされ、いつでも変更される可能性があります。

各コンポーネントは、モーダルが表示されたときやスクロールスパイ要素が表示されたときなど、反応できるDOMイベントをトリガーします。

UIkit.util.on('#offcanvas', 'show', function () {
    // do something
});

コンポーネントのドキュメントページには、そのイベントがリストされています。

注記 コンポーネントは、多くの場合、同じ名前（例：「show」）のイベントをトリガーします。通常、イベントはDOMをバブリングします。イベントターゲットを確認して、イベントが目的のコンポーネントによってトリガーされたことを確認してください。

グリッドやタブなどのコンポーネントは、マークアップでは非表示になっている場合があります。これは、スイッチャー、モーダル、ドロップダウンと組み合わせて使用する場合に発生する可能性があります。コンポーネントが表示されると、高さやその他の寸法を調整または修正する必要があります。

UIkitは、コンポーネントを更新するためのいくつかの方法を提供しています。`type`パラメータを省略すると、`update`イベントがトリガーされます。

// Calls the update hook on components registered on the element itself, its parents and children.
UIkit.update(element = document.body, type = 'update');

// Updates the component itself.
component.$emit(type = 'update');

DOMから削除するなど、コンポーネントを適切に破棄する必要がある場合は、その`$destroy`関数を呼び出すことができます。

// Destroys the component. For example unbind its event listeners.
component.$destroy();

// Also destroys the component, but also removes the element from the DOM.
component.$destroy(true);

UIkitの初期化

UIkitがロードされた後、ページでコンポーネントを初期化する前にコードを実行する必要がある場合があります。

このフックを使用すると、カスタムコンポーネントまたはコンポーネントミキシンを登録できます。

ドキュメントでUIkitがトリガーする`uikit:init`イベントをリッスンすることで、ライフサイクルのこのステップにフックできます。

document.addEventListener('uikit:init', () => {
    // do something
})