@natec/mef-dev-ui-kit

Description

This is Ui-kit-lib to create plugins according to the template and visual on the platform with the help of ready made solutions.It provides users with the opportunity to explore and test various components and functionalities of the library before using them in their own projects. The UI kit library allows users to create plugins according to templates and visuals on the mef.dev platform. Users can explore and test various components and functionalities of the library before using them in their own projects.

To create your first UI package, users can follow the instructions provided here.

Users can also find a plugin with a worked library here, which may serve as an example or template for creating their own plugins.

To see all the elements of the UI kit library displayed together, users can visit the UI-kit-demo.

These resources provide users with the necessary guidance and tools to create UI packages using the UI kit library for the mef.dev platform.

Version control

You can use the library on the following versions of Angular:

Getting Started

Installing

Firstly you need to install following packages:

@natec/mef-dev-ui-kit:

npm i @natec/mef-dev-ui-kit

Simple table extension with sorting, filtering, paging... for Angular apps. ngx-datatable:

npm i @swimlane/ngx-datatable

Sleek, intuitive, and powerful front-end framework for faster and easier web development. bootstrap:

npm i bootstrap

CSS font-family parser/stringifier. Font-awesome:

npm i font-awesome@4

Adding dependencies:

Now you need to add path in your Angular.json file

"architect": {
  "build": {
    "options": {
      "styles": [
            "node_modules/bootstrap/scss/bootstrap.scss",
            "node_modules/@natec/mef-dev-ui-kit/src/lib/styles/pg/core.scss",
            "node_modules/font-awesome/scss/font-awesome.scss",
            "src/styles.scss"
      ]
    }
  }
}

Usage

Firstly, you need to import BrowserAnimationsModule in your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You need to import Module from Ui-kit-lib installed earlier in your own module, and add to imports too. Example:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MefDevCardModule } from '@natec/mef-dev-ui-kit';

@NgModule({
  declarations:[],
  imports: [
    CommonModule,
    MefDevCardModule,
  ]
})
export class CardsModule { }

After, you can use MefDev components in your project. Example of usage:

    <mefdev-card 
      class="b-color-Light-Gray-2 pt-3"
      [description] = "'Description'"
      [card_type]="'type'"
      [img]="'assets/imgs/store/Frame 521.png'">
      <ng-template #card_title >
         card_title
      </ng-template>
      <ng-template #card_footer>
        card_footer
      </ng-template>
    </mefdev-card>

Examples of other components you can find in this documentation in left menubar.

Useful links:

• Documentation of the library: https://mef.dev/ui_kit
• Demo of the library: https://mef.dev/ui_kit_demo
• Library package: https://www.npmjs.com/package/@natec/mef-dev-ui-kit
• Ui-kit-lib at GitHub: https://github.com/mef-dev/ui-kit-demo.git