メインコンテンツへスキップ

ドキュメント

検索

見栄えの良い検索を簡単に作成できます。

使用方法

検索コンポーネントは、検索フォームと検索入力自体で構成されています。

クラス/属性 説明
.uk-search このクラスをコンテナ要素に追加して、検索コンポーネントを定義します。
.uk-search-input このクラスを<input>要素に追加して、検索フィールドを作成します。 
<form class="uk-search" aria-label="Search">
    <input class="uk-search-input" type="search" placeholder="" aria-label="">
</form>

デフォルトでは、検索に追加のスタイルはありません。この例では、.uk-search-default修飾子を使用しています。

  • <form class="uk-search uk-search-default">
    <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
</form>

検索アイコン

検索アイコンを作成するには、uk-search-icon属性を<span>要素に追加します。配置を変更するには、.uk-search-icon-flipクラスを追加します。

<form class="uk-search uk-search-default">
    <span uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="" aria-label="">
</form>
  • <div class="uk-margin">
    <form class="uk-search uk-search-default">
        <span uk-search-icon></span>
        <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
    </form>
</div>

<div class="uk-margin">
    <form class="uk-search uk-search-default">
        <span class="uk-search-icon-flip" uk-search-icon></span>
        <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
    </form>
</div>

クリック可能

アクションを有効にするには、<a>または<button>要素を使用してアイコンを作成します。

<form class="uk-search uk-search-default">
    <a href="" uk-search-icon></a>
    <input class="uk-search-input" type="search" placeholder="" aria-label="">
</form>
  • <div class="uk-margin">
    <form class="uk-search uk-search-default">
        <a href="" uk-search-icon></a>
        <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
    </form>
</div>

<div class="uk-margin">
    <form class="uk-search uk-search-default">
        <a href="" class="uk-search-icon-flip" uk-search-icon></a>
        <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
    </form>
</div>

デフォルト修飾子

デフォルトの検索スタイルを適用するには、.uk-search-defaultクラスを追加します。

<form class="uk-search uk-search-default">…</form>
  • <form class="uk-search uk-search-default">
    <span uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
</form>

ラージ修飾子

検索のサイズを大きくするには、たとえばオーバーレイ検索を作成する場合、.uk-search-largeクラスを追加します。

<form class="uk-search uk-search-large">…</form>
  • <form class="uk-search uk-search-large">
    <span uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
</form>

検索は、ナビゲーションバーコンポーネントのナビゲーションバー内で使用できます。 .uk-search-navbarクラスを追加するだけです。

<form class="uk-search uk-search-navbar">…</form>
  • <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <div class="uk-navbar-item">
            <form class="uk-search uk-search-navbar">
                <span uk-search-icon></span>
                <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
            </form>
        </div>

    </div>
</nav>

トグル

<a>または<button>要素を使用する場合に、検索アイコンにホバー状態を適用するには、.uk-search-toggleクラスを追加します。 検索アイコン自体を作成するには、uk-search-icon属性を追加します。

<a class="uk-search-toggle" href="" uk-search-icon></a>
  • <a class="uk-search-toggle" href="" uk-search-icon></a>

ナビゲーションバーでの検索

検索アイコンは、ナビゲーションバー内で検索を開くためのトグルとして使用できます。オーバーレイ、ドロップ、ドロップダウンとして、またはモーダルで外部に配置できます。アイコンに.uk-navbar-toggleクラスを追加するだけです。

<div class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" uk-search-icon uk-toggle href=""></a>
    </div>
</div>

オーバーレイ

  • <nav class="uk-navbar-container uk-margin" uk-navbar>

    <div class="nav-overlay uk-navbar-left">

        <a class="uk-navbar-item uk-logo" href="#">Logo</a>

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>

    <div class="nav-overlay uk-navbar-right">

        <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a>

    </div>

    <div class="nav-overlay uk-navbar-left uk-flex-1" hidden>

        <div class="uk-navbar-item uk-width-expand">
            <form class="uk-search uk-search-navbar uk-width-1-1">
                <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
            </form>
        </div>

        <a class="uk-navbar-toggle" uk-close uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a>

    </div>

</nav>

ドロップ

  • <nav class="uk-navbar-container uk-margin" uk-navbar>
    <div class="uk-navbar-left">

        <a class="uk-navbar-item uk-logo" href="#">Logo</a>

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-navbar-right">

        <div>
            <a class="uk-navbar-toggle" href uk-search-icon></a>
            <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
                <form class="uk-search uk-search-navbar uk-width-1-1">
                    <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
                </form>
            </div>
        </div>

    </div>
</nav>
  • <nav class="uk-navbar-container uk-margin" uk-navbar>
    <div class="uk-navbar-left">

        <a class="uk-navbar-item uk-logo" href="#">Logo</a>

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-navbar-right">

        <div>
            <a class="uk-navbar-toggle" href uk-search-icon></a>
            <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">

                <div class="uk-grid-small uk-flex-middle" uk-grid>
                    <div class="uk-width-expand">
                        <form class="uk-search uk-search-navbar uk-width-1-1">
                            <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search" autofocus>
                        </form>
                    </div>
                    <div class="uk-width-auto">
                        <a class="uk-drop-close" href="#" uk-close></a>
                    </div>
                </div>

            </div>
        </div>

    </div>
</nav>
  • <nav class="uk-navbar uk-navbar-container uk-margin">
    <div class="uk-navbar-left">

        <a class="uk-navbar-item uk-logo" href="#">Logo</a>

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-navbar-right">

        <a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>

    </div>
</nav>

<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
    <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
        <button class="uk-modal-close-full" type="button" uk-close></button>
        <form class="uk-search uk-search-large">
            <input class="uk-search-input uk-text-center" type="search" placeholder="Search" aria-label="Search" autofocus>
        </form>
    </div>
</div>

アクセシビリティ

適切なWAI-ARIAの役割、状態、およびプロパティを検索コンポーネントに設定します。

<input class="uk-search-input" type="search" aria-label="…">

国際化

検索コンポーネントは、次の翻訳文字列を使用します。コンポーネントの翻訳について詳しく学んでください。

キー デフォルト 説明
toggle 検索を開く トグルボタンのaria-label属性。
submit 検索を送信 送信ボタンのaria-label属性。