Bulma-components-dropdown

提供：Dev Guides
移動先:案内、検索

ブルマ-ドロップダウン

説明

Bulmaは、関連リンクをリスト形式で表示するためのトグル可能なドロップダウンメニューを提供します。 以下のドロップダウン要素で_.dropdown_として基本クラスを使用する必要があります-

Sr.No Tag & Description
1

dropdown

これは、ドロップダウンメニューをラップするメインコンテナーです。

2

dropdown-trigger

これは、テーブルヘッダー行の要素を含むテーブルの上部です。

3

dropdown-menu

これは、関連リンクを含む切り替え可能なメニューです。

4

dropdown-content

背景が白いドロップダウンボックスを指定します。

5

dropdown-item

ドロップダウンの各アイテムを定義します。

6

dropdown-divider

ドロップダウン項目を分割する水平線を指定します。

アンカータグ（<a>）を使用して、_dropdown-item_をリンクとして作成することもできます。 以下の例は、アイテムへのリンクとともに基本的なドロップダウンを表示する方法、上記のドロップダウン要素を使用してページ内のドロップダウンディバイダーを表示する方法を示しています- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Basic Dropdown
            </span>
            <br>
            <br>

            <div class = "dropdown">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu">
                     <span>Countries</span>
                     <span class = "icon is-small">
                        <i class = "fa fa-angle-down" aria-hidden="true"></i>
                     </span>
                  </button>
               </div>
               <div class = "dropdown-menu" id = "dropdown-menu" role = "menu">
                  <div class = "dropdown-content">
                     <a href = "#" class = "dropdown-item">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>
            <script>
              //DOMContentLoaded - it fires when initial HTML document has been completely loaded
               document.addEventListener('DOMContentLoaded', function () {
                 //querySelector - it returns the element within the document that matches the specified selector
                  var dropdown = document.querySelector('.dropdown');

                 //addEventListener - attaches an event handler to the specified element.
                  dropdown.addEventListener('click', function(event) {

                    //event.stopPropagation() - it stops the bubbling of an event to parent elements, by preventing parent event handlers from being executed
                     event.stopPropagation();

                    //classList.toggle - it toggles between adding and removing a class name from an element
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>

      </section>
   </body>

</html>

上記のコードを実行すると、以下の出力が得られます-

ホバリング可能なドロップダウン

ドロップダウンコンポーネントは、_is-hoverable_クラスを使用して、_dropdown-trigger_要素にカーソルを合わせると、関連するリンクをリスト形式で表示します。

以下の例は、ページ内でホバリング可能なドロップダウンを指定します- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Hoverable Dropdown
            </span>
            <br>
            <br>

            <div class = "dropdown is-hoverable">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
                     <span>Countries</span>
                     <span class = "icon is-small">
                        <i class = "fas fa-angle-down" aria-hidden = "true"></i>
                     </span>
                  </button>
               </div>
               <div class = "dropdown-menu" id = "dropdown-menu" role = "menu">
                  <div class = "dropdown-content">
                     <a href = "#" class = "dropdown-item">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>
            <script>
               document.addEventListener('DOMContentLoaded', function () {
                  var dropdown = document.querySelector('.dropdown');
                  dropdown.addEventListener('click', function(event) {
                     event.stopPropagation();
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>

      </section>
   </body>

</html>

以下の出力が表示されます-

右揃えのドロップダウン

Bulmaは、以下の例に示すように、_is-right_修飾子を使用して右揃えのドロップダウンを表示できます- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Right Aligned Dropdown
            </span>
            <br>
            <br>

            <div class = "dropdown is-right">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
                     <span>Countries</span>
                     <span class = "icon is-small">
                        <i class = "fas fa-angle-down" aria-hidden = "true"></i>
                     </span>
                  </button>
               </div>

               <div class = "dropdown-menu" id = "dropdown-menu" role = "menu">
                  <div class = "dropdown-content">
                     <a href = "#" class = "dropdown-item">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>

            <script>
               document.addEventListener('DOMContentLoaded', function () {
                  var dropdown = document.querySelector('.dropdown');
                  dropdown.addEventListener('click', function(event) {
                     event.stopPropagation();
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>

      </section>
   </body>

</html>

以下の出力が表示されます-

ドロップアップ

Bulmaは、以下の例に示すように_is-up_修飾子を使用して、ドロップダウンボタンの上にドロップダウンメニューを表示することができます- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Dropup Menu
            </span>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>

            <div class = "dropdown is-up">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
                     <span>Countries</span>
                     <span class = "icon is-small">
                        <i class = "fas fa-angle-down" aria-hidden = "true"></i>
                     </span>
                  </button>
               </div>

               <div class = "dropdown-menu" id = "dropdown-menu" role = "menu">
                  <div class = "dropdown-content">
                     <a href = "#" class = "dropdown-item">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>

            <script>
               document.addEventListener('DOMContentLoaded', function () {
                  var dropdown = document.querySelector('.dropdown');

                  dropdown.addEventListener('click', function(event) {
                     event.stopPropagation();
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>

      </section>
   </body>

</html>

以下の出力が表示されます-

「https://www.finddevguides.com/index.php?title=Bulma-components-dropdown&oldid=20477」から取得
Powered by MediaWiki