rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity
70175db429
Bootstrap/js/tests/visual/dropdown.html

212 lines
10 KiB
HTML
Raw Normal View History

Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression.
2017-10-03 18:34:59 +02:00
<!doctype html>
Tighten htmllint's rules. (#24471)
2017-10-22 14:02:24 +02:00
<html lang="en">
Update visual tests.
2016-11-12 16:12:58 +01:00
<head>
<meta charset="utf-8">
Remove the now unneeded `shrink-to-fit` directive. (#28314)
2019-02-27 16:47:41 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1">
Move `href` attribute first (#31835)
2020-10-22 08:38:15 +02:00
<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
Update visual tests.
2016-11-12 16:12:58 +01:00
<title>Dropdown</title>
</head>
<body>
<div class="container">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables
2017-06-26 03:29:43 +02:00
<nav class="navbar navbar-expand-md navbar-light bg-light">
more docs updates
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Navbar</a>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
fix navbar in dropdown visual test file
2016-12-31 06:56:10 +01:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
Update visual tests.
2016-11-12 16:12:58 +01:00
<li class="nav-item active">
Remove redundant visually hidden "(current)" from pagination controls (#31892) * Replace visually hidden span with aria-current in tests * Remove redundant visually hidden "(current)" when `aria-current` already used Closes #31891
2020-10-14 12:59:43 +02:00
<a class="nav-link" href="#" aria-current="page">Home</a>
Update visual tests.
2016-11-12 16:12:58 +01:00
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
Use unordered lists in dropdown-menus
2020-03-31 22:41:28 +02:00
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Update visual tests.
2016-11-12 16:12:58 +01:00
</li>
</ul>
</div>
</nav>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Update visual tests.
2016-11-12 16:12:58 +01:00
<ul class="nav nav-pills mt-3">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
fix dropdown js visual example
2015-08-19 04:42:27 +02:00
</li>
Update visual tests.
2016-11-12 16:12:58 +01:00
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
fix dropdown js visual example
2015-08-19 04:42:27 +02:00
</li>
Update visual tests.
2016-11-12 16:12:58 +01:00
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
Use unordered lists in dropdown-menus
2020-03-31 22:41:28 +02:00
<ul class="dropdown-menu" aria-labelledby="dropdown2">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
fix dropdown js visual example
2015-08-19 04:42:27 +02:00
</li>
</ul>
Handle dropup for Dropdown
2017-04-17 14:26:40 +02:00
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
<div class="row">
<div class="col-sm-12 mt-4">
Dropdown without jQuery
2017-09-26 09:09:40 +02:00
<div class="dropdown">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
Dropdown without jQuery
2017-09-26 09:09:40 +02:00
<div class="dropdown-menu">
<input id="textField" type="text">
</div>
</div>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
<div class="btn-group dropup">
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<button type="button" class="btn btn-secondary">Dropup split</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Dropup split</span>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
</button>
Use unordered lists in dropdown-menus
2020-03-31 22:41:28 +02:00
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
</div>
Update to popper.js v2.x
2020-06-19 10:17:01 +02:00
</div>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
Update to popper.js v2.x
2020-06-19 10:17:01 +02:00
<div class="col-sm-12 mt-4">
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<div class="btn-group dropup">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
Use unordered lists in dropdown-menus
2020-03-31 22:41:28 +02:00
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
</div>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
<div class="btn-group">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
This dropdown's menu is end-aligned
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
</button>
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<div class="dropdown-menu dropdown-menu-end">
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
</div>
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<div class="col-sm-12 mt-4">
<div class="btn-group dropup" role="group">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<a href="#" class="btn btn-secondary">Dropup split align end</a>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Product actions</span>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
</button>
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<div class="dropdown-menu dropdown-menu-end">
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<button class="dropdown-item" type="button">Something else here with a long text</button>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
</div>
</div>
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<div class="btn-group dropup">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
<div class="dropdown-menu dropdown-menu-end">
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
</div>
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
<div class="col-sm-12 mt-4">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<div class="btn-group dropend" role="group">
<a href="#" class="btn btn-secondary">Dropend split</a>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Product actions</span>
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<div class="btn-group dropend">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
Dropend
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<!-- dropstart -->
<div class="btn-group dropstart" role="group">
<a href="#" class="btn btn-secondary">Dropstart split</a>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Product actions</span>
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<div class="btn-group dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
</button>
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
<div class="dropdown-menu" aria-labelledby="dropstartMenu">
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
</div>
Update dropdown.js to allow referenceElement (#25219)
2018-01-21 19:09:23 +01:00
</div>
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
Update dropdown.js to allow referenceElement (#25219)
2018-01-21 19:09:23 +01:00
<div class="row">
Dropdown - Allow to disable Popper.js style (#24092) * Dropdown - Allow to disable Popper.js style * Update dropdown.js * Update dropdown.html * copy changes
2018-02-12 01:45:59 +01:00
<div class="col-sm-3 mt-4">
Update dropdown.js to allow referenceElement (#25219)
2018-01-21 19:09:23 +01:00
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary">Dropdown reference</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
Rename `sr-only`/`sr-only-focusable` (#31139) * Rename `sr-only`/`sr-only-focusable` To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133 Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 13:38:11 +02:00
<span class="visually-hidden">Dropdown split</span>
Update dropdown.js to allow referenceElement (#25219)
2018-01-21 19:09:23 +01:00
</button>
Use unordered lists in dropdown-menus
2020-03-31 22:41:28 +02:00
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Update dropdown.js to allow referenceElement (#25219)
2018-01-21 19:09:23 +01:00
</div>
</div>
Dropdown - Allow to disable Popper.js style (#24092) * Dropdown - Allow to disable Popper.js style * Update dropdown.js * Update dropdown.html * copy changes
2018-02-12 01:45:59 +01:00
<div class="col-sm-3 mt-4">
<div class="dropdown">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Be consistent with Popper's name. (#32224) The npm package is named "popper.js" but the project is named "Popper", so use the latter consistently.
2020-11-21 15:22:08 +01:00
Dropdown menu without Popper
Dropdown - Allow to disable Popper.js style (#24092) * Dropdown - Allow to disable Popper.js style * Update dropdown.js * Update dropdown.html * copy changes
2018-02-12 01:45:59 +01:00
</button>
Use unordered lists in dropdown-menus
2020-03-31 22:41:28 +02:00
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Dropdown - Allow to disable Popper.js style (#24092) * Dropdown - Allow to disable Popper.js style * Update dropdown.js * Update dropdown.html * copy changes
2018-02-12 01:45:59 +01:00
</div>
</div>
Handle dropup for Dropdown
2017-04-17 14:26:40 +02:00
</div>
Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
2017-10-29 23:29:13 +01:00
</div>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Update to popper.js v2.x
2020-06-19 10:17:01 +02:00
<script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
Rename `eventHandler` and `selectorEngine` files.
2019-05-08 15:11:24 +02:00
<script src="../../dist/dom/event-handler.js"></script>
<script src="../../dist/dom/selector-engine.js"></script>
fix remove files in our visual tests
2019-03-17 12:07:26 +01:00
<script src="../../dist/dom/data.js"></script>
Dropdown without jQuery
2017-09-26 09:09:40 +02:00
<script src="../../dist/dom/manipulator.js"></script>
Update visual tests.
2016-11-12 16:12:58 +01:00
<script src="../../dist/dropdown.js"></script>
<script src="../../dist/collapse.js"></script>
</body>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
</html>
Reference in New Issue Copy Permalink