リーダー

価格表や目次などにリーディングドットを作成します。

リーディングドット（ドットリーダー、タブリーダーとも呼ばれます）は、水平方向のスペースにわたってコンテンツを視覚的に接続するために使用される繰り返しパターンです。レストランのメニュー（料理と価格の間）、目次（タイトルとページ番号の間）などで最もよく使用されます。

使用方法

このコンポーネントを適用するには、左側の要素にuk-leader属性を追加します。デフォルトではドットの文字列が、アイテムとその隣接する要素の間の残りのスペースを埋めます。

<div uk-leader></div>

Lorem ipsum dolor sit amet

$20.90

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

Lorem ipsum dolor sit amet

$20.90

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

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら

オプション	値	デフォルト	説明
`fill`	文字列		オプションの塗りつぶしの文字。
`media`	ブール値、数値、文字列	`false`	スペースの塗りつぶしの条件 - 整数としての幅（例：640）、ブレークポイント（例：@s、@m、@l、@xl）、または有効なメディアクエリ（例：(min-width: 900px)）。

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.leader(element, options);