1.0.3 • Published 5 years ago
l2t-fab-footer v1.0.3
]
<l2t-fab-footer>
l2t-fab-footer is a footer toolbar with a cut out for a FAB in the centre.
<l2t-fab-footer icon="create"></l2t-fab-footer>
<l2t-fab-footer disabled icon="add"></l2t-fab-footer>
<l2t-fab-footer mini icon="build"></l2t-fab-footer>See: Documentation, Demo.
Usage
Installation
npm install --save link2twenty/l2t-fab-footerIn an html file
<html>
<head>
<script type="module">
import './l2t-fab-footer/l2t-fab-footer.js';
</script>
</head>
<body>
<l2t-fab-footer icon="favorite"></l2t-fab-footer>
</body>
</html>In a Polymer 3 element
import {PolymerElement, html} from '@polymer/polymer';
import './l2t-fab-footer/l2t-fab-footer.js';
import '@polymer/iron-icons/iron-icons.html';
class SampleElement extends PolymerElement {
static get template() {
return html`
<l2t-fab-footer icon="favorite"></l2t-fab-footer>
`;
}
}
customElements.define('sample-element', SampleElement);Styling
The following custom properties are available for styling:
| Custom property | Description | Default |
|---|---|---|
| --fab-footer-height | The height of the footer element | 42px |
| --fab-footer-background | The color of the footer element's background | --primary-color |
| --fab-footer-color | The color of the footer element's text/icons | --dark-theme-text-color |
Contributing
If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
Installation
git clone https://github.com/link2twenty/l2t-fab-footer
cd l2t-fab-footer
npm install
npm install -g polymer-cliRunning the demo locally
polymer serve --npm
open http://localhost:<port>/demo/