POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/dropdowns.html

   1 <div class="bs-docs-section">
   2   <h1 id="dropdowns" class="page-header">Dropdowns</h1>
   3
   4   <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
   5
   6   <h2 id="dropdowns-example">Example</h2>
   7   <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML. Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p>
   8   <div class="bs-example" data-example-id="static-dropdown">
   9     <div class="dropdown clearfix">
  10       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
  11         Dropdown
  12         <span class="caret"></span>
  13       </button>
  14       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  15         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  16         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  17         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  18       </ul>
  19     </div>
  20     <div class="dropup clearfix">
  21       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
  22         Dropdown
  23         <span class="caret"></span>
  24       </button>
  25       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  26         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  27         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  28         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  29       </ul>
  30     </div>
  31   </div><!-- /example -->
  32 {% highlight html %}
  33 <div class="dropdown">
  34   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
  35     Dropdown
  36     <span class="caret"></span>
  37   </button>
  38   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  39     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  40     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  41     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  42     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  43   </ul>
  44 </div>
  45 <div class="dropup">
  46   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
  47     Dropdown
  48     <span class="caret"></span>
  49   </button>
  50   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  51     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  52     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  53     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  54     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  55   </ul>
  56 </div>
  57 {% endhighlight %}
  58
  59   <h2 id="dropdowns-alignment">Alignment</h2>
  60   <p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
  61   <div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning">
  62     <h4>May require additional positioning</h4>
  63     <p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
  64   </div>
  65   <div class="bs-callout bs-callout-warning" id="callout-dropdown-pull-right">
  66     <h4>Deprecated <code>.pull-right</code> alignment</h4>
  67     <p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
  68   </div>
  69 {% highlight html %}
  70 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  71   ...
  72 </ul>
  73 {% endhighlight %}
  74
  75   <h2 id="dropdowns-headers">Headers</h2>
  76   <p>Add a header to label sections of actions in any dropdown menu.</p>
  77   <div class="bs-example">
  78     <div class="dropdown clearfix">
  79       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
  80         Dropdown
  81         <span class="caret"></span>
  82       </button>
  83       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  84         <li role="presentation" class="dropdown-header">Dropdown header</li>
  85         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  86         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  87         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  88         <li role="presentation" class="dropdown-header">Dropdown header</li>
  89         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  90       </ul>
  91     </div>
  92   </div><!-- /example -->
  93 {% highlight html %}
  94 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  95   ...
  96   <li role="presentation" class="dropdown-header">Dropdown header</li>
  97   ...
  98 </ul>
  99 {% endhighlight %}
 100
 101   <h2 id="dropdowns-divider">Divider</h2>
 102   <p>Add a divider to separate series of links in a dropdown menu.</p>
 103   <div class="bs-example">
 104     <div class="dropdown clearfix">
 105       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
 106         Dropdown
 107         <span class="caret"></span>
 108       </button>
 109       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
 110         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 111         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 112         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 113         <li role="presentation" class="divider"></li>
 114         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 115       </ul>
 116     </div>
 117   </div><!-- /example -->
 118 {% highlight html %}
 119 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
 120   ...
 121   <li role="presentation" class="divider"></li>
 122   ...
 123 </ul>
 124 {% endhighlight %}
 125
 126   <h2 id="dropdowns-disabled">Disabled menu items</h2>
 127   <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
 128   <div class="bs-example">
 129     <div class="dropdown clearfix">
 130       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-expanded="true">
 131         Dropdown
 132         <span class="caret"></span>
 133       </button>
 134       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
 135         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
 136         <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
 137         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
 138       </ul>
 139     </div>
 140   </div><!-- /example -->
 141 {% highlight html %}
 142 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
 143   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
 144   <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
 145   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
 146 </ul>
 147 {% endhighlight %}
 148 </div>