ドロワー .drawer

ドロワーは、コンテンツを上下左右から表示するフローティング型のビューです。

JavaScript API

本ビューは、ReactやVue等のUIフレームワークでクラスをデータバインディングすることを想定しておりますが、それらのフレームワークを使用していない環境向けにオプションのJavaScriptを利用することで簡単に扱えます。

ドロワーのJavaScript APIを利用する場合は、読み込み時にまずドロワーのセットアップ関数setupDrawer();を実行します。かわりにグローバル・セットアップ関数setupAll();を実行することで、他のコンポーネントを含むXelticaUIの全てのAPIを有効化できます。

セットアップ関数を実行すると、.drawer-containerクラスを持つ要素にopen、closeメソッドが追加されます。それぞれドロワーを開く、閉じる動作が行われます。

例

コード(HTML)

<div id="drawer1" class="drawer-container">
  <div class="backdrop"></div>
  <div class="drawer">
    <header>
      <button class="close">
        <i class="fas fa-times"></i>
      </button>
      <h1>選んでください</h1>
    </header>
    <div class="body">
      <div class="menu">
      <section>
        <div class="item">Home</div>
        <div class="item">About</div>
        <div class="item">Products</div>
        <div class="item">Store</div>
        <div class="item">Contact</div>
      </section>
      <section>
        <div class="item">My Page</div>
        <div class="item">Settings</div>
        <div class="item">Help</div>
      </section>
    </div>
  </div>
</div>
<button id="display1" class="btn primary">表示</button>

コード(JavaScript)

// あるいはsetupAll();
setupDrawer();

const btn = document.getElementById('display1');
// ボタンを押したらドロワーを開く
btn.addEventListener('click', () => {
  document.getElementById('drawer1').open();
});