@rxdi/ui-kit NPM

@rxdi/ui-kit

DEMO

Installation

npm i @rxdi/ui-kit

Usage

Import ReactiveUiModule inside AppModule, this step will inject for us default providers

import { Module } from '@rxdi/core';
import { ReactiveUiModule } from '@rxdi/ui-kit';

@Module({
  imports: [
    ReactiveUiModule.forRoot()
  ]
})
export class AppModule {}

Using Components

import { Module } from '@rxdi/core';
import { AppComponent } from './app.component';
import { AccordionComponent } from '@rxdi/ui-kit/accordion';
import { MarkdownReaderComponent } from '@rxdi/ui-kit/markdown-reader';
import { RxImageComponent } from '@rxdi/ui-kit/image';
import { ReactiveUiModule } from '@rxdi/ui-kit';
import { GridComponent } from '@rxdi/ui-kit/grid';
import { BadgeComponent } from '@rxdi/ui-kit/badge';

@Module({
  components: [
    MarkdownReaderComponent,
    AccordionComponent,
    RxImageComponent,
    GridComponent,
    BadgeComponent
  ],
  imports: [
    ReactiveUiModule.forRoot({
      palettes: {
        root: css`
          :root {
            --bp-s: 640px;
            --bp-m: 960px;
            --bp-l: 1200px;
            --bp-xl: 1600px;
          }
        `,
        danger: css`
          :root {
            --danger-bg-color: #f0506e;
            --danger-color: #fff;
            --danger-border: 1px solid transparent;
            --danger-hover-color: #ee395b;
            --danger-active-color: #ec2147;
          }
        `,
        default: css`
          :root {
            --default-bg-color: transparent;
            --default-color: #222;
            --default-border: 1px solid #e5e5e5;
            --default-hover-color: transparent;
            --default-hover-border: 1px solid #999;
          }
        `,
        primary: css`
          :root {
            --primary-bg-color: #1e87f0;
            --primary-color: #fff;
            --primary-border: 1px solid transparent;
            --primary-hover-color: #0f7ae5;
            --primary-active-color: #0e6dcd;
          }
        `, 
        secondary: css`
          :root {
            --secondary-bg-color: #222;
            --secondary-color: #fff;
            --secondary-border: 1px solid transparent;
            --secondary-hover-color: #333;
            --secondary-active-color: #000;
          }
        `, 
        warning: css`
          :root {
            --warning-bg-color: #faa05a;
            --warning-color: #fff;
            --warning-border: 1px solid transparent;
            --warning-hover-color: #e19457;
            --warning-active-color: #ef9a56;
          }
        `
      }
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}