Button-MDUI development document, Material Design front-end framework

style

Flat button

for <a>、 <button> or <input> Element addition class .mdui-btn You can get the flat button style.

Example

<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>

Floating button

Add to flat buttons .mdui-btn-raised The class can make the button get a floating effect.

Example

<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>

Icon button

Add a class to the flat button .mdui-btn-icon It can be turned into an icon button.

Example

<button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">add</i></button>
<button class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">add</i></button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple"><i class="mdui-icon material-icons">add</i></button>

Intensive buttons

Intensive buttons are slightly smaller than normal buttons and can be used when the mouse and keyboard are the main input methods. Add a class to the normal button .mdui-btn-dense That's it.

Example

<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple"><i class="mdui-icon material-icons">add</i></button>

Disabled state

Add to the button disabled Property disables a button.

Example

<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled><i class="mdui-icon material-icons">add</i></button>

Block-level element

Add to the button .mdui-btn-block The class can streWidth, and the button becomes a block element. element 100% Width, and the button becomes a block element.

Example

<div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
</div>

Button group

Put multiple buttons in a button group conta, It becomes the button group. Add a class to the button-btn-group 内，即成为按钮组。在按钮上添加类 .mdui-btn-active Indicates that the button is selected.

Example

<div class="mdui-btn-group">
  <button type="button" class="mdui-btn"><i class="mdui-icon material-icons">format_align_left</i></button>
  <button type="button" class="mdui-btn mdui-btn-active"><i class="mdui-icon material-icons">format_align_center</i></button>
  <button type="button" class="mdui-btn"><i class="mdui-icon material-icons">format_align_right</i></button>
  <button type="button" class="mdui-btn"><i class="mdui-icon material-icons">format_align_justify</i></button>
</div>

CSS List of class names

Class name	effect
`.mdui-btn`	Define a button
`.mdui-btn-raised`	Define floating button
`.mdui-btn-icon`	Define icon button
`.mdui-btn-block`	Make the button a block-level element
`.mdui-btn-group`	Button group container
`.mdui-btn-active`	The button in the button group is selected

Button

Call method

Related Reading

style

Flat button

Floating button

Icon button

Intensive buttons

Disabled state

Block-level element

Button group

CSS List of class names