mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 01:57:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

#815 menus/dropdowns are fundamentally working, a bit more to do.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-11 15:43:11 -06:00
parent d2a728c1dd
commit 1b91f6f884
12 changed files with 329 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_data/nav.yml
View File

@ -11,7 +11,8 @@
- title: Material Design
pages:
- title: Test
- title: List group
- title: List groups
- title: Menus
- title: Navs
- title: Buttons
- title: Forms

36
docs/material-design/buttons.md
View File

@ -64,7 +64,7 @@ group: material-design
</fieldset>
{% endexample %}
### Sizes
## Sizes
{% example html %}
<button type="button" class="btn btn-raised btn-lg">Large button</button>
<button type="button" class="btn btn-raised">Default button</button>
@ -149,25 +149,25 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
{% example html %}
<button type="button" class="btn btn-primary mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-secondary mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-success mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-info mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-warning mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-danger mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-danger mdb-btn-icon active">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
{% endexample %}
@ -175,22 +175,22 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
{% example html %}
<fieldset disabled>
<button type="button" class="btn btn-primary mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-secondary mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-success mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-info mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-warning mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn btn-danger mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
</fieldset>
{% endexample %}
@ -201,14 +201,16 @@ Using `mdb-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing
{% example html %}
<button type="button" class="btn mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<button type="button" class="btn mdb-btn-icon mdb-btn-icon-sm">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
<span class="btn-group-sm">
<button type="button" class="btn mdb-btn-icon">
<i class="material-icons">grade</i>
<i class="material-icons">more_vert</i>
</button>
</span>
{% endexample %}

2
docs/material-design/list-group.md → docs/material-design/list-groups.md
View File

@ -1,6 +1,6 @@
---
layout: docs
title: List group
title: List groups
group: material-design
---

152
docs/material-design/menus.md Normal file
View File

@ -0,0 +1,152 @@
---
layout: docs
title: Menus
group: material-design
---
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the [Material Design specification](https://www.google.com/design/spec/components/menus.html#menus-specs).
## Styles
{% example html %}
<!-- icon -->
<div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-icon</code>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
</div>
</div>
<!-- fab-sm -->
<div class="dropdown">
<button class="btn mdb-btn-fab mdb-btn-fab-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-fab-sm</code>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
</div>
</div>
<!-- fab -->
<div class="dropdown">
<button class="btn mdb-btn-fab btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-fab</code>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
</div>
</div>
{% endexample %}
## Alignment
### Lower left side
{% example html %}
<div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endexample %}
### Lower right side
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endexample %}
### Top left side
{% example html %}
<div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endexample %}
### Top right side
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endexample %}
## Widths
### Minimum width
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">A</button>
<button class="dropdown-item" type="button">B</button>
</div>
</div>
{% endexample %}
### Maximum width
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">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.</button>
<button class="dropdown-item" type="button">Another action</button>
</div>
</div>
{% endexample %}

59
docs/material-design/test.md
View File

@ -4,65 +4,6 @@ title: Test
group: material-design
---
## Collapse method for mdb-btn-icon and field
{% example html %}
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="material-icons">search</i>
</button>
<span id="collapse-search" class="collapse">
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
</span>
</div>
<script>
// jquery not loaded yet due to the nature of this jekyll page rendering setup so this is more complicated than normally necessary!
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(function(){
// clear field value once closed
$('#collapse-search').on('hidden.bs.collapse', function() {
$('#search').val('')
})
}, 1);
})
</script>
{% endexample %}
{% highlight js %}
// clear field value once closed
$(function() {
$('#collapse-search').on('hidden.bs.collapse', function() {
$('#search').val('')
})
});
{% endhighlight %}
## Collapse on the left
{% example html %}
<div class="mdb-form-group mdb-collapse-inline">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search2" aria-expanded="false" aria-controls="collapse-search2">
<i class="material-icons">search</i>
</button>
<span id="collapse-search2" class="collapse">
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
</span>
</div>
{% endexample %}
## With label-placeholder
Perhaps this isn't worth doing, considering the context. we need to override the top calc to determine where this goes, or perhaps we should switch to a bottom calc for everything?
{% example html %}
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search3" aria-expanded="false" aria-controls="collapse-search3">
<i class="material-icons">search</i>
</button>
<span id="collapse-search3" class="collapse width">
<label class="mdb-label-placeholder" for="search2">Enter your query...</label>
<input class="form-control" type="text" id="search2">
</span>
</div>
{% endexample %}

6
scss/_buttons.scss
View File

@ -97,7 +97,8 @@
width: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
height: $mdb-btn-fab-size;
margin: auto;
//margin: auto;
margin: 1px; // This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
.ripple-container {
@ -123,8 +124,7 @@
width: $mdb-btn-icon-size;
min-width: $mdb-btn-icon-size;
height: $mdb-btn-icon-size;
margin-right: 0;
margin-left: 0;
margin: 0;
color: inherit;
&.mdb-btn-icon-sm,

1
scss/_core.scss
View File

@ -22,6 +22,7 @@
@import "popover";
@import "cards";
@import "modal";
@import "menu";
@import "themes";
@import "ripples";

17
scss/_dropdown.scss
View File

@ -1,17 +0,0 @@
// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 $gray-light;
//.divider {
// background-color: rgba(229, 229, 229, 0.12);
//}
li {
position: relative;
overflow: hidden;
a:hover {
color: $brand-primary;
background-color: transparent;
}
}
}

124
scss/_menu.scss Normal file
View File

@ -0,0 +1,124 @@
// Menus https://www.google.com/design/spec/components/menus.html#menus-specs
// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
.dropdown {
.dropdown-toggle {
&.mdb-btn-icon,
&.mdb-btn-fab {
// remove the dropdown icon
&::after {
display: none;
}
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
}
}
}
&.mdb-btn-fab-sm {
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
&.mdb-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
}
}
}
}
.dropdown-menu {
display: block; // utilize transition transform instead of flipping display
padding: .5rem 0;
border: 0;
opacity: 0;
transition: transform $menu-expand-duration $mdb-animation-curve-default, opacity $menu-fade-duration $mdb-animation-curve-default;
transform: scale(0);
transform-origin: 0 0;
will-change: transform;
@include shadow-2dp();
.open > & {
//z-index: 999;
opacity: 1;
transform: scale(1);
}
&.dropdown-menu-right {
right: 0;
left: auto;
transform-origin: 100% 0;
}
&.dropdown-menu-top-left {
top: auto;
bottom: 0; // needs to be overridden with the toggle-button height, see mdb-btn-icon above
transform-origin: 0 100%;
}
&.dropdown-menu-top-right {
top: auto;
right: 0;
bottom: 0; // needs to be overridden with the toggle-button height, see mdb-btn-icon above
left: auto;
transform-origin: 100% 100%;
}
// https://www.google.com/design/spec/components/menus.html#menus-specs
.dropdown-item {
display: flex;
min-width: $mdb-menu-item-min-width;
max-width: $mdb-menu-item-max-width;
min-height: $mdb-menu-item-min-height;
flex-flow: row wrap;
padding-top: $mdb-menu-item-padding-top;
padding-right: $mdb-menu-item-padding-right;
padding-bottom: $mdb-menu-item-padding-bottom;
padding-left: $mdb-menu-item-padding-left;
// FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md
overflow: hidden;
line-height: $mdb-menu-line-height;
text-overflow: ellipsis;
word-wrap: break-word;
// Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen.
@include media-breakpoint-up(md) {
padding-right: $mdb-menu-item-padding-right-md;
padding-left: $mdb-menu-item-padding-left-md;
}
}
// border: 0;
// box-shadow: 0 2px 5px 0 $gray-light;
// //.divider {
// // background-color: rgba(229, 229, 229, 0.12);
// //}
// li {
// position: relative;
// overflow: hidden;
// a:hover {
// color: $brand-primary;
// background-color: transparent;
// }
// }
}

4
scss/_variables.scss
View File

@ -38,6 +38,7 @@ $enable-flex: true;
//
@import "variables/menu";
@import "variables/drawer";
$mdb-label-color-focus: $brand-primary !default;
@ -136,3 +137,6 @@ $mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
// Menu
$menu-expand-duration: 0.3s !default;
$menu-fade-duration: 0.2s !default;

7
scss/mixins/_buttons.scss
View File

@ -33,7 +33,12 @@
}
}
&.disabled,
// when it is an icon, kill the active bg on open dropdown
.open > &.dropdown-toggle.mdb-btn-icon {
background-color: $background;
}
&.disabled,
&:disabled {
&:focus,
&.focus {

17
scss/variables/_menu.scss Normal file
View File

@ -0,0 +1,17 @@
$mdb-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
$mdb-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
$mdb-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
$mdb-menu-item-min-height: 3rem !default; // 48px
$mdb-menu-item-padding-right: 1rem !default;
$mdb-menu-item-padding-bottom: 1.25rem !default;
$mdb-menu-item-padding-left: 1rem !default;
$mdb-menu-item-padding-top: ($mdb-menu-item-min-height - $font-size-base - $mdb-menu-item-padding-bottom) !default;
// md and up
$mdb-menu-item-padding-right-md: 1.5rem !default;
$mdb-menu-item-padding-left-md: 1.5rem !default;