@rhtml/modifiers

@rhtml/modifiers

Installation

npm i @rhtml/modifiers

Every modifier is actually custom attribute and modifiers is using package @rhtml/custom-attributes

FlexLayout Modifiers

Inspired by Angular Flex Layout, FlexLayout provides declarative responsive layout directives for web components. It uses CSS flexbox under the hood and supports media query breakpoints for adaptive layouts.

Available Directives

Directive	Description
fxLayout	Sets flexbox layout direction (row/column)
fxLayoutGap	Adds spacing between flex children
fxLayoutAlign	Sets alignment of flex children
fxFlex	Controls flex sizing of elements
fxFlexFill	Makes element fill available space
fxFlexAlign	Aligns a single element (align-self)
fxFlexOffset	Adds left margin offset
fxFlexOrder	Changes element order

Breakpoints

FlexLayout supports responsive breakpoints matching Angular Flex Layout:

Breakpoint	Media Query	Description
xs	(max-width: 599px)	Extra small screens
sm	(600px - 959px)	Small screens
md	(960px - 1279px)	Medium screens
lg	(1280px - 1919px)	Large screens
xl	(1920px+)	Extra large screens
lt-sm	(max-width: 599px)	Less than small
lt-md	(max-width: 959px)	Less than medium
lt-lg	(max-width: 1279px)	Less than large
gt-xs	(min-width: 600px)	Greater than extra small
gt-sm	(min-width: 960px)	Greater than small
gt-md	(min-width: 1280px)	Greater than medium
gt-lg	(min-width: 1920px)	Greater than large

Usage: fxLayout.lt-md="column" applies column layout on screens smaller than medium.

Usage

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

fxLayout

Sets display: flex and flex-direction on the element.

<!-- Row layout (default) -->
<div fxLayout="row">...</div>

<!-- Column layout -->
<div fxLayout="column">...</div>

<!-- Row with wrap -->
<div fxLayout="row wrap">...</div>

<!-- Responsive: row on desktop, column on mobile -->
<div fxLayout="row" fxLayout.lt-md="column">...</div>

Values: row, column, row wrap, column wrap, row inline, column inline

fxLayoutGap

Adds spacing between flex children. Applies margin to children (not on the container itself).

<!-- 10px gap between children -->
<div fxLayout="row" fxLayoutGap="10px">...</div>

<!-- Different gap on mobile -->
<div fxLayout="row" fxLayoutGap="0px" fxLayoutGap.lt-md="15px">...</div>

Note: In row layout, margin applies to the right side of each child except the last. In column layout, margin applies to the bottom of each child except the last.

fxLayoutAlign

Controls alignment of flex children along main and cross axes.

Format: fxLayoutAlign="<main-axis> <cross-axis>"

Value	CSS Property
start	justify-content: flex-start
center	justify-content: center
end	justify-content: flex-end
space-between	justify-content: space-between
space-around	justify-content: space-around
space-evenly	justify-content: space-evenly
stretch	align-items: stretch

<!-- Space items horizontally, center vertically -->
<div fxLayout="row" fxLayoutAlign="space-between center">...</div>

<!-- Start horizontally, stretch vertically -->
<div fxLayout="row" fxLayoutAlign="start stretch">...</div>

<!-- Center both axes -->
<div fxLayoutAlign="center center">...</div>

Note: First value is main-axis (justify-content), second value is cross-axis (align-items). If only one value is provided, it applies to both axes.

fxFlex

Controls the flex property of an element. Supports various value formats:

<!-- Fill remaining space (default flex: 1 1 0.000000001px) -->
<div fxFlex>...</div>

<!-- Explicit empty (same as above) -->
<div fxFlex="">...</div>

<!-- 20% width, no grow -->
<div fxFlex="0 1 20%">...</div>

<!-- 100% width -->
<div fxFlex="100%">...</div>

<!-- Responsive: 100% on mobile, 50% on tablet -->
<div fxFlex="100%" fxFlex.gt-sm="50%">...</div>

<!-- Auto (grow and shrink) -->
<div fxFlex="auto">...</div>

<!-- None (flex: none) -->
<div fxFlex="none">...</div>

Value Formats:

• Empty/no value → flex: 1 1 0.000000001px (fills space)
• Percentage → flex: 1 1 <percentage> (e.g., 25% → flex: 1 1 25%)
• auto → flex: 1 1 auto
• none → flex: none
• Three parts → flex: <grow> <shrink> <basis>

fxFlexFill

Makes the element fill available space in a flex container.

<div fxFlexFill>...</div>

CSS Applied:

margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;

fxFlexAlign

Aligns a single element within a flex container (uses align-self).

<div fxFlexAlign="center">...</div>

Values: start, center, end, stretch, baseline

fxFlexOffset

Adds left margin offset to an element.

<div fxFlexOffset="20px">...</div>

fxFlexOrder

Changes the order of an element in a flex container.

<div fxFlexOrder="1">...</div>

Complete Example with Responsive Layout

import { Component, html, LitElement } from '@rxdi/lit-html';
import { FlexLayout } from '@rhtml/modifiers';

@Component({
  selector: 'dashboard-component',
  modifiers: [...FlexLayout],
  template(this: DashboardComponent) {
    return html`
      <!-- Main container: row on desktop, column on mobile -->
      <div
        fxLayout="row wrap"
        fxLayout.lt-md="column"
        fxLayoutGap="0px"
        fxLayoutGap.lt-md="15px"
        fxLayoutAlign="start stretch"
      >
        <!-- Table section: fills remaining space (80%) -->
        <div class="table-section" fxFlex="" fxFlex.lt-md="100%">
          <!-- table content -->
        </div>

        <!-- Sidebar: fixed 20% width -->
        <aside fxFlex="0 1 20%" fxFlex.lt-md="100%">
          <!-- sidebar content -->
        </aside>
      </div>
    `;
  }
})
export class DashboardComponent extends LitElement {}

Best Practices

• Use fxFlex="0 1 20%" for fixed-width sidebars - The 0 for grow prevents expansion beyond the basis
• Use fxFlex="" for content areas - This fills remaining space with default flex behavior
• Use responsive suffixes (.lt-md, .gt-sm) for adaptive layouts
• Combine with CSS - FlexLayout provides inline styles; use CSS classes for complex styling

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