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
2d4f1b272c
Bootstrap/js/tests/visual/dropdown.html

221 lines
11 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>
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">
Use popper to align dropdown menu instead of using css with important
2017-05-17 22:03:11 +02:00
This dropdown's menu is right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<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">
<a href="#" class="btn btn-secondary">Dropup split align right</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>
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<div class="dropdown-menu dropdown-menu-right">
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">
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 align right</button>
Better management of dropdown/dropup with alignment
2017-05-22 16:14:10 +02:00
<div class="dropdown-menu dropdown-menu-right">
<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">
<div class="btn-group dropright" role="group">
<a href="#" class="btn btn-secondary">Dropright 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>
<div class="btn-group dropright">
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">
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
Dropright
</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>
<!-- dropleft -->
<div class="btn-group dropleft" role="group">
<a href="#" class="btn btn-secondary">Dropleft 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>
<div class="btn-group dropleft">
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="dropleftMenu" data-bs-toggle="dropdown" aria-expanded="false">
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
Dropleft
</button>
<div class="dropdown-menu" aria-labelledby="dropleftMenu">
<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">
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" data-bs-offset="10,20">Dropdown offset</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">
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">
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
Dropdown menu without Popper.js
</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>
Update dropdown.js to allow referenceElement (#25219)
2018-01-21 19:09:23 +01:00
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
js/tests/visual: fix popper script. Broken after 787441d.
2018-10-13 15:05:43 +02:00
<script src="../../../node_modules/popper.js/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