@cwmr/paper-fab-speed-dial
Version:
A Material Design - Floating Action Button with Speed Dial (Polymer)
33 lines (29 loc) • 1.34 kB
HTML
<html>
<head>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../node_modules/@polymer/paper-styles/demo-pages.js"></script>
<script type="module" src="../node_modules/@polymer/paper-checkbox/paper-checkbox.js"></script>
<script type="module" src="../node_modules/@polymer/iron-demo-helpers/demo-snippet.js"></script>
<script type="module" src="../node_modules/@polymer/iron-icons/iron-icons.js"></script>
<script type="module" src="../paper-fab-speed-dial.js"></script>
<script type="module" src="../paper-fab-speed-dial-action.js"></script>
</head>
<body>
<dom-bind>
<template>
<paper-fab-speed-dial disabled="[[disabled]]" with-backdrop="[[withBackdrop]]">
<paper-fab-speed-dial-action icon="icons:content-copy">Copy</paper-fab-speed-dial-action>
<paper-fab-speed-dial-action icon="icons:print">Print</paper-fab-speed-dial-action>
</paper-fab-speed-dial>
<div class="horizontal-section">
<paper-checkbox checked="{{disabled}}">Disabled</paper-checkbox><br>
<paper-checkbox checked="{{withBackdrop}}">With backdrop</paper-checkbox>
</div>
<script>
const scope = document.querySelector('dom-bind');
scope.withBackdrop = true;
</script>
</template>
</dom-bind>
</body>
</html>