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

ドキュメント

オフキャンバス

モバイルナビゲーションを作成するのに最適な、ページに出入りするオフキャンバスサイドバーを作成します。

使い方

このコンポーネントを適用するには、親の <div> 要素に uk-offcanvas 属性を追加し、以下のクラスを使用してください。

クラス 説明
.uk-offcanvas-bar 子要素の <div> 要素にこのクラスを追加します。
.uk-offcanvas-close <a> または <button> 要素にこのクラスと uk-close 属性を追加して、閉じるボタンを作成し、その機能を有効にします。

オフキャンバスサイドバーを切り替えるには、任意の要素を使用できます。必要なJavaScriptを有効にするには、uk-toggle属性を追加します。<a> 要素は、オフキャンバスコンテナのIDにリンクされている必要があります。ボタンなどの別の要素を使用している場合は、uk-toggle="target: #ID" 属性を追加して、オフキャンバスコンテナのIDをターゲットにします。

<body>

    <!-- This is a button toggling the off-canvas -->
    <button uk-toggle="target: #my-id" type="button"></button>

    <!-- This is an anchor toggling the off-canvas -->
    <a href="#my-id" uk-toggle></a>

    <!-- This is the off-canvas -->
    <div id="my-id" uk-offcanvas>
        <div class="uk-offcanvas-bar">

            <button class="uk-offcanvas-close" type="button" uk-close></button>

        </div>
    </div>

</body>
  • 開く

    タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">Open</button>

<a href="#offcanvas-usage" uk-toggle>Open</a>

<div id="offcanvas-usage" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

オーバーレイ

ページをブランクにするオーバーレイを追加するには、uk-offcanvas 属性に overlay: true パラメータを追加します。

<div id="my-id" uk-offcanvas="overlay: true">…</div>

  • タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-overlay">Open</button>

<div id="offcanvas-overlay" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>


        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

フリップ修飾子

uk-offcanvas 属性に flip: true パラメータを追加して、右からスライドインするように配置を調整します。

<div id="my-id" uk-offcanvas="flip: true">…</div>

  • タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-flip">Open</button>

<div id="offcanvas-flip" uk-offcanvas="flip: true; overlay: true">
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

アニメーションモード

デフォルトでは、オフキャンバスはスライドインします。しかし、オフキャンバスの表示には実際には異なるアニメーションモードを選択できます。以下のいずれかの属性を追加してください。

パラメータ 説明
mode: slide オフキャンバスがスライドアウトし、コンテンツをオーバーレイします。これがデフォルトモードです。
mode: push オフキャンバスがスライドアウトし、サイトをプッシュします。
mode: reveal オフキャンバスがスライドアウトし、サイトをプッシュしながらコンテンツを表示します。
mode: none オフキャンバスは、アニメーションなしで表示され、コンテンツをオーバーレイします。 
<div id="my-id" uk-offcanvas="mode: push">…</div>

  • タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    タイトル

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-slide">Slide</button>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-push">Push</button>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-reveal">Reveal</button>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-none">None</button>

<div id="offcanvas-slide" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

<div id="offcanvas-push" uk-offcanvas="mode: push; overlay: true">
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

<div id="offcanvas-reveal" uk-offcanvas="mode: reveal; overlay: true">
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

<div id="offcanvas-none" uk-offcanvas="mode: none; overlay: true">
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

オフキャンバス内でナビコンポーネントを使用して、モバイルナビゲーションを作成できます。

<div id="my-id" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-default">…</ul>
    </div>
</div>
  • <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-nav-primary">Primary Nav</button>

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-nav">Default Nav</button>

<div id="offcanvas-nav-primary" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar uk-flex uk-flex-column">

        <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
            <li class="uk-active"><a href="#">Active</a></li>
            <li class="uk-parent">
                <a href="#">Parent</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
        </ul>

    </div>
</div>

<div id="offcanvas-nav" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Active</a></li>
            <li class="uk-parent">
                <a href="#">Parent</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
        </ul>

    </div>
</div>

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

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

オプション 値 デフォルト 説明
mode 文字列 slide オフキャンバスのアニメーションモード (slide, reveal, push または none)。
flip ブール値 false オフキャンバスを右側に反転します。
overlay ブール値 false オーバーレイとともにオフキャンバスを表示します。
esc-close ブール値 true Escキーが押されたときにオフキャンバスを閉じます。
bg-close ブール値 true 背景がクリックされたときにオフキャンバスを閉じます。
container 文字列 false セレクターを介してターゲットコンテナを定義して、オフキャンバスをDOMのどこに追加するかを指定します。false に設定すると、この動作は防止されます。

mode は *プライマリ* オプションであり、属性値に唯一のオプションである場合は、そのキーを省略できます。

<span uk-offcanvas="push"></span>

JavaScript

JavaScriptコンポーネントについて詳しくはこちらをご覧ください。

初期化

UIkit.offcanvas(element, options);

イベント

このコンポーネントがアタッチされた要素では、以下のイベントがトリガーされます。

名前 説明
beforeshow アイテムが表示される前に発生します。
show アイテムが表示された後に発生します。
shown アイテムの表示アニメーションが完了した後に発生します。
beforehide アイテムが非表示になる前に発生します。
hide アイテムの非表示アニメーションが開始された後に発生します。
hidden アイテムが非表示になった後に発生します。

メソッド

コンポーネントには、以下のメソッドが使用できます。

表示

UIkit.offcanvas(element).show();

オフキャンバスを表示します。

非表示

UIkit.offcanvas(element).hide();

オフキャンバスを非表示にします。

アクセシビリティ

オフキャンバスコンポーネントは、ダイアログ (モーダル) WAI-ARIA 設計パターンに従い、適切な WAI-ARIA ロール、状態、プロパティを自動的に設定します。

Close コンポーネントは、適切な WAI-ARIA ロールとプロパティを自動的に設定します。

キーボード操作

オフキャンバスコンポーネントには、以下のキーを使用してキーボードからアクセスできます。