跳至主要內容

文件

按鈕

輕鬆建立美觀的按鈕，並提供不同的樣式。

用法

要應用此元件，請將 .uk-button 類別和修飾符（例如 .uk-button-default）新增至 <a> 或 <button> 元素。 將 disabled 屬性新增至 <button> 元素以停用按鈕。

<a class="uk-button uk-button-default" href=""></a>

<button class="uk-button uk-button-default"></button>

<button class="uk-button uk-button-default" disabled></button>

連結 

<p uk-margin>
    <a class="uk-button uk-button-default" href="#">Link</a>
    <button class="uk-button uk-button-default">Button</button>
    <button class="uk-button uk-button-default" disabled>Disabled</button>
</p>

注意 如果您在一行中顯示多個按鈕，當它們在較小的視窗中堆疊時，您可以為它們新增頂部邊距。 只需將邊距元件中的 uk-margin 屬性新增至其父元素即可。

樣式修飾符

有多種樣式修飾符可用。 只需新增以下類別之一即可套用不同的外觀。

類別 說明
.uk-button-default 預設按鈕樣式。
.uk-button-primary 指示主要動作。
.uk-button-secondary 指示重要動作。
.uk-button-danger 指示危險或負面動作。
.uk-button-text 套用排版樣式。
.uk-button-link 套用純連結樣式。 
<button class="uk-button uk-button-primary"></button>

<p uk-margin>
    <button class="uk-button uk-button-default">Default</button>
    <button class="uk-button uk-button-primary">Primary</button>
    <button class="uk-button uk-button-secondary">Secondary</button>
    <button class="uk-button uk-button-danger">Danger</button>
    <button class="uk-button uk-button-text">Text</button>
    <button class="uk-button uk-button-link">Link</button>
</p>

尺寸修飾符

將 .uk-button-small 或 .uk-button-large 類別新增至按鈕，使其變小或變大。

<button class="uk-button uk-button-default uk-button-small"></button>

<button class="uk-button uk-button-default uk-button-large"></button>

<p uk-margin>
    <button class="uk-button uk-button-default uk-button-small">Small button</button>
    <button class="uk-button uk-button-primary uk-button-small">Small button</button>
    <button class="uk-button uk-button-secondary uk-button-small">Small button</button>
</p>

<p uk-margin>
    <button class="uk-button uk-button-default uk-button-large">Large button</button>
    <button class="uk-button uk-button-primary uk-button-large">Large button</button>
    <button class="uk-button uk-button-secondary uk-button-large">Large button</button>
</p>

寬度修飾符

從寬度元件新增 .uk-width-1-1 類別，按鈕將佔用整個寬度。

範例

<button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-secondary uk-width-1-1">Button</button>

群組

要建立按鈕群組，請將 .uk-button-group 類別新增至按鈕周圍的 <div> 元素。 就這樣！ 無需其他標記。

<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
</div>
<div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-secondary">Button</button>
        <button class="uk-button uk-button-secondary">Button</button>
        <button class="uk-button uk-button-secondary">Button</button>
    </div>
</div>

<div class="uk-margin-small">
    <div class="uk-button-group">
        <button class="uk-button uk-button-primary">Button</button>
        <button class="uk-button uk-button-primary">Button</button>
        <button class="uk-button uk-button-primary">Button</button>
    </div>
</div>

<div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-danger">Button</button>
        <button class="uk-button uk-button-danger">Button</button>
        <button class="uk-button uk-button-danger">Button</button>
    </div>
</div>

帶有下拉選單的按鈕

按鈕可用於觸發來自下拉選單元件的下拉選單。

<!-- A button toggling a dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown></div>
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Dropdown</button>
    <div uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

帶有下拉選單的按鈕群組

使用按鈕群組將按鈕分成左側的標準動作和右側的下拉切換。 只需將切換按鈕和下拉選單包裝在 <div> 元素中，然後從實用工具元件新增 .uk-inline 類別即可。

<!-- A button group with a dropdown -->
<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <div class="uk-inline">

        <!-- The button toggling the dropdown -->
        <button class="uk-button uk-button-default" type="button"></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;"></div>

    </div>
</div>

<div class="uk-button-group">
    <button class="uk-button uk-button-default">Dropdown</button>
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button" aria-label="Toggle Dropdown"><span uk-icon="icon:  triangle-down"></span></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>