@rhtml/modifiers
v0.0.133
Published
Reactive HyperText Markup Language
Downloads
55
Readme
@rhtml/modifiers
Installation
npm i @rhtml/modifiers
Every modifier is actually custom attribute
and modifiers is using package @rhtml/custom-attributes
Usage
Another real example is to add FlexLayout modifier from @rhtml/modifiers
which will apply useful attributes
to be used inside of the html inspired from Angular flex-layout https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
import { Component, css, html, LitElement } from '@rxdi/lit-html';
import { FlexLayout } from '@rhtml/modifiers';
/**
* @customElement home-component
*/
@Component({
selector: 'home-component',
style: css`
.container {
height: 200px;
}
.block {
background: red;
flex: 1;
}
`,
modifiers: [...FlexLayout],
template(this: HomeComponent) {
return html`
<div class="container" fxLayout="row" fxLayoutGap="10px">
<div>
<div class="block" fxLayoutAlign="center center" fxFlexFill>A</div>
</div>
<div>
<div class="block" fxLayoutAlign="center center" fxFlexFill>B</div>
</div>
<div>
<div class="block" fxLayoutAlign="center center" fxFlexFill>C</div>
</div>
<div>
<div class="block" fxLayoutAlign="center center" fxFlexFill>D</div>
</div>
</div>
`;
}
})
export class HomeComponent extends LitElement {}
Angular Layout
ngIf
attribute available at the moment to test the logic which represents
import { Component, html, LitElement, state } from '@rxdi/lit-html';
import { AngularLayout } from '@rhtml/modifiers';
/**
* @customElement home-component
*/
@Component({
selector: 'home-component',
modifiers: [...AngularLayout],
template(this: HomeComponent) {
return html`
<div ngIf=${this.show}>
My Content
</div>
<button @click=${() => this.toggle()}>Toggle</button>
`;
}
})
export class HomeComponent extends LitElement {
@state()
show: boolean;
toggle() {
this.show = !this.show;
}
}
Animation modifier
List of available animations can be found Here
import { Component, html, LitElement } from '@rxdi/lit-html';
import { Animation } from '@rhtml/modifiers';
/**
* @customElement home-component
*/
@Component({
selector: 'home-component',
modifiers: [Animation],
template(this: HomeComponent) {
return html`
<h2 animated="slideInLeft" delay="1s">
Your Animated Element
</h2>
`;
}
})
export class HomeComponent extends LitElement {}