分隔線

為價格菜單或目錄建立點狀分隔線。

分隔線，也稱為點狀分隔線或定位點分隔線，是一種重複的模式，用於在水平空間上視覺連接內容。它最常用於餐廳菜單，在餐點和價格之間，以及目錄中，在標題和頁碼之間。

用法

要應用此組件，請將 uk-leader 屬性添加到左側的元素。然後，一行字符（默認為點）將填充項目及其相鄰元素之間的剩餘空間。

<div uk-leader></div>

<div class="uk-grid-small" uk-grid>
    <div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet</div>
    <div>$20.90</div>
</div>

填充字元

要將點更改為任何自定義字符，只需將 fill: STRING 選項添加到屬性即可。

<div uk-leader="fill: -"></div>

<div class="uk-grid-small" uk-grid>
    <div class="uk-width-expand" uk-leader="fill: -">Lorem ipsum dolor sit amet</div>
    <div>$20.90</div>
</div>

注意 默認填充字符可以通過 CSS 或 Less 變量設置。

.uk-leader-fill-content::before { content: '.'; }
:root { --uk-leader-fill-content: '.'; }

@leader-fill-content: '.';

響應式

可以通過將 media 選項應用於屬性並添加適當的視口寬度來禁用不同設備寬度的分隔線。添加以像素為單位的數字，例如 media: 640，或一個斷點，例如 media: @m。分隔線將從指定的視口寬度開始向上顯示，但不低於此寬度。

<div uk-leader="media: @m"></div>

組件選項

任何這些選項都可以應用於組件屬性。用分號分隔多個選項。 了解更多

JavaScript

了解更多關於JavaScript 組件。

初始化

UIkit.leader(element, options);