跳至主要內容

文件

搜尋

輕鬆建立美觀的搜尋。

使用方式

搜尋組件包含一個搜尋表單和搜尋輸入框本身。

類別/屬性 描述
.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>

<form class="uk-search uk-search-default">
    <input class="uk-search-input" type="search" placeholder="" aria-label="">
    <span class="uk-search-icon-flip" uk-search-icon></span>
</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">
        <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
        <span class="uk-search-icon-flip" uk-search-icon></span>
    </form>
</div>

可點擊

若要啟用動作，請使用 <a> 或 <button> 元素建立圖示。

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

<form class="uk-search uk-search-default">
    <input class="uk-search-input" type="search" placeholder="" aria-label="">
    <button class="uk-search-icon-flip" uk-search-icon></button>
</form>
<div class="uk-margin">
    <form class="uk-search uk-search-default">
        <button uk-search-icon></button>
        <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">
        <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
        <button class="uk-search-icon-flip" uk-search-icon></button>
    </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-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>

中等修飾符

若要增加搜尋的大小，例如在下拉選單中使用搜尋時，請新增 .uk-search-medium 類別。

<form class="uk-search uk-search-medium">…</form>
<form class="uk-search uk-search-medium">
    <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>

切換

若要在使用 <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 屬性。