diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/components/dropdowns.md | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 670ea5985..b4c70478e 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -671,6 +671,38 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. </div> {% endexample %} +## Dropdown options + +Use `data-offset` or `data-reference` to change the location of the dropdown. + +{% example html %} +<div class="d-flex"> + <div class="dropdown mr-1"> + <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20"> + Offset + </button> + <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> + <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> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-secondary">Reference</button> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent"> + <span class="sr-only">Toggle Dropdown</span> + </button> + <div class="dropdown-menu" aria-labelledby="dropdownMenuReference"> + <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> +{% endexample %} + ## Usage Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. @@ -740,6 +772,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>'scrollParent'</td> <td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td> </tr> + <tr> + <td>reference</td> + <td>string | element</td> + <td>'toggle'</td> + <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#referenceObject">referenceObject docs</a>.</td> + </tr> </tbody> </table> |