Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kcmr/demo-iconset
A demo helper component to showcase a Polymer iconset.
https://github.com/kcmr/demo-iconset
demo icons iconset polymer
Last synced: 19 days ago
JSON representation
A demo helper component to showcase a Polymer iconset.
- Host: GitHub
- URL: https://github.com/kcmr/demo-iconset
- Owner: kcmr
- License: mit
- Created: 2017-07-08T17:56:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-10T10:59:56.000Z (about 7 years ago)
- Last Synced: 2024-10-15T09:02:50.219Z (about 1 month ago)
- Topics: demo, icons, iconset, polymer
- Language: HTML
- Homepage: https://kcmr.github.io/demo-iconset/
- Size: 3.56 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# <demo-iconset>
[](https://travis-ci.org/kcmr/demo-iconset)
[](https://www.webcomponents.org/element/kcmr/demo-iconset/)
> A demo helper component to showcase a Polymer iconset.
**Demo:** [https://kcmr.github.io/demo-iconset/](https://kcmr.github.io/demo-iconset/)
[](https://kcmr.github.io/demo-iconset/)
This component displays the icons of a Polymer iconset with an input to filter the results and an optional text with the total of icons.
## Installation and usage
Install the component using Bower:
```
bower i -S demo-iconset
```
Import Web Components polyfill:
```html
```
Import the component and the Polymer Iconset to show:
```html
```
Use it!
```html
```
## Compatibility
The component is an Hybrid Polymer element **compatible with Polymer 1.x and 2.x** elements.
It will be migrated to a class-based element in the future.
## Properties
| Property | Type | Description | Default value |
| :--------------- | :------ | :------------------------------ | :------------ |
| iconset | String | Name of the iconset to be shown | |
| iconSize | Number | Size for the icons | 32 |
| showTotal | Boolean | Show the total of icons | false |
| icons (readOnly) | Array | List of icons | |
## Styling
The class "fixed-search" keeps the search input fixed at the top.
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
| :------------------------------------- | :---------------------------------------------------------------------------- | :------------ |
| --demo-iconset | Empty mixin applied to :host | {} |
| --demo-iconset-primary-color | Primary text color | #000 |
| --demo-iconset-secondary-color | Secondary color used for :focus, :hover and selections | rebeccapurple |
| --demo-iconset-icon-meta | Empty mixin applied to the wrapper of the search input and the total of icons | {} |
| --demo-iconset-icons | Empty mixin applied to the icon list wrapper | {} |
| --demo-iconset-item | Empty mixin applied to each icon list item with the label, icon and input | {} |
| --demo-iconset-item-hover | Empty mixin applied to each icon list item for the :hover state | {} |
| --demo-iconset-item-at-730 | Empty mixin applied to each icon list item at @media (min-width: 730px) | {} |
| --demo-iconset-item-at-1600 | Empty mixin applied to each icon list item at @media (min-width: 1600px) | {} |
| --demo-iconset-item-icon | Empty mixin applied to each icon in the list | {} |
| --demo-iconset-item-input | Empty mixin applied to each input in the list | {} |
| --demo-iconset-item-input-selection | Empty mixin applied to each input in the list for text selection | {} |
| --demo-iconset-item-input-focus | Empty mixin applied to each input in the list for the :focus state | {} |
| --demo-iconset-fixed-search-background | background-color for the search area in fixed mode (:host(.fixed-search)) | #fff |