sysdesign2023 v2.0.0
Sys Design 2023
SysDesign2023 is a front-end library that provides a set of reusable components and utility functions for building modern web applications. It is built on top of popular front-end frameworks Angular.
- ⚡ Built for speed
- ⬇️ No need to import modules for components
- ⚖️ Light-weight while implementing all sys features from the supported scss/css custimization
- 🌐 Works in a browser, on a server, or from a command line interface (CLI)
Demo
Checkout the demo page to see sysDesign in action ⛹️
Docs
Our documentation pages are also rendered using SysDesign2023 💯
Component Status ✅ - Complete, 🚧 - Working
Material | Dev Status | Documatation Status |
---|---|---|
Header | ✅ | 🚧 |
Sidebar | ✅ | 🚧 |
Buttons | ✅ | 🚧 |
Tabs | ✅ | 🚧 |
cards | ✅ | 🚧 |
Tree | ✅ | 🚧 |
Slide Toggle | ✅ | 🚧 |
Dialog | ✅ | 🚧 |
Alerts | ✅ | 🚧 |
Inputs | ✅ | 🚧 |
Radios | ✅ | 🚧 |
Expension Panel | ✅ | 🚧 |
Table | ✅ | 🚧 |
Design Assets Status ✅ - Complete, 🚧 - Working
Material | Design Status | Documatation Status |
---|---|---|
Design Theme (Figma) | 🚧 | 🚧 |
Icons | 🚧 | 🚧 |
Compatibility
Node.js: Only current and LTS Node.js versions are supported. End of life Node.js versions may become incompatible with Marked at any point in time.
Browser: All Browser supported :)
Installation
Add in your project:
npm i sysdesign2023
After Install sysdesign2023 you also need to install material for icons:
ng add @angular/maetrial
Now import sysDesignModule from sysdesign2023 in your app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { sysDesignModule } from 'sysdesign2023';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
>>> sysDesignModule,
MatIconModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Get Started
Now You can start the building your application in angular with sysdesign2023 go to the documentation part from here documentation pages are also rendered using SysDesign2023 💯
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago