mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-27 15:19:52 +02:00
Code Issues Releases Wiki Activity

Add horizontal collapse support

Browse Source
This commit is contained in:
Mark Otto
2022-05-24 10:50:03 -07:00
committed by Mark Otto
parent 5968ef23ca
commit 4444f090b6
3 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_transitions.scss
View File

@@ -17,4 +17,10 @@
height: 0; height: 0;
overflow: hidden; overflow: hidden;
@include transition($transition-collapse); @include transition($transition-collapse);
&.width {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
} }

1
scss/_variables.scss
View File

@@ -257,6 +257,7 @@ $caret-spacing: $caret-width * .85 !default;
$transition-base: all .2s ease-in-out !default; $transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default; $transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default; $transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default;
$embed-responsive-aspect-ratios: () !default; $embed-responsive-aspect-ratios: () !default;
$embed-responsive-aspect-ratios: join( $embed-responsive-aspect-ratios: join(

23
site/content/docs/4.6/components/collapse.md
View File

@@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-target` attribute. While n
</div> </div>
{{< /example >}} {{< /example >}}
## Horizontal
The collapse plugin also supports horizontal collapsing. Add the `.width` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
{{< callout info >}}
Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
{{< /callout >}}
{{< example >}}
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
{{< /example >}}
## Multiple targets ## Multiple targets
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute. A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.