https://github.com/link2twenty/l2t-fab-footer

Polymer Element to display FAB in a footer toolbar
https://github.com/link2twenty/l2t-fab-footer

Last synced: 8 days ago
JSON representation

Polymer Element to display FAB in a footer toolbar

• Host: GitHub
• URL: https://github.com/link2twenty/l2t-fab-footer
• Owner: Link2Twenty
• License: mit
• Created: 2018-11-22T15:16:31.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-26T01:33:59.000Z (over 2 years ago)
• Last Synced: 2024-11-10T22:41:34.293Z (10 days ago)
• Size: 98.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on NPM](https://img.shields.io/npm/v/l2t-fab-footer.svg)](https://www.npmjs.com/package/l2t-fab-footer)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/l2t-fab-footer)

![NPM Stats](https://nodei.co/npm/l2t-fab-footer.png)

## <l2t-fab-footer>

`l2t-fab-footer` is a footer toolbar with a cut out for a FAB in the centre.

```html

```

See: [Documentation](https://www.webcomponents.org/element/l2t-fab-footer), [Demo](https://www.webcomponents.org/element/l2t-fab-footer/demo/demo/index.html).

## Usage

### Installation

```

npm install --save link2twenty/l2t-fab-footer

```

### In an html file

```html

  

    

      import './l2t-fab-footer/l2t-fab-footer.js';

    

  

  

    

  

```

### In a Polymer 3 element

```js

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`

    

    `;

  }

}

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

```sh

git clone https://github.com/link2twenty/l2t-fab-footer

cd l2t-fab-footer

npm install

npm install -g polymer-cli

```

### Running the demo locally

```sh

polymer serve --npm

open http://localhost:/demo/

```