menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Scrap of paper

A piece of paper can contain concise information such as a picture, a short string, etc.

Call method

Paper components use pure CSS 编写，只需编写 HTML The code will take effect.

Related Reading

Material Design Design GuiScrap of paperlines: Components - 纸片

style

Plain Text

codeplay_arrow
Example
Example Chip 
<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

With avatar

codeplay_arrow
Example
Example Chip 
<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Icon with text

codeplay_arrow
Example
A Example Chip 
<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

With icon

codeplay_arrow
Example
face Example Chip 
<div class="mdui-chip">
  <span class="mdui-chip-icon"><i class="mdui-icon material-icons">face</i></span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

With close button

codeplay_arrow
Example
Example Chip cancel 
<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete"><i class="mdui-icon material-icons">cancel</i></span>
</div>

Icon color

codeplay_arrow
Example
face Example Chip 
<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue"><i class="mdui-icon material-icons">face</i></span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

CSS List of class names

Class name effect
.mdui-chip Define a piece of paper component.
.mdui-chip-title Define the text of the sheet of paper.
.mdui-chip-icon Define the avatar or icon of the piece of paper.
.mdui-chip-delete Define the delete button for the sheet of paper.
Set document theme

Theme color

Main color

Accent color