mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-27 03:54:13 +03:00
Code Issues Packages Projects Releases Wiki Activity
0d774a871b
mdb-ui-kit/docs/material-design/menus.md
FezVrasta 087985e237 Revert "use #0 instead of dummy # anchor to avoid jumps" 
This reverts commit b80fbb66e6.
2016-08-02 19:44:50 +02:00

6.8 KiB
Raw Blame History

layout title group
docs Menus material-design

Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the Material Design specification.

Contents

  • Will be replaced with the ToC, excluding the "Contents" header {:toc}

Styles

Icon with buttons

{% example html %}

more_vert
Action Another action Another action
{% endexample %}

Icon with links

{% example html %}

{% endexample %}

Small fab

{% example html %}

more_vert
Action Another action
{% endexample %}

Default fab

{% example html %}

more_vert
Action Another action

{% endexample %}

Default button

{% example html %}

{% endexample %}

Alignment

Lower left side

{% example html %}

more_vert
Action Another action Disabled action
Separated link
{% endexample %}

Lower right side

dropdown usage misaligned - see upstream Bootstrap issue #18552. Use btn-group instead until issue is resolved (next example). {% example html %}

more_vert
Action Another action Disabled action
Separated link
{% endexample %}

btn-group usage works fine in this alignment. {% example html %}

more_vert
Action Another action Disabled action
Separated link
{% endexample %}

Widths

Minimum width

{% example html %}

more_vert
A B
{% endexample %}

Maximum width

{% example html %}

more_vert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero. Another action
{% endexample %}