https://github.com/polydile/dile-user-config-box
Polymer Element to display an user avatar image with a dropdown overlay
https://github.com/polydile/dile-user-config-box
Last synced: over 1 year ago
JSON representation
Polymer Element to display an user avatar image with a dropdown overlay
- Host: GitHub
- URL: https://github.com/polydile/dile-user-config-box
- Owner: Polydile
- License: mit
- Created: 2018-02-08T16:29:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-05T15:19:55.000Z (over 8 years ago)
- Last Synced: 2025-01-25T18:43:27.252Z (over 1 year ago)
- Language: HTML
- Size: 16.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
A Polymer web component to display an image with an asociated overlay. The image colud be an user avatar or an icon (by default). When the user clicks on the avatar, the overlay opens with an animation.
You can use any content in the overlay via an slot named "overlay-content".
```html
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi natus temporibus delectus saepe reprehenderit labore ab nemo est vitae. Ipsum deserunt cupiditate animi sit nihil soluta est sapiente tempora facere.
```
### Styling
The following custom properties and mixins are also available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--dile-user-config-box-zindex` | A property that controls the overlay z-index | 999999
`--dile-user-config-box-overlay` | A mixin that is applied to the overlay | `{}`
`--dile-user-config-box-icon-color` | A property that controls de icon color | #999
`--dile-user-config-icon` | A mixin that is applied to the icon | `{}`