@advinow-medical/portal-common-ui
v0.0.3
Published
A Library to hold all of the common UI components for the portal-internal
Downloads
5
Readme
PortalCommonUI
UI components library project.
Instruction
Firstly you shoul install dependencies
npm install --save bootstrap jquery popper.jsAdd 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
| Attribute | Values | Default | Description | |------------|---------------------------------------------------------------|---------|-----------------------------------| | color | primary/secondary/success/danger/warning/info/light/dark/link | primary | Button color | | disabled | true/false | false | Button disable state | | outline | true/false | false | Button outline style | | size | small/large/default | default | Button size | | href | (URL) | null | | | routerLink | (Route) | null | | | dataToggle | | | (Bootstrap data-toggle attribute) | | dataTarget | | | (Bootstrap data-target attribute) |
<pcu-button
(click)="myClickMethod()"
outline=true
disabled=true
color="secondary">
Button
</pcu-button>Dropdown
| Attribute | Values | Default | Description | |-------------|---------------------------------------------------------------|---------|-------------------------------| | color | primary/secondary/success/danger/warning/info/light/dark/link | primary | Dropdown button color | | disabled | true/false | false | Dropdown button disable state | | outline | true/false | false | Dropdown button outline style | | size | small/large/default | default | Dropdown button size | | buttonLabel | (String) | | Dropdown button text | | linkLabel | (String) | | Dropdown button (link) text |
<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
| Attribute | Values | Default | Description | |-------------|---------------------|---------|-------------------------------| | navbarColor | dark/link | dark | Navbar color |
<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
| Attribute | Values | Default | Description | |----------------------|--------------------------------------------|---------|-------------------------------------------------------------------| | head | (Array of String or Object or TemplateRef) | [] | Table head items Object params: - colspan - class - style - label | | body | (Array of String or Object or TemplateRef) | [] | Table body items Object params: - class - style - content | | headColor | light/dark | | Table head color | | tableColor | light/dark | | Table body color | | headTextAlign | left/center/right | left | Text aligment for table head items | | bodyTextAlign | left/center/right | left | Text aligment for table body items | | firstColumnTextAlign | left/center/right | left | Text aligment for first column of table head and body |
<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
| Attribute | Values | Default | Description | |-----------|----------|---------|---------------| | value | (String) | | Value to copy |
<pcu-copy-field value="Value to copy"></pcu-copy-field>Form field
| Attribute | Values | Default | Description | |-----------|----------|---------|-------------| | label | (String) | | Field label |
<pcu-form-field label="Field label">
<input type="text" class="form-control">
</pcu-form-field>Modal
| Attribute | Values | Default | Description | |--------------|----------|---------|---------------------| | headerStyles | (Object) | {} | Modal header styles | | bodyStyles | (Object) | {} | Modal body styles | | footerStyles | (Object) | {} | Modal footer styles |
<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">×</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
| Attribute | Values | Default | Description | |-----------|---------------------|---------|---------------------------| | name | (String) | | Field form name attribute | | size | small/large/default | default | Field size |
<pcu-password name="password"></pcu-password>
<pcu-password name="password_confirm"></pcu-password>Search field
<pcu-search-field></pcu-search-field>Select
| Attribute | Values | Default | Description | |-----------|-----------------------------------------------------|--------------------|------------------------------------| | data | (Array of Object{label, value, selected, disabled}) | [] | Select options | | size | small/large/default | default | Select field size | | multiple | true/false | false | Multiple select | | title | (String) | 'Nothing selected' | Default text of not selected items | | name | (String) | | HTML name attribute | | onChange | (Functions) | | Function to trigger event on change|
<pcu-select data="[{ label: '1' }, { label: '2' }, { label: '3' }]">
</pcu-select>Sidebar
| Attribute | Values | Default | Description | |---------------|--------------------------------|---------|---------------| | sideMenuItems | (Array of Object{label, link}) | | Sidebar items |
<pcu-sidebar sideMenuItems="[{ label: 1, link: '/1' }, { label: 2, link: '/2' }]">
</pcu-sidebar>Layouts
Sidebar layout
| Attribute | Values | Default | Description | |------------------|---------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------| | title | (String) | | Page title | | templateTitle | (Object{content, context}) | | | | sidebarMenuItems | (Array) | | Items for sidebar (see Sidebar component) | | breadcrumb | (Array of Object{label, link}/String) | | Page breadcrumb. If item == Object, then item will displaying as link, if item == String, then item will display as simple text |
<pcu-sidebar-layout
sidebarMenuItems="..."
title="Page title"
[breadcrumb]="[{ label: 'previous page', link: ['..'] }, 'current page']"
></pcu-sidebar-layout>Simple layout
| Attribute | Values | Default | Description | |------------------|---------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------| | title | (String | | Page title | | templateTitle | (Object{content, context}) | | | | breadcrumb | (Array of Object{label, link}/String) | | Page breadcrumb. If item == Object, then item will displaying as link, if item == String, then item will display as simple text |
<pcu-simple-layout
title="Page title"
[breadcrumb]="[{ label: 'previous page', link: ['..'] }, 'current page']"
></pcu-simple-layout>