root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Add rudimentary nested dropdowns

This commit is contained in:
Mark Otto 2022-02-23 14:04:38 -08:00
parent 88437bd464
commit e12dddc50e
3 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
scss/_dropdown.scss
View File

@ -63,6 +63,25 @@
left: 0; left: 0;
margin-top: var(--#{$variable-prefix}dropdown-spacer); margin-top: var(--#{$variable-prefix}dropdown-spacer);
} }
.dropdown > .dropdown-item {
background-image: escape-svg($dropdown-nested-bg);
background-repeat: no-repeat;
background-position: $dropdown-nested-bg-position;
background-size: $dropdown-nested-bg-size;
&:active {
background-image: escape-svg($dropdown-nested-active-bg);
}
}
.dropdown .dropdown-menu:hover,
.dropdown > .dropdown-item:hover ~ .dropdown-menu {
position: absolute;
top: 0;
left: calc(100% - .25rem); // stylelint-disable-line function-disallowed-list
display: block;
} }
// scss-docs-start responsive-breakpoints // scss-docs-start responsive-breakpoints

5
scss/_variables.scss
View File

@ -1149,6 +1149,11 @@ $dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default; $dropdown-header-color: $gray-600 !default;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
$dropdown-nested-bg: url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default;
$dropdown-nested-active-bg: url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-active-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default;
$dropdown-nested-bg-position: right $dropdown-item-padding-x center !default;
$dropdown-nested-bg-size: 7px 12px !default;
// scss-docs-end dropdown-variables // scss-docs-end dropdown-variables
// scss-docs-start dropdown-dark-variables // scss-docs-start dropdown-dark-variables

24
site/content/docs/5.1/components/dropdowns.md
View File

@ -393,6 +393,30 @@ And putting it to use in a navbar:
</nav> </nav>
{{< /example >}} {{< /example >}}
## Nesting
{{< example >}}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownNestedBtn" data-bs-toggle="dropdown" aria-expanded="false">
Nested dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownNestedBtn">
<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>
<li><hr class="dropdown-divider"></li>
<li class="dropdown">
<a class="dropdown-item" href="#" aria-labelledby="dropdownNested1">Nested dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdownNested1">
<li><a class="dropdown-item" href="#">Nested item</a></li>
<li><a class="dropdown-item" href="#">Nested item 2</a></li>
<li><a class="dropdown-item" href="#">Nested item 3</a></li>
</ul>
</li>
</ul>
</div>
{{< /example >}}
## Directions ## Directions
{{< callout info >}} {{< callout info >}}