Skip to content

Commit

Permalink
Site: Dropdown add demo of .dropdown-action and update aria attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
@pat270
pat270 committed Aug 9, 2017
1 parent 6481ecd commit 40821b2
Showing 1 changed file with 135 additions and 48 deletions.
183 changes: 135 additions & 48 deletions src/content/dropdowns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,70 @@
section: Components
---

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Dropdown Action</h3>

<blockquote class="blockquote blockquote-sm">
<p>A special <code>dropdown-toggle</code> for a dropdown containing several actions.</p>
</blockquote>

<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<div aria-labelledby="dropdownAction1" class="dropdown-menu">
<a class="dropdown-item" href="#1">Download</a>
<a class="dropdown-item" href="#1">Edit</a>
<a class="dropdown-item" href="#1">Move</a>
<a class="dropdown-item" href="#1">Checkout</a>
<a class="dropdown-item" href="#1">Permissions</a>
<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
</div>
</div>

<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" id="dropdownAction2" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</button>
<div aria-labelledby="dropdownAction2" class="dropdown-menu">
<a class="dropdown-item" href="#1">Download</a>
<a class="dropdown-item" href="#1">Edit</a>
<a class="dropdown-item" href="#1">Move</a>
<a class="dropdown-item" href="#1">Checkout</a>
<a class="dropdown-item" href="#1">Permissions</a>
<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
</div>
</div>

<div class="dropdown dropdown-action">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-link dropdown-toggle" data-toggle="dropdown" id="dropdownAction3" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</button>
<div aria-labelledby="dropdownAction3" class="dropdown-menu">
<a class="dropdown-item" href="#1">Download</a>
<a class="dropdown-item" href="#1">Edit</a>
<a class="dropdown-item" href="#1">Move</a>
<a class="dropdown-item" href="#1">Checkout</a>
<a class="dropdown-item" href="#1">Permissions</a>
<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
</div>
</div>
</div>
</div>

<div class="clay-site-row-spacer row clay-site-dropdown-display">
<div class="col-md-12">
<h3>Dropdown Menu</h3>

<div class="clay-site-dropdown-menu-container">
<div class="dropdown-menu">
<div aria-labelledby="" class="dropdown-menu">
<div class="dropdown-subheader">Order by</div>
<a class="active dropdown-item" href="#">Author</a>
<a class="disabled dropdown-item" href="#">Title Entry</a>
Expand All @@ -18,7 +78,7 @@
</div>

<div class="clay-site-dropdown-menu-container">
<div class="dropdown-menu">
<div aria-labelledby="" class="dropdown-menu">
<form>
<div class="dropdown-section">
<div class="input-group input-group-inset">
Expand Down Expand Up @@ -61,7 +121,7 @@
</div>

<div class="clay-site-dropdown-menu-container">
<div class="dropdown-menu">
<div aria-labelledby="" class="dropdown-menu">
<form>
<div class="dropdown-subheader">Order by</div>
<div class="active dropdown-item">
Expand Down Expand Up @@ -101,7 +161,7 @@ <h3>Dropdown Menu with Indicators</h3>

<div class="col-md-6">
<h6>dropdown-menu-indicator-start</h6>
<div class="dropdown-menu dropdown-menu-indicator-start">
<div aria-labelledby="" class="dropdown-menu dropdown-menu-indicator-start">
<div class="dropdown-header">Dropdown Header</div>
<div class="dropdown-divider"></div>
<div class="dropdown-subheader">Dropdown Sub Header</div>
Expand Down Expand Up @@ -137,7 +197,7 @@ <h6>dropdown-menu-indicator-start</h6>

<div class="col-md-6">
<h6>dropdown-menu-indicator-end</h6>
<div class="dropdown-menu dropdown-menu-indicator-end">
<div aria-labelledby="" class="dropdown-menu dropdown-menu-indicator-end">
<div class="dropdown-header">Folder</div>
<div class="dropdown-divider"></div>
<div class="dropdown-subheader">Order By</div>
Expand Down Expand Up @@ -182,7 +242,7 @@ <h3>Scrolling Content</h3>
</div>

<div class="col-md-6">
<ul class="dropdown-menu">
<ul aria-labelledby="" class="dropdown-menu">
<div class="dropdown-header">Dropdown Header</div>
<div class="inline-scroller">
<a class="dropdown-item" href="#1">Actions</a>
Expand All @@ -209,7 +269,7 @@ <h3>Scrolling Content</h3>
</div>

<div class="col-md-6">
<div class="dropdown-menu">
<div aria-labelledby="" class="dropdown-menu">
<div class="alert alert-fluid alert-info" role="alert">
You can customize this menu or see all you have by pressing "more".
</div>
Expand Down Expand Up @@ -246,7 +306,7 @@ <h3>Dropdown wide / full</h3>
<p>Use <code class="code">.dropdown-wide</code> with <code class="code">.dropdown</code> to make the dropdown menu big. The default width is 500px. Use <code class="code">.dropdown-full</code> to create a dropdown menu as wide as its relative parent. See dropdown examples.</p>
</blockquote>

<div class="dropdown-wide dropdown-wide-container">
<div aria-labelledby="" class="dropdown-wide dropdown-wide-container">
<div class="dropdown-menu">
<div class="row">
<div class="col-sm-4">
Expand Down Expand Up @@ -292,7 +352,7 @@ <h3>Dropdown wide / full</h3>
<div class="col-md-12">
<h3>Dropdown Menu Horizontal</h3>

<div class="dropdown-menu dropdown-menu-horizontal">
<div aria-labelledby="" class="dropdown-menu dropdown-menu-horizontal">
<div class="dropdown-subheader">Order by</div>
<a class="active dropdown-item" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
Expand Down Expand Up @@ -322,11 +382,11 @@ <h3>Dropdown Alignment</h3>
</blockquote>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment1" type="button">
Default
<span class="icon-caret-down"></span>
<span aria-hidden="true" class="icon-caret-down"></span>
</button>
<div class="dropdown-menu">
<div aria-labelledby="dropdownAlignment1" class="dropdown-menu">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -336,11 +396,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment2" type="button">
Right
<span class="icon-caret-down"></span>
<span aria-hidden="true" class="icon-caret-down"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<div aria-labelledby="dropdownAlignment2" class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -350,11 +410,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment3" type="button">
Top
<span class="icon-caret-up"></span>
<span aria-hidden="true" class="icon-caret-up"></span>
</button>
<div class="dropdown-menu dropdown-menu-top">
<div aria-labelledby="dropdownAlignment3" class="dropdown-menu dropdown-menu-top">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -364,8 +424,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">Top Right <span class="icon-caret-up"></span></button>
<div class="dropdown-menu dropdown-menu-top-right">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment4" type="button">
Top Right
<span aria-hidden="true" class="icon-caret-up"></span>
</button>
<div aria-labelledby="dropdownAlignment4" class="dropdown-menu dropdown-menu-top-right">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -383,8 +446,11 @@ <h3>Dropdown Alignment</h3>
</blockquote>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">Right Side <span class="icon-caret-right"></span></button>
<div class="dropdown-menu dropdown-menu-right-side">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment5" type="button">
Right Side
<span class="icon-caret-right"></span>
</button>
<div aria-labelledby="dropdownAlignment5" class="dropdown-menu dropdown-menu-right-side">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -394,8 +460,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="icon-caret-left"></span> Left Side</button>
<div class="dropdown-menu dropdown-menu-left-side">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment6" type="button">
<span class="icon-caret-left"></span>
Left Side
</button>
<div aria-labelledby="dropdownAlignment6" class="dropdown-menu dropdown-menu-left-side">
<div class="dropdown-header">Dropdown Header</div>
<div class="inline-scroller">
<a class="dropdown-item" href="#">Action</a>
Expand All @@ -412,8 +481,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">Right Side Bottom <span class="icon-caret-right"></span></button>
<div class="dropdown-menu dropdown-menu-right-side-bottom">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment7" type="button">
Right Side Bottom
<span class="icon-caret-right"></span>
</button>
<div aria-labelledby="dropdownAlignment7" class="dropdown-menu dropdown-menu-right-side-bottom">
<div class="inline-scroller">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
Expand All @@ -430,8 +502,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="icon-caret-left"></span> Left Side Bottom</button>
<div class="dropdown-menu dropdown-menu-left-side-bottom">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment8" type="button">
<span class="icon-caret-left"></span>
Left Side Bottom
</button>
<div aria-labelledby="dropdownAlignment8" class="dropdown-menu dropdown-menu-left-side-bottom">
<ul class="inline-scroller">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
Expand All @@ -458,8 +533,11 @@ <h3>Dropdown Alignment</h3>
</blockquote>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">Center <span class="icon-caret-down"></span></button>
<div class="dropdown-menu dropdown-menu-center">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment9" type="button">
Center
<span class="icon-caret-down"></span>
</button>
<div aria-labelledby="dropdownAlignment9" class="dropdown-menu dropdown-menu-center">
<div class="dropdown-header">dropdown-menu-center</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -469,19 +547,25 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">Top Center <span class="icon-caret-up"></span></button>
<ul class="dropdown-menu dropdown-menu-top-center">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment10" type="button">
Top Center
<span class="icon-caret-up"></span>
</button>
<div aria-labelledby="dropdownAlignment10" class="dropdown-menu dropdown-menu-top-center">
<div class="dropdown-header">dropdown-menu-top-center</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Scope</a>
</ul>
</div>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="icon-caret-left"></span> Left Side Middle</button>
<div class="dropdown-menu dropdown-menu-left-side-middle">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment11" type="button">
<span class="icon-caret-left"></span>
Left Side Middle
</button>
<div aria-labelledby="dropdownAlignment11" class="dropdown-menu dropdown-menu-left-side-middle">
<div class="dropdown-header">Dropdown Header</div>
<div class="inline-scroller">
<a class="dropdown-item" href="#">Action</a>
Expand All @@ -498,8 +582,11 @@ <h3>Dropdown Alignment</h3>
</div>

<div class="dropdown" style="display: inline-block;">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">Right Side Middle <span class="icon-caret-right"></span></button>
<div class="dropdown-menu dropdown-menu-right-side-middle">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownAlignment12" type="button">
Right Side Middle
<span class="icon-caret-right"></span>
</button>
<div aria-labelledby="dropdownAlignment12" class="dropdown-menu dropdown-menu-right-side-middle">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Action</a>
<a class="disabled dropdown-item" href="#">Disabled</a>
Expand All @@ -518,13 +605,13 @@ <h3>Dropdown Examples</h3>
<div class="container-fluid">
<ul class="navbar-nav">
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" id="navbarDropdownMenuLink1">
Dropdown
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<div aria-labelledby="navbarDropdownMenuLink1" class="dropdown-menu">
<form>
<div class="dropdown-section">
<select class="form-control">
Expand Down Expand Up @@ -587,13 +674,13 @@ <h3>Dropdown Examples</h3>
</li>

<li class="dropdown dropdown-wide nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" id="navbarDropdownMenuLink2">
Dropdown Wide
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div class="dropdown-menu">
<div aria-labelledby="navbarDropdownMenuLink2" class="dropdown-menu">
<div class="row">
<div class="col-sm-4">
<div class="dropdown-header">By Resource</div>
Expand Down Expand Up @@ -631,13 +718,13 @@ <h3>Dropdown Examples</h3>
</li>

<li class="dropdown dropdown-full nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" id="navbarDropdownMenuLink3">
Dropdown Full
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div class="dropdown-menu">
<div aria-labelledby="navbarDropdownMenuLink3" class="dropdown-menu">
<div class="row">
<div class="col-sm-4">
<div class="dropdown-header">By Resource</div>
Expand Down Expand Up @@ -685,13 +772,13 @@ <h3>Dropdown Examples</h3>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#1">Link</a></li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" id="navbarDropdownMenuLink4">
Dropdown
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div aria-labelledby="dropdownMenu" class="dropdown-menu dropdown-menu-right">
<div aria-labelledby="navbarDropdownMenuLink4" class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header" role="presentation">Dropdown Header</div>
<div class="inline-scroller">
<a class="dropdown-item" href="#1">Actions</a>
Expand All @@ -711,9 +798,9 @@ <h3>Dropdown Examples</h3>
<a class="dropdown-item" href="#1">View</a>
<a class="dropdown-item" href="#1">Permissions</a>
</div>
<a class="disabled dropdown-item" href="#1" role="menuitem">Disabled</a>
<div class="dropdown-divider" role="presentation"></div>
<a class="dropdown-item" href="#1" role="menuitem">Scope</a>
<a class="disabled dropdown-item" href="#1">Disabled</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#1">Scope</a>
</div>
</li>
</ul>
Expand Down

0 comments on commit 40821b2

Please sign in to comment.