mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-22 09:36:55 +03:00
added buttons page
This commit is contained in:
parent
e3e21db4f4
commit
4f243cd3e6
|
@ -26,6 +26,7 @@
|
|||
- title: Material Design
|
||||
pages:
|
||||
- title: Test
|
||||
- title: Buttons
|
||||
- title: Forms
|
||||
- title: Labels
|
||||
- title: Selections
|
||||
|
|
|
@ -13,6 +13,10 @@
|
|||
{% endif %}
|
||||
</title>
|
||||
|
||||
<!-- Material Design fonts -->
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<!-- Material Design for Bootstrap CSS (includes a compiled/customized version of Bootstrap) -->
|
||||
<!--<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">-->
|
||||
|
||||
|
|
148
docs/material-design/buttons.md
Normal file
148
docs/material-design/buttons.md
Normal file
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Buttons
|
||||
group: material-design
|
||||
---
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Flat
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn"><code>btn</code> only</button>
|
||||
<button type="button" class="btn active"><code>.active</code></button>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
{% endexample %}
|
||||
|
||||
### Disabled
|
||||
|
||||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn"><code>btn</code> only</button>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</fieldset>
|
||||
{% endexample %}
|
||||
|
||||
## Raised
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-raised active"><code>.active</code></button>
|
||||
<button type="button" class="btn btn-raised btn-default">Default</button>
|
||||
<button type="button" class="btn btn-raised btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-raised btn-success">Success</button>
|
||||
<button type="button" class="btn btn-raised btn-info">Info</button>
|
||||
<button type="button" class="btn btn-raised btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-raised btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-raised btn-link">Link</button>
|
||||
{% endexample %}
|
||||
|
||||
### Disabled
|
||||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn btn-raised btn-default">Default</button>
|
||||
<button type="button" class="btn btn-raised btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-raised btn-success">Success</button>
|
||||
<button type="button" class="btn btn-raised btn-info">Info</button>
|
||||
<button type="button" class="btn btn-raised btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-raised btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-raised btn-link">Link</button>
|
||||
</fieldset>
|
||||
{% endexample %}
|
||||
|
||||
## Floating Action
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-default btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-info btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
### Disabled
|
||||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn btn-default btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-info btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
</fieldset>
|
||||
{% endexample %}
|
||||
|
||||
### Mini
|
||||
{% example html %}
|
||||
<fieldset class="btn-group-sm">
|
||||
<button type="button" class="btn btn-default btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-info btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
</fieldset>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## 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>
|
||||
<button type="button" class="btn btn-raised btn-sm">Small button</button>
|
||||
{% endexample %}
|
||||
|
||||
## x
|
||||
{% example html %}
|
||||
{% endexample %}
|
|
@ -62,16 +62,16 @@ const Util = (($) => {
|
|||
return true
|
||||
} else if (typeof event.which === 'number' && event.which > 0) {
|
||||
return (
|
||||
!evt.ctrlKey
|
||||
&& !evt.metaKey
|
||||
&& !evt.altKey
|
||||
&& evt.which != 8 // backspace
|
||||
&& evt.which != 9 // tab
|
||||
&& evt.which != 13 // enter
|
||||
&& evt.which != 16 // shift
|
||||
&& evt.which != 17 // ctrl
|
||||
&& evt.which != 20 // caps lock
|
||||
&& evt.which != 27 // escape
|
||||
!event.ctrlKey
|
||||
&& !event.metaKey
|
||||
&& !event.altKey
|
||||
&& event.which != 8 // backspace
|
||||
&& event.which != 9 // tab
|
||||
&& event.which != 13 // enter
|
||||
&& event.which != 16 // shift
|
||||
&& event.which != 17 // ctrl
|
||||
&& event.which != 20 // caps lock
|
||||
&& event.which != 27 // escape
|
||||
)
|
||||
}
|
||||
return false
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
}
|
||||
|
||||
// mdb default buttons are flat by default
|
||||
// synchronized with mdl 11/23/15
|
||||
.btn,
|
||||
.input-group-btn .btn {
|
||||
position: relative;
|
||||
|
|
Loading…
Reference in New Issue
Block a user