JavaScript

一旦您安裝了 UIkit，請將 JavaScript 檔案加入到您網頁的 <head> 區塊中。您也可以選擇使用 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-* 屬性來使用 UIkit 元件，而無需撰寫任何 JavaScript 程式碼。這是 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');

省略第二個參數將不會重新初始化元件，而是作為 getter 函數。

元件配置

每個元件都帶有一組配置選項，可讓您自訂其行為。您可以在每個實例級別或全域設定選項。

實例

選項可以按照以下範例所示設定。

使用 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>

對於主要選項，如果它是屬性值中唯一的選項，則可以省略其鍵。請查看特定的元件文件，以找到哪個選項是主要選項。

<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');

省略第二個參數，將會把自訂行為套用到之後建立的每個 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');

注意使用 UIkit[componentName](selector) 與 CSS 選擇器將始終只傳回第一個符合的項目！如果您需要存取所有實例，請先查詢這些元素。然後分別將 getter 套用到每個元素 - 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 載入之後但在它初始化頁面上的元件之前執行程式碼。

此 hook 可讓您註冊自訂元件或元件 mixin。

您可以透過監聽 UIkit 在文件上觸發的 uikit:init 事件，來掛鉤到生命週期中的這個步驟。

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