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

Components

Ready

• Loading Screen
• Markdown Reader
• Accordion
• Flex-Grid
• Image
• Badge
• Modal
• Button
• Article
• Divider
• Label
• Loading
• Dropdown
• Off-canvas-nav
• Card
• Progress
• Spinner
• Close
• Alert
• Description List
• Dotnav
• Tabs
• Table

In Progress

• Align
• Animation
• Background
• Base
• Breadcrumb
• Column
• Comment
• Container
• Countdown
• Cover
• Drop
• Filter
• Flex
• Form
• Grid
• Heading
• Height
• Icon
• Iconnav
• Image
• Inverse
• Leader
• Lightbox
• Link
• List
• Margin
• Marker
• Nav
• Navbar
• Notification
• Overlay
• Padding
• Pagination
• Parallax
• Placeholder
• Position
• Print
• Scroll
• Scrollspy
• Search
• Section
• Slidenav
• Slider
• Slideshow
• Sortable
• Spinner
• Sticky
• Subnav
• SVG
• Switcher
• Text
• Thumbnav
• Tile
• Toggle
• Tooltip
• Totop
• Transition
• Upload
• Utility
• Video
• Visibility
• Width

Services

• ResponsiveService
• DynamicCSS