Overview
Usage
template snippet support to _.html, _.stories.ts
css variable snippet support to *.scss
Overlay
In html, typing mvb-overlay will create code snippet as below
<app-overlay
[useHeader]="true"
[useCloseIcon]="true"
[useFooter]="true"
[disableConfirm]="false"
[disableCancel]="false"
[useConfirm]="true"
[useCancel]="true"
[headerNoPadding]="false"
[contentNoPadding]="false"
[footerNoPadding]="false"
(confirm)="null"
(cancel)="null"
>
<ng-container title> </ng-container>
<ng-container content> </ng-container>
<ng-container cancel></ng-container>
<ng-container confirm></ng-container>
</app-overlay>
In html, typing mvb-overlay-custom-footer will create code snippet as below
<app-overlay
[useHeader]="true"
[useCloseIcon]="true"
[useFooter]="true"
[headerNoPadding]="false"
[contentNoPadding]="false"
[footerNoPadding]="false"
>
<ng-container title>
<!-- typing -->
</ng-container>
<ng-container content>
<!-- typing -->
</ng-container>
<ng-container footer>
<app-basic-button class="mvb-overlay-action" (click)="null">
<!-- typing -->
</app-basic-button>
<app-basic-button class="mvb-overlay-action" [disabled]="false" (click)="null" color="primary">
<!-- typing -->
</app-basic-button>
</ng-container>
</app-overlay>
In html, typing mvb-menu-item will create code snippet as below
<button mvbMenuItem (click)="null">
<div class="mvb-menu-item-inner-flex">
<app-icon [customization]="false" class="mvb-menu-item-icon" svgIcon="null"></app-icon>
<span><!-- typing --></span>
</div>
</button>
In html, typing mvb-basic-button will create code snippet as below
<app-basic-button [disabled]="false" (click)="null">
<!-- typing -->
</app-basic-button>
In html, typing mvb-basic-button-primary will create code snippet as below
<app-basic-button color="primary" [disabled]="false" (click)="null">
<!-- typing -->
</app-basic-button>
In html, typing mvb-expand-button will create code snippet as below
<app-expand-button (click)="null">
<app-icon [height]="46" [width]="46" svgIcon="null"></app-icon>
<ng-container expand>
<div>
<!-- typing -->
</div>
</ng-container>
</app-expand-button>
In html, typing mvb-hover-button will create code snippet as below
<app-hover-button>
<app-icon svgIcon="null"></app-icon>
</app-hover-button>
In html, typing mvb-hover-button-circle will create code snippet as below
<app-hover-button [circle]="true">
<app-icon svgIcon="null"></app-icon>
</app-hover-button>
In html, typing mvb-icon will create code snippet as below
<app-icon svgIcon="null"></app-icon>
In html, typing mvb-icon-advance will create code snippet as below
<app-icon [width]="20" [height]="20" [customization]="true" [disableFillColor]="false" [disableFillColor]="false" svgIcon="false">
</app-icon>
In html, typing mvb-icon-button will create code snippet as below
<app-icon-button icon="null" size="lg" (click)="null"></app-icon-button>
In html, typing mvb-icon-chip-button will create code snippet as below
<app-icon-chip-button icon="null" [disabled]="false" (click)="null">
<!-- typing -->
</app-icon-chip-button>
In html, typing mvb-search will create code snippet as below
<app-search [value]="''" [matTooltip]="''" [placeholder]="''" (dataChange)="null"></app-search>
In html, typing mvb-search-advance will create code snippet as below
<app-search
[value]="''"
[matTooltip]="''"
size="md"
[placeholder]="''"
[debounceTime]="1"
(dataChange)="null"
(focused)="null"
(blurred)="null"
></app-search>
Layout
In html, typing mvb-card will create code snippet as below
<app-card [moreBorderRadius]="false">
<!-- typing -->
</app-card>
In html, typing mvb-card-advance will create code snippet as below
<app-card [moreSidePadding]="false" [moreUpDownPadding]="false" [moreBorderRadius]="false" [noBorderRadius]="false" [useBoxShadow]="false">
<!-- typing -->
</app-card>
In html, typing mvb-image-card will create code snippet as below
<app-image-card [imgName]="null" [imgSrc]="null" [imgHint]="null" [hideAction]="false">
<ng-container imgActionMenu>
<button mvbMenuItem (click)="null">
<div class="mvb-menu-item-inner-flex">
<app-icon class="mvb-menu-item-icon" svgIcon="null"></app-icon>
<span><!-- Typing --></span>
</div>
</button>
</ng-container>
</app-image-card>
In html, typing mvb-slide-toggle will create code snippet as below
<!-- @params data {id: string, name: string}[] -->
<!-- id is key, name is icon -->
<app-slide-toggle [data]="[]" [value]="null" (dataChange)="null"> </app-slide-toggle>
Table
In html, typing mvb-basic-table will create code snippet as below
<app-basic-table
mode="table"
[data]="data"
[headerConfigs]="headerConfigs"
[totalCount]="totalCount"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[cursorToRow]="true"
[checkboxRecordId]="checkboxRecordId"
[activatedId]="activatedId"
[checkboxSelectedItems]="checkboxSelectedItems"
[useCard]="false"
(rowClicked)="null"
(pageChange)="null"
(checkboxSelectionChange)="null"
(sortChange)="null"
(selectAllChange)="null"
>
<!--<ng-template [appBasicTableHeaderCell]="null" let-cell let-row="row">
typing
</ng-template> -->
<!--<ng-template [appBasicTableCell]="null" let-cell let-row="row">
typing
</ng-template> -->
</app-basic-table>
In html, typing mvb-basic-table-mode-list will create code snippet as below
<app-basic-table
mode="list"
[data]="data"
[headerConfigs]="headerConfigs"
[totalCount]="totalCount"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[cursorToRow]="true"
[checkboxRecordId]="checkboxRecordId"
[activatedId]="activatedId"
[checkboxSelectedItems]="checkboxSelectedItems"
[useCard]="false"
(rowClicked)="null"
(pageChange)="null"
(checkboxSelectionChange)="null"
(sortChange)="null"
(selectAllChange)="null"
>
<!--<ng-template [appBasicTableHeaderCell]="null" let-cell let-row="row">
typing
</ng-template> -->
<!--<ng-template [appBasicTableCell]="null" let-cell let-row="row">
typing
</ng-template> -->
</app-basic-table>
In html, typing mvb-basic-table-use-card will create code snippet as below
<app-basic-table
mode="table"
[data]="data"
[headerConfigs]="headerConfigs"
[totalCount]="totalCount"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[cursorToRow]="true"
[checkboxRecordId]="checkboxRecordId"
[activatedId]="activatedId"
[checkboxSelectedItems]="checkboxSelectedItems"
[useCard]="true"
(rowClicked)="null"
(pageChange)="null"
(checkboxSelectionChange)="null"
(sortChange)="null"
(selectAllChange)="null"
>
<!--<ng-template [appBasicTableHeaderCell]="null" let-cell let-row="row">
typing
</ng-template> -->
<!--<ng-template [appBasicTableCell]="null" let-cell let-row="row">
typing
</ng-template> -->
</app-basic-table>
In html, typing mvb-page-layout will create code snippet as below
<div class="mvb-page-layout">
<div class="mvb-title-layout">
<!-- <div class="mvb-subtitle"> your subtitle </div>-->
<div class="mvb-title">
<div class="mvb-title-text"><!-- your title --></div>
<!-- <app-icon
[isButton]="true"
svgIcon="''"
class="mvb-title-button"
[matTooltip]="''"
(click)="null"
></app-icon> -->
</div>
<!-- <div class="mvb-title-hint"> your hint</div> -->
</div>
<!-- Content -->
</div>
In html, typing mvb-title-layout will create code snippet as below
<div class="mvb-title-layout">
<!-- <div class="mvb-subtitle"> your subtitle </div>-->
<div class="mvb-title">
<div class="mvb-title-text"><!-- your title --></div>
<!-- <app-icon
[isButton]="true"
svgIcon="''"
class="mvb-title-button"
[matTooltip]="''"
(click)="null"
></app-icon> -->
</div>
<!-- <div class="mvb-title-hint"> your hint</div> -->
</div>
In html, typing mvb-toolbar will create code snippet as below
<app-toolbar>
<ng-container left>
<!-- typing -->
</ng-container>
<ng-container center>
<!-- typing -->
</ng-container>
<ng-container right>
<!-- typing -->
</ng-container>
</app-toolbar>
SCSS
could typing mvb-xxx or #xxx to search what you want
in .scss file, typing #990000
var(--primary-color)
Typography
could typing mvb-h1-* or mvb-h2-* to check font style
in .html file, typing mvb-h1-text
mvb-h1-text
