Paper elements是用于实施Google的材料设计指南的有用的UI组件。下表显示了不同类型的paper elements。
Paper Badge
paper-badge是表示状态或通知的圆形文本badge。它位于元素的右上角。通过添加icon属性可以包含一个图标。要获得目录中的paper-badge和图标，应在命令提示符下使用以下两个命令。
bower install --save PolymerElements/paper-badge bower install --save PolymerElements/iron-iconset
例子
下面的示例指定在Polymer.js中使用paper-badge元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<!doctype html>
<html>
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = 'import' href = 'bower_components/paper-badge/paper-badge.html'>
<link rel = 'import' href = 'bower_components/iron-iconset/iron-iconset.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/social-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<dom-module id = 'my-app'>
<template>
<div class = "container">
<span >Messages</span>
<paper-badge id = 'text' label = "4"></paper-badge>
</div>
<div class = "container" >
<span id = 'text'>Thought </span>
<paper-badge id = 'text' icon = "social:mood" label = "happy"></paper-badge>
</div>
<style is = "custom-style">
.container {
display: inline-block;
margin-left: 30px;
margin-right: 30px;
padding-top: 30px;
}
/* Need to position the badge to look like a text superscript */
.container > paper-badge {
--paper-badge-margin-left: 20px;
--paper-badge-margin-bottom: 0px;
}
#text {
padding-top: 55px;
}
</style>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>
</html>输出
要运行该应用程序，请导航到创建的项目目录并运行以下命令。
polymer serve
Paper Button
paper-button是一个简单的按钮，从接触点起会产生波纹效果。要在目录中显示纸张按钮，应在命令提示符下使用以下命令。
bower install --save PolymerElements/paper-button
例子
以下示例指定在Polymer.js中使用paper-button元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<h2>Paper-Button Example</h2>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<dom-module id = 'my-app'>
<template>
<div class = "container">
<paper-button toggles raised class = "green">Active</paper-button>
<paper-button disabled class = "disabled">Disabled</paper-button>
</div>
<div class = "container" ></div>
<style is = "custom-style">
#container {
display: flex;
}
paper-button {
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
paper-button.green:hover {
background-color: var(--paper-green-400);
}
paper-button.green {
background-color: var(--paper-green-500);
color: white;
}
paper-button.green[active] {
background-color: var(--paper-red-500);
}
paper-button.disabled {
color: black;
background-color:#969696;
}
</style>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>输出
要运行该应用程序，请导航到创建的项目目录并运行以下命令：
polymer serve
Paper Card
paper-card是具有唯一相关数据的简单材料设计纸。要在您的目录中获得paper-card，应在命令提示符下使用以下命令。
bower install --save PolymerElements/paper-card
例子
以下示例指定在Polymer.js中使用纸卡元素。创建一个index.html文件，并在其中添加以下代码-
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<h2>Paper-Card Example</h2>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
body {
display: flex;
align-items: center;
justify-content: center;
}
paper-card {
max-width: 500px;
}
.cafe-header { @apply(--paper-font-headline); }
.cafe-light { color: var(--paper-grey-600); }
.cafe-location {
float: right;
font-size: 15px;
vertical-align: middle;
}
.cafe-reserve { color: var(--google-blue-500); }
iron-icon.star {
--iron-icon-width: 16px;
--iron-icon-height: 16px;
color: var(--paper-amber-500);
}
</style>
<paper-card >
<div class = "card-content">
<div class = "cafe-header">TutorialsPoint</div>
<div class = "cafe-rating">
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
<iron-icon class = "star" icon = "star"></iron-icon>
</div>
<p>Free Tutorials</p>
<p class = "cafe-light">Enjoy theory and lab at the same time, right here
online. An online Lab for IT Professionals</p>
</div>
</paper-card>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
<dom-module>输出
要运行该应用程序，请导航到创建的项目目录并运行以下命令。
polymer serve
Paper Checkbox
Paper Checkbox是用于选中或取消选中它的复选框。通常，复选框用于从集中选择多个选项。要在目录中找到纸质复选框，应在命令提示符下使用以下命令。
bower install --save PolymerElements/paper-checkbox
例子
以下示例指定在Polymer.js中使用paper-checkbox元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<h2>Paper-Card Example</h2>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<link rel = "import" href = "bower_components/paper-checkbox/paper-checkbox.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
paper-checkbox {
font-family: 'Roboto', sans-serif;
margin: 24px;
}
paper-checkbox.styled {
align-self: center;
border: 1px solid var(--paper-green-200);
padding: 8px 16px;
--paper-checkbox-checked-color: var(--paper-green-500);
--paper-checkbox-checked-ink-color: var(--paper-green-500);
--paper-checkbox-unchecked-color: var(--paper-green-900);
--paper-checkbox-unchecked-ink-color: var(--paper-green-900);
--paper-checkbox-label-color: var(--paper-green-500);
--paper-checkbox-label-spacing: 0;
--paper-checkbox-margin: 8px 16px 8px 0;
--paper-checkbox-vertical-align: top;
}
</style>
<paper-checkbox class = "styled">
Checkbox With a long label
</paper-checkbox>
<paper-checkbox disabled>Disabled</paper-checkbox>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>输出
要运行该应用程序，请导航到创建的项目目录并运行以下命令。
polymer serve
Paper Drawer Panel
paper-drawer-panel是一个drawer panel，可向内/向外滑动以隐藏/露出主面板。抽屉的正常位置在主面板的左侧。drawer将以狭窄的布局堆叠在主面板的顶部。
要在您的目录中获得Paper-Drawer-Panel，您应该在命令提示符下使用以下命令。
bower install --save PolymerElements/paper-drawer-panel
例子
以下示例指定在Polymer.js中使用paper-drawer-panel元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href='bower_components/polymer/polymer.html'>
<link rel = "import" href="bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<link rel = "import" href = "bower_components/paper-card/paper-card.html">
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/communication-icons.html">
<link rel = "import" href = "bower_components/paper-checkbox/paper-checkbox.html">
<link rel = "import" href = "bower_components/paper-drawer-panel/paper-drawer-panel.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
paper-button {
color: white;
margin: 10px;
background-color: green;
white-space: nowrap;
}
button {
display: block;
line-height: 40px;
background-color: transparent;
border: none;
font-size: 14px;
margin: 20px;
}
#close {
color: white;
margin: 10px;
background-color: red;
white-space: nowrap;
}
</style>
<paper-drawer-panel id = "paperDrawerPanel" force-narrow>
<div drawer>
<button id = "close" tabindex = "0" paper-drawer-toggle raised>Close Drawer</button>
<h3>Welcome to Tutorials point</h3>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>Open Drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>输出
要运行该应用程序，请导航到创建的项目目录并运行以下命令。
polymer serve
Paper Dropdown Menu
paper-dropdown-menu是一个简单的下拉菜单，适用于可选内容。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-dropdown-menu bower install --save PolymerElements/paper-item bower install --save PolymerElements/paper-listbox
例子
以下示例指定在Polymer.js中使用paper-dropdown-menu元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href='bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel = "import" href = "bower_components/paper-item/paper-item.html">
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
paper-dropdown-menu {
width:250px;
}
paper-dropdown-menu {
height: 200px;
display: block;
}
</style>
<h3>Paper-Dropdown-Menu Example </h3>
<paper-dropdown-menu>
<paper-listbox class = "dropdown-content" selected = "1">
<paper-item>Java Tutorial</paper-item>
<paper-item>C Tutorial</paper-item>
<paper-item>PHP Tutorial</paper-item>
<paper-item>C++ Tutorial</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Fab
Paper-fab是一个浮动动作按钮，当用户触摸该按钮时会产生波纹效果。此按钮可以将图像放置在中间。要在目录中获取paper-fab和ironicons，应在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-fab
例子
以下示例指定在Polymer.js中使用paper-ripple元素。创建一个index.html文件，并在其中添加以下代码：
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-fab/paper-fab.html">
<dom-module id = 'my-app'>
<template>
<style is = "custom-style">
paper-fab {
display: inline-block;
margin: 8px;
}
paper-fab[mini] {
--paper-fab-background: #FF5722;
}
paper-fab[label] {
font-size: 20px;
--paper-fab-background: #2196F3;
}
</style>
<h3>Paper-Fab Example </h3>
<paper-fab icon = "alarm-on"></paper-fab>
<paper-fab mini icon = "android"></paper-fab>
<paper-fab mini icon = "home"></paper-fab>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Icon Button
纸形图标按钮是一个动作按钮，它代表诸如设置之类的特定动作。当用户触摸按钮时，它会产生连锁反应。您可以将这些按钮用作链接，也可以为按钮提供一些样式，如以下示例所示。要在目录中获取纸质图标按钮和铁质图标，应在工作状态下在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-icon-button
例子
您的index.html文件应如下所示。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-icon-button/paper-icon-button.html">
<dom-module id = 'my-app'>
<template>
<h3>Paper-Icon-Button Example </h3>
<paper-icon-button icon = "settings" ></paper-icon-button>settings
<br>
<paper-icon-button icon = "warning" style = "color: red;" ></paper-icon-button>warning
<br>
<paper-icon-button icon = "content-cut" ></paper-icon-button>content-cut
<br>
<paper-icon-button icon = "dashboard" ></paper-icon-button>dashboard
<br>
<paper-icon-button icon = "flight-takeoff" ></paper-icon-button>flight-takeoff
<br>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Input
paper-input是结合样式的文本字段。要在工作状态下在目录中进行paper-input，应在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-input
例子
您的index.html文件应如下所示。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href="bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-input/paper-input.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-input {
max-width: 300px;
}
</style>
<h3>Paper-Input Example </h3>
<paper-input label = "User Name">
<iron-icon icon = "account-circle" prefix></iron-icon>
</paper-input>
<paper-input label = "Password">
<iron-icon icon = "lock-outline" prefix></iron-icon>
</paper-input>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Listbox
Paper-listbox是结合样式的易于使用的listbox控件。所选项目的文字为粗体。该元素具有多个选择选项和按键绑定，可在列表框中进行导航。要使目录中的paper-listbox处于工作状态，应在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-listbox
例子
您的index.html文件应如下所示。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-item/paper-item.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-listbox {
width: 200px;
border: 1px dotted #ccc;
}
paper-item {
cursor: pointer;
}
</style>
<h3>Paper-Listbox Example </h3>
<paper-listbox multi>
<paper-item>AngularJS Tutorial</paper-item>
<paper-item disabled>C++ Tutorial</paper-item>
<paper-item>C Tutorial</paper-item>
<paper-item>Android Tutorial</paper-item>
</paper-listbox>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Material
Paper-material是一种具有抬高纸片效果的容器。要在工作状态下获取目录中的纸张材料，应在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-material
例子
您的index.html文件应如下所示。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-material/paper-material.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-material {
display: inline-block;
background: white;
box-sizing: border-box;
margin: 7px;
padding: 14px;
border-radius: 3px;
}
</style>
<h3>Paper-Material Example</h3>
<paper-material elevation = "5">"Tutorialspoint"</paper-material>
<paper-material elevation = "0">is</paper-material>
<paper-material elevation = "5">Simply Easy Learning Online Tutorials</paper-material>
</template>
<script>
Polymer ({
is: 'my-app',
ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Menu
Paper-menu是具有材料设计样式的简单易用菜单。所选项目的文字为粗体。该元素具有多个选择选项和按键绑定，可在列表框中进行导航。要使目录处于工作状态，请在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-menu
例子
您的index.html文件应如下所示。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-listbox/paper-listbox.html">
<link rel = "import" href = "bower_components/paper-menu/paper-menu.html">
<dom-module id = 'my-app'>
<template>
<style>
.horizontal-section {
padding: 15px;
}
#paperitem {
cursor: pointer;
display: inline;
background: #ccc;
}
</style>
<h3>Paper-Menu Example </h3>
<div class = "horizontal-section">
<paper-menu>
<paper-item id = "paperitem">Home</paper-item>
<paper-item id = "paperitem">About-Us</paper-item>
<paper-item id = "paperitem">Contacts</paper-item>
<paper-item id = "paperitem">Log-In</paper-item>
</paper-menu>
</div>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Progress
进度条用于确定已完成任务的百分比。它向用户简要说明了需要多少时间才能完成任务。次要进度也可用于显示中间进度。要使目录在工作状态下处于纸张前进状态，应在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-progress
例子
您的index.html文件应如下所示：
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示：
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-progress/paper-progress.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-progress {
display: block;
width: 30%;
margin: 20px 0;
}
</style>
<h3>Paper-Progress Example</h3>
<p>70% completed</p>
<paper-progress value = "70"></paper-progress>
<p>45% completed</p>
<paper-progress value = "45"></paper-progress>
<p>20% completed</p>
<paper-progress value = "20"></paper-progress>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Radio Button
单选按钮是用于选中或取消选中的输入按钮。当单选按钮位于同一单选组中时，任何时候都只能检查该组中的一个单选按钮。要使目录中的单选按钮处于工作状态，应在命令提示符下运行以下命令。
bower install --save PolymerElements/paper-radio-button
例子
您的index.html文件应如下所示。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>您的my-app.html文件应如下所示。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-radio-button/paper-radio-button.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-progress {
display: block;
width: 30%;
margin: 20px 0;
}
</style>
<h3>Paper-Radio-Button Example</h3>
<paper-radio-button>TutorialsPoint</paper-radio-button>
<paper-radio-button disabled>TutorialsPoint Disabled</paper-radio-button>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Ripple
Paper-ripple是一种视觉上的波纹效果，当您单击按钮，图标或您选择的具有波纹效果的任何元素时都可以看到。该效果看起来像同心圆，从接触点开始运动。
您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-ripple
例子
以下示例指定在Polymer.js中使用paper-ripple元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-ripple/paper-ripple.html">
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<dom-module id = 'my-app'>
<template>
<style>
.button {
padding-left: -4px;
background-color: #0f9d58;
width: 150px;
height: 42px;
}
</style>
<h3>Paper-Ripple Example </h3>
<div class = "button">
<paper-button toggles raised>TutorialsPoint</paper-button>
<paper-ripple></paper-ripple>
</div>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Slider
paper-slider使用户可以通过移动滑杆点从给定范围中选择一个值，并表示特定应用中音量或色彩饱和度的变化。
您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-slider
例子
以下示例指定在Polymer.js中使用paper-slider元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-slider/paper-slider.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-slider.green {
--paper-slider-knob-color: var(--paper-green-500);
--paper-slider-active-color: var(--paper-green-500);
}
</style>
<h3>Paper-Slider Example</h3>
<div>Volume</div>
<paper-slider class = "green" max = "50" editable></paper-slider>
<div>Brightness</div>
<paper-slider class = "green" max = "50" editable></paper-slider>
<div>Color (Disabled)</div>
<paper-slider class = "green" Disabled value = "11" max = "50" editable></paper-slider>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Spinner
Paper-spinner是一个旋转器元素，它指示特定文件或具有多种颜色的图像的加载。
您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-spinner
例子
以下示例指定在Polymer.js中使用paper-spinner元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-spinner/paper-spinner.html">
<link rel = "import" href = "bower_components/paper-spinner/paper-spinner-lite.html">
<dom-module id = 'my-app'>
<template>
<h3>Paper-Spinner Example</h3>
<p>Tutorialspoint loading...
<paper-spinner-lite active class = "orange"></paper-spinner-lite></p>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Tabs
Paper-tabs有助于在不同的视图或页面之间导航。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-tabs
例子
以下示例指定在Polymer.js中使用paper-tabs元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-tabs/paper-tabs.html">
<link rel = "import" href = "bower_components/iron-pages/iron-pages.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-tabs {
background-color: black;
width: 50%;
margin-bottom: 1px;
color: #fff;
}
</style>
<h3>Paper-Tabs Example</h3>
<paper-tabs selected = "0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>Paper Toast
Paper-toast提供警报通知，并且在特定时间仅允许一个通知。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-toast
例子
以下示例指定在Polymer.js中使用paper-toast元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-toast/paper-toast.html">
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<dom-module id = 'my-app'>
<template>
<style>
#container {
padding: 100px;
border: 1px solid gray;
width: 30%;
}
</style>
<h3>Paper-Toast Example</h3>
<div id = "container">
<paper-button raised onclick = "toast.open()">Click Here</paper-button>
</div>
<paper-toast id = "toast" class = "fit-bottom" text = "Welcome to Tutorialspoint.">
</paper-toast>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
toast.fitInto = container;
});
}
});
</script>
</dom-module>Paper Toggle Button
Paper-toggle是一个ON / OFF开关，用户可以通过单击或拖动该开关来切换状态。您可以通过运行以下命令在应用程序中使用此元素，以将其安装在项目目录中。
bower install --save PolymerElements/paper-toggle-button
例子
以下示例指定在Polymer.js中使用Paper-toggle元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>现在，打开my-app.html文件，并在其中包含以下代码。
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-tabs/paper-tabs.html">
<link rel = "import" href = "bower_components/iron-pages/iron-pages.html">
<dom-module id = 'my-app'>
<template>
<style>
paper-tabs {
background-color: black;
width: 50%;
margin-bottom: 1px;
color: #fff;
}
</style>
<h3>Paper-Tabs Example</h3>
<paper-tabs selected = "0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>
</template>
<script>
Polymer ({
is: 'my-app', ready: function() {
this.async(function() {
});
}
});
</script>
</dom-module>作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2313.html
