0.0.133 • Published 1 year ago

@rhtml/modifiers v0.0.133

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

@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 {}
0.0.133

1 year ago

0.0.131

1 year ago

0.0.132

1 year ago

0.0.130

1 year ago

0.0.129

1 year ago

0.0.128

1 year ago

0.0.127

1 year ago

0.0.126

1 year ago

0.0.125

2 years ago

0.0.120

2 years ago

0.0.124

2 years ago

0.0.123

2 years ago

0.0.122

2 years ago

0.0.121

2 years ago

0.0.119

2 years ago

0.0.118

2 years ago

0.0.117

3 years ago

0.0.116

3 years ago

0.0.115

3 years ago

0.0.114

3 years ago

0.0.113

3 years ago

0.0.112

3 years ago

0.0.111

3 years ago

0.0.110

3 years ago

0.0.109

3 years ago

0.0.108

3 years ago

0.0.107

3 years ago

0.0.106

3 years ago

0.0.105

3 years ago

0.0.104

3 years ago

0.0.103

3 years ago

0.0.102

3 years ago

0.0.101

3 years ago

0.0.100

3 years ago

0.0.99

3 years ago

0.0.98

3 years ago

0.0.97

3 years ago

0.0.96

3 years ago

0.0.95

3 years ago

0.0.94

3 years ago

0.0.93

3 years ago

0.0.92

3 years ago

0.0.91

3 years ago

0.0.90

3 years ago

0.0.89

3 years ago

0.0.88

3 years ago

0.0.87

3 years ago