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

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto 2017-10-29 16:13:37 -07:00
commit b5cd9b91b2
8 changed files with 332 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
docs/4.0/components/dropdowns.md
View File

@ -410,6 +410,132 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
</div> </div>
{% endhighlight %} {% endhighlight %}
## Dropright variation
Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element.
<div class="bd-example">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdright</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
{% highlight html %}
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">Dropright</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
{% endhighlight %}
## Dropleft variation
Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
<div class="bd-example">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
</div>
{% highlight html %}
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
{% endhighlight %}
## Menu items ## Menu items
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s. Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.

58
docs/4.0/components/modal.md
View File

@ -208,6 +208,64 @@ When modals become too long for the user's viewport or device, they scroll indep
</div> </div>
{% endhighlight %} {% endhighlight %}
### Vertically centered
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
</div>
{% highlight html %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endhighlight %}
### Tooltips and popovers ### Tooltips and popovers
[Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

28
js/src/dropdown.js
View File

@ -12,14 +12,6 @@ import Util from './util'
const Dropdown = (($) => { const Dropdown = (($) => {
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)')
}
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -55,6 +47,8 @@ const Dropdown = (($) => {
DISABLED : 'disabled', DISABLED : 'disabled',
SHOW : 'show', SHOW : 'show',
DROPUP : 'dropup', DROPUP : 'dropup',
DROPRIGHT : 'dropright',
DROPLEFT : 'dropleft',
MENURIGHT : 'dropdown-menu-right', MENURIGHT : 'dropdown-menu-right',
MENULEFT : 'dropdown-menu-left' MENULEFT : 'dropdown-menu-left'
} }
@ -71,7 +65,11 @@ const Dropdown = (($) => {
TOP : 'top-start', TOP : 'top-start',
TOPEND : 'top-end', TOPEND : 'top-end',
BOTTOM : 'bottom-start', BOTTOM : 'bottom-start',
BOTTOMEND : 'bottom-end' BOTTOMEND : 'bottom-end',
RIGHT : 'right-start',
RIGHTEND : 'right-end',
LEFT : 'left-start',
LEFTEND : 'left-end'
} }
const Default = { const Default = {
@ -145,6 +143,14 @@ const Dropdown = (($) => {
return return
} }
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)')
}
let element = this._element let element = this._element
// for dropup with alignment we use the parent as popper container // for dropup with alignment we use the parent as popper container
if ($(parent).hasClass(ClassName.DROPUP)) { if ($(parent).hasClass(ClassName.DROPUP)) {
@ -235,6 +241,10 @@ const Dropdown = (($) => {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) { if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.TOPEND placement = AttachmentMap.TOPEND
} }
} else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
placement = AttachmentMap.RIGHT
} else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
placement = AttachmentMap.LEFT
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) { } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND placement = AttachmentMap.BOTTOMEND
} }

16
js/src/tooltip.js
View File

@ -12,15 +12,6 @@ import Util from './util'
const Tooltip = (($) => { const Tooltip = (($) => {
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)')
}
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -120,6 +111,13 @@ const Tooltip = (($) => {
class Tooltip { class Tooltip {
constructor(element, config) { constructor(element, config) {
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)')
}
// private // private
this._isEnabled = true this._isEnabled = true

48
js/tests/visual/dropdown.html
View File

@ -93,6 +93,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12 mt-4"> <div class="col-sm-12 mt-4">
<div class="btn-group dropup" role="group"> <div class="btn-group dropup" role="group">
<a href="#" class="btn btn-secondary">Dropup split align right</a> <a href="#" class="btn btn-secondary">Dropup split align right</a>
@ -114,6 +115,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12 mt-4">
<div class="btn-group dropright" role="group">
<a href="#" class="btn btn-secondary">Dropright split</a>
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Product actions</span>
</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">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
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>
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Product actions</span>
</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">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
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>
</div>
</div> </div>
</div> </div>

28
scss/_dropdown.scss
View File

@ -44,6 +44,34 @@
} }
} }
.dropright {
.dropdown-menu {
margin-top: 0;
margin-left: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(right);
&::after {
vertical-align: 0;
}
}
}
.dropleft {
.dropdown-menu {
margin-top: 0;
margin-right: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(left);
&::before {
vertical-align: 0;
}
}
}
// Dividers (basically an `<hr>`) within the dropdown // Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider { .dropdown-divider {
@include nav-divider($dropdown-divider-bg); @include nav-divider($dropdown-divider-bg);

15
scss/_modal.scss
View File

@ -50,11 +50,20 @@
} }
} }
.modal-dialog-centered {
display: flex;
align-items: center;
height: 100%;
margin-top: 0;
margin-bottom: 0;
}
// Actual modal // Actual modal
.modal-content { .modal-content {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog // counteract the pointer-events: none; in the .modal-dialog
pointer-events: auto; pointer-events: auto;
background-color: $modal-content-bg; background-color: $modal-content-bg;
@ -144,11 +153,17 @@
margin: $modal-dialog-margin-y-sm-up auto; margin: $modal-dialog-margin-y-sm-up auto;
} }
.modal-dialog-centered {
margin-top: 0;
margin-bottom: 0;
}
.modal-content { .modal-content {
@include box-shadow($modal-content-box-shadow-sm-up); @include box-shadow($modal-content-box-shadow-sm-up);
} }
.modal-sm { max-width: $modal-sm; } .modal-sm { max-width: $modal-sm; }
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {

30
scss/mixins/_caret.scss
View File

@ -12,6 +12,18 @@
border-left: $caret-width solid transparent; border-left: $caret-width solid transparent;
} }
@mixin caret-right {
border-top: $caret-width solid transparent;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-left {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) { @mixin caret($direction: down) {
@if $enable-caret { @if $enable-caret {
&::after { &::after {
@ -25,6 +37,24 @@
@include caret-down; @include caret-down;
} @else if $direction == up { } @else if $direction == up {
@include caret-up; @include caret-up;
} @else if $direction == right {
@include caret-right;
}
}
@if $direction == left {
&::after {
display: none;
}
&::before {
display: inline-block;
width: 0;
height: 0;
margin-right: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@include caret-left;
} }
} }