https://github.com/cradlecms/component-popup
Popup web component
https://github.com/cradlecms/component-popup
web-component web-components
Last synced: 4 months ago
JSON representation
Popup web component
- Host: GitHub
- URL: https://github.com/cradlecms/component-popup
- Owner: CradleCMS
- Created: 2024-08-26T07:01:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T08:48:23.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T17:45:32.108Z (over 1 year ago)
- Topics: web-component, web-components
- Language: Liquid
- Homepage: https://cradlecms.com
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Popup web component
Popup web component for Cradle CMS.
1. Add the file in the `components` folder.
2. Include in layout file `theme.liquid` or in a specific template such as `page.liquid` with `{% component 'popup' %}`.
3. Add a button that opens the popup `Contact`.
4. Add the `` element with attributes and content.
## The attributes and content
### Connect with button
Set target for the button with replacing ``.
### Attributes
* Width - popupwidth : Add a number in px , if removed the default is 400px.
* Background - popupbg : Sets the background color for the whole popup but in practise only for the header, if removed dafault is white.
* Content background : Sets the background color for the content/main part.
### Content
There is two content slots: header and main, fill with the desired content. With Cradle CMS it is possible to build a form and include the html with `{% form '' %}{% endform %}`
```
```
## Considerations
This component is not done with the html element, which would be perfect, as the compability is not there yet for all webbrowsers used in the wild.