https://github.com/euberdeveloper/ukraine-banner
Some banner web components for sites that want to condemn the war
https://github.com/euberdeveloper/ukraine-banner
svelte typescript ukraine vite webcomponent
Last synced: 3 months ago
JSON representation
Some banner web components for sites that want to condemn the war
- Host: GitHub
- URL: https://github.com/euberdeveloper/ukraine-banner
- Owner: euberdeveloper
- License: mit
- Created: 2022-03-15T00:15:20.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-30T02:20:28.000Z (about 3 years ago)
- Last Synced: 2025-02-04T15:50:02.848Z (5 months ago)
- Topics: svelte, typescript, ukraine, vite, webcomponent
- Language: Svelte
- Homepage:
- Size: 134 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ukraine-banner
This is a **web component** that provides a **simple banner against the war in Ukraine**.
## Usage
On the [releases](https://github.com/euberdeveloper/ukraine-banner/releases) you can download the file `ukraine-banner.tar.gz`. Inside, there will be a README.md with the js files implementing the webcomponent. The **umd** version is just **6KB**, so very light.
The **tag name** is `` and it accepts the following options:
| **Property** | **Required** | **Default** | **Description** |
| ------------ | ------------ | -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| vertical | NO | 'bottom' | It says if the ribbon will be on the top or on the bottom. (Possible values: 'top' and 'bottom'). |
| horizontal | NO | 'right' | It says if the ribbon will be on the left or on the right. (Possible values: 'left' and 'right'). |
| href | NO | undefined | It says the url where the user will be redirected after clicking the ribbon. If not specified, the ribbon is not clickable. |
| title | NO | undefined | It says the title that will be displayed when the mouse is over the ribbon. |
| height | NO | '3vw' | It says the height of the ribbon. |
| boxshadow | NO | '0 0 8px rgb(0 0 0 / 50%)' | It says the box shadow that the ribbon will have. |
| zindex | NO | '999999' | It says the z-index of the ribbon |
## Example
```html
Ukraine Banner Example
```
## Result
The result will be something like this (you can see the ribbon added in the bottom right corner of the page):
## How was it made
This web component was made with **Typescript**, **Svelte** and **Vite**.