https://github.com/lemaiwo/ui5-space-webcomponent-package
package with ui5 space webcomponent
https://github.com/lemaiwo/ui5-space-webcomponent-package
ui5-webcomponents webcomponents
Last synced: about 1 month ago
JSON representation
package with ui5 space webcomponent
- Host: GitHub
- URL: https://github.com/lemaiwo/ui5-space-webcomponent-package
- Owner: lemaiwo
- License: apache-2.0
- Created: 2023-03-31T22:26:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-01T14:28:31.000Z (almost 3 years ago)
- Last Synced: 2025-07-01T00:07:22.487Z (11 months ago)
- Topics: ui5-webcomponents, webcomponents
- Language: TypeScript
- Homepage:
- Size: 754 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI5con2023
## UI5WebComponent
### Project setup
- Generate UI5 WebComponent Package
```
npm init @ui5/webcomponents-package@latest
```
- Provide the name for the package, eg.: spacepackage
- Select TypeScript
- Provide the name for the first UI5 WebComponent, eg.: SpaceComponent (space-component)
- Open Package in Code:
```
code spacepackage
```
- Open bash terminal
- Install dependencies
```
npm i
```
- Run the generated Package with UI5WebComponent
```
npm start
```
### SpaceComponent
- Provide the template
```
{{intro}}
```
- Change the alias, this needs to be the same as the library that consumes this UI5WebComponent
```
* @alias demo.components.SpaceComponent
//becomes
* @alias be.wl.SpaceLibrary.SpaceComponent
```
- Include properties & slots
```
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
```
- Define properties
```
/**
* Defines the intro of the space component.
*
* @type {string}
* @name demo.components.SpaceComponent.prototype.intro
* @defaultvalue ""
* @public
*/
@property()
intro!: string;
/**
* Defines the logo of the space component.
*
* @type {string}
* @name demo.components.SpaceComponent.prototype.logo
* @defaultvalue ""
* @public
*/
@property()
logo!: string;
```
- Define slot
```
/**
* Defines the articles of the component.
*
* @type {demo.components.SpaceItemComponent[]}
* @name demo.components.SpaceComponent.prototype.default
* @slot items
* @public
*/
@slot({ type: HTMLElement, "default": true })
items!: Array;
```
- Implement generation of stars using onAfterRendering function
```
onAfterRendering() {
const numStars = 100;
const mainDiv = this.shadowRoot!.querySelector(".star-wars-intro") as HTMLElement;
// For every star we want to display
for (let i = 0; i < numStars; i++) {
const { top, left } = this.getRandomPosition(mainDiv);
mainDiv.append(this.getRandomStar(top, left));
}
}
getRandomStar(top: string, left: string) {
const star = document.createElement("div");
star.className = "star";
star.style.top = top;
star.style.left = left;
return star;
}
getRandomPosition(element: HTMLElement) {
return {
top: `${this.getRandomNumber(element.offsetHeight)}px`,
left: `${this.getRandomNumber(element.offsetWidth)}px`,
};
}
getRandomNumber(value: number) {
return Math.floor(Math.random() * value);
}
```
- Apply css
Show css
```
:host {
border: 2px solid var(--my-component-border-color);
background-color: var(--sapBackgroundColor);
color: var(--sapTextColor);
display: block;
/* width: 24rem; */
/* height: 3rem; */
text-align: center;
vertical-align: middle;
line-height: 3rem;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background-color: white;
}
.star-wars-intro {
/* background: url("img/stars-bg.jpg") center center; */
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #EBD71C;
background-color: #000;
overflow: hidden;
position: relative;
}
.star-wars-intro p.intro-text {
position: relative;
max-width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
text-align: center;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
-o-animation: intro 2s ease-out;
animation: intro 2s ease-out;
}
.star-wars-intro .main-content {
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
width: 98%;
height: 50em;
bottom: 0;
font-size: 80px;
font-weight: bold;
text-align: justify;
overflow: hidden;
transform-origin: 50% 100%;
transform: perspective(350px) rotateX(25deg);
}
.star-wars-intro .main-content:after {
position: absolute;
content: ' ';
top: 0;
bottom: 60%;
background-image: linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%);
pointer-events: none;
}
/* Main Image Styles */
.star-wars-intro .main-logo {
position: absolute;
width: 2.6em;
left: 50%;
top: 20vh;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #EBD71C, 2px -2px 0 #EBD71C, -2px 2px 0 #EBD71C, 2px 2px 0 #EBD71C;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 2.5s;
-moz-animation: logo 5s ease-out 2.5s;
-ms-animation: logo 5s ease-out 2.5s;
-o-animation: logo 5s ease-out 2.5s;
animation: logo 5s ease-out 2.5s;
}
.star-wars-intro .main-logo>img {
max-width: 100%;
}
@-webkit-keyframes intro {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes intro {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes intro {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes intro {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes intro {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(0.1);
opacity: 0;
}
}
@-moz-keyframes logo {
0% {
-moz-transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
-moz-transform: scale(0.1);
opacity: 0;
}
}
@-ms-keyframes logo {
0% {
-ms-transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
-ms-transform: scale(0.1);
opacity: 0;
}
}
@-o-keyframes logo {
0% {
-o-transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
-o-transform: scale(0.1);
opacity: 0;
}
}
@keyframes logo {
0% {
transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: scale(0.1);
opacity: 0;
}
}
@keyframes scroll {
0% {
top: 100%;
}
100% {
top: -170%;
}
}
/* @media screen and (max-width: 720px) { */
.star-wars-intro .main-content {
font-size: 35px;
}
.star-wars-intro .title-content {
position: absolute;
top: 100%;
animation: scroll 100s linear 4s forwards;
}
/* } */
```
### Space Item Component
- Create a new component for the items: SpaceItemComponent
```
npm run create-ui5-element
```
- Include it in the bundle.esm.js
```
import "./dist/SpaceItemComponent.js";
```
- Provide the template
```
{{title}}
{{description}}
```
- Provide the class
```
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
// Template
import SpaceItemComponentTemplate from "./generated/templates/SpaceItemComponentTemplate.lit.js";
// Styles
import SpaceItemComponentCss from "./generated/themes/SpaceItemComponent.css.js";
/**
* @class
*
*
Overview
*
*
* Usage
*
* For the ui5-space-item-component
* ES6 Module Import
*
* import SpacePackage/dist/SpaceItemComponent.js";
*
* @constructor
* @alias demo.components.SpaceItemComponent
* @extends sap.ui.webc.base.UI5Element
* @tagname space-item-component
* @public
*/
@customElement({
tag: "space-item-component",
renderer: litRender,
styles: SpaceItemComponentCss,
template: SpaceItemComponentTemplate,
})
class SpaceItemComponent extends UI5Element {
/**
* Defines the title of the space item component.
*
* @type {string}
* @name demo.components.SpaceItemComponent.prototype.title
* @defaultvalue ""
* @public
*/
@property()
title!: string;
/**
* Defines the description of the space item component.
*
* @type {string}
* @name demo.components.SpaceItemComponent.prototype.description
* @defaultvalue ""
* @public
*/
@property()
description!: string;
}
SpaceItemComponent.define();
export default SpaceItemComponent;
```
- Provide css
```
.space-article>h2 {
text-align: center;
}
```
- Resolve dependency in SpaceComponent for SpaceItemComponent
```
import SpaceItemComponent from "./SpaceItemComponent.js";
```
### Test page
- Provide test page
```
```
- Copy logo image
- Start test page
```
npm start
```