@advinow-medical/portal-common-ui v0.0.3

PortalCommonUI

UI components library project.

• Components
  • Button
  • Dropdown
  • Navbar
  • Table
  • Copy field
  • Form field
  • Modal
  • Password
  • Search field
  • Select
  • Sidebar
• Layouts
  • Sidebar
  • Simple

Instruction

Firstly you shoul install dependencies

npm install --save bootstrap jquery popper.js

Add to build in angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Import library in app.module.ts

import { PortalCommonuiModule } from 'portal-common-ui';

@NgModule({
  ...,
  imports: [
    ...,
    PortalCommonuiModule
  ],
})

Components

Button

<pcu-button
  (click)="myClickMethod()"
  outline=true
  disabled=true
  color="secondary">
  Button
</pcu-button>

Dropdown

<pcu-dropdown
  outline="true"
  buttonLabel="dropdown"
  color="danger"
>
  <a #item>Action</a>
  <a #item>Another action</a>
  <a #item>Something else here</a>
</pcu-dropdown>

Navbar

<pcu-navbar>
  <a #navbar-brand href="#">Brand</a>
  <pcu-navbar-toggler
    #toggler
    target="#header"
  ></pcu-navbar-toggler>

  <pcu-navbar-menu id="header" #menu>
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Second</a>
    </li>
    <li class="nav-item dropdown">
      <pcu-dropdown linkLabel="Download link">
        <a #item href="#">1</a>
        <a #item href="#">2</a>
        <a #item href="#">3</a>
      </pcu-dropdown>
    </li>
  </pcu-navbar-menu>
</pcu-navbar>

Table

<pcu-table
  [head]="['1', '2', { colspan: 2, label: '3')]"
  [data]="data"
>
</pcu-table>

export class MyComponent {
  public data: Array<Array<any>> = [
    ['1:1', '2:1', '3:1', { content: '4:1' }],
    ['1:2', '2:2', '3:2', '4:2']
  ];

  constructor() {
  }
}

Cell with custom element:

<pcu-table
  [head]="['1', '2', '3', '4']"
  [data]="data"
>
</pcu-table>
<ng-template #btn>
  <pcu-button size="small">
    Button
  </pcu-button>
</ng-template>

export class MyComponent implements OnInit {
  @ViewChild('btn') btn: TemplateRef<any>;

  public data: Array<Array<any>> = [];

  constructor() {
  }

  ngOnInit(): void {
    this.data = [
      ['1:1', '2:1', '3:1', this.btn],
      ['1:2', '2:2', '3:2', this.bt]
    ];
  }
}

Copy field

<pcu-copy-field value="Value to copy"></pcu-copy-field>

Form field

<pcu-form-field label="Field label">
  <input type="text" class="form-control">
</pcu-form-field>

Modal

<pcu-button (click)="myModal.show()">
  Open Modal
</pcu-button>

<pcu-modal #myModal>
  <ng-container class="pcu-modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" aria-label="Close" (click)="myModal.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </ng-container>

  <ng-container class="pcu-modal-body">
    Modal content
  </ng-container>

  <ng-container class="pcu-modal-footer">
    Modal footer
  </ng-container>
</pcu-modal>

Password

<pcu-password name="password"></pcu-password>
<pcu-password name="password_confirm"></pcu-password>

Search field

<pcu-search-field></pcu-search-field>

Select

<pcu-select data="[{ label: '1' }, { label: '2' }, { label: '3' }]">
</pcu-select>

Sidebar

<pcu-sidebar sideMenuItems="[{ label: 1, link: '/1' }, { label: 2, link: '/2' }]">
</pcu-sidebar>

Layouts

Sidebar layout

<pcu-sidebar-layout
  sidebarMenuItems="..." 
  title="Page title" 
  [breadcrumb]="[{ label: 'previous page', link: ['..'] }, 'current page']"
></pcu-sidebar-layout>

Simple layout

<pcu-simple-layout
  title="Page title" 
  [breadcrumb]="[{ label: 'previous page', link: ['..'] }, 'current page']"
></pcu-simple-layout>