snippets-html.json

{
  "nas_header_css": {
    "prefix": "nas-header-css",
    "body": "<div class=\"alain-default__content-title\">\n  <h1>${1}</h1>\n</div>\n$0",
    "description": "CSS of Header (CSS版本页头)"
  },
  "nas_header_css_right-input": {
    "prefix": "nas-header-css-right-input",
    "body": "<div class=\"alain-default__content-title\">\n  <h1>$1</h1>\n  <button nz-button (click)=\"${2}()\" [nzType]=\"'primary'\">${2:添加}</button>\n</div>\n$0",
    "description": "CSS of header, Input in right (页头完整模式)"
  },
  "nas_header_css_right-inputgroup": {
    "prefix": "nas-header-css-right-inputgroup",
    "body": "<div class=\"alain-default__content-title\">\n  <h1>$1</h1>\n  <nz-input-group [nzCompact]=\"true\">\n    <nz-input [(ngModel)]=\"${4:val}\"></nz-input>\n    <button nz-button (click)=\"${3}\" [nzLoading]=\"http.loading\" [disabled]=\"!${4}\">${2:切换}</button>\n  </nz-input-group>\n</div>\n$0",
    "description": "CSS of Header, Input group in right (CSS页头：右边表单组)"
  },
  "nas_modal": {
    "prefix": "nas-modal",
    "body": "<div class=\"modal-header\">\n  <div class=\"modal-title\">$1</div>\n</div>\n$0\n<div class=\"modal-footer\"></div>",
    "description": "Modal for custom components (模态框)"
  },
  "nas_modal_edit": {
    "prefix": "nas-modal-edit",
    "body": "<div class=\"modal-header\">\n  <div class=\"modal-title\">$1</div>\n</div>\n<nz-spin *ngIf=\"!${2:i}\" class=\"modal-spin\"></nz-spin>\n<sf *ngIf=\"$2\" #sf mode=\"edit\" [schema]=\"schema\" [ui]=\"ui\" [formData]=\"$2\" button=\"none\">\n  <div class=\"modal-footer\">\n    <button nz-button type=\"button\" (click)=\"close()\">关闭</button>\n    <button nz-button type=\"submit\" [nzType]=\"'primary'\" (click)=\"save(sf.value)\" [disabled]=\"!sf.valid\" [nzLoading]=\"http.loading\">保存</button>\n  </div>\n</sf>",
    "description": "Modal edit mode demo (模态框：编辑模式)"
  },
  "nas_modal_view": {
    "prefix": "nas-modal-view",
    "body": "<div class=\"modal-header\">\n  <div class=\"modal-title\">$1</div>\n</div>\n<nz-spin *ngIf=\"!${2:i}\" class=\"modal-spin\"></nz-spin>\n<sv-container *ngIf=\"$2\">\n  $0\n</sv-container>\n<div class=\"modal-footer\">\n  <button nz-button type=\"button\" (click)=\"close()\">关闭</button>\n</div>",
    "description": "Modal view mode demo (模态框：查看模式)"
  },
  "nas_pipe_i18n-prop": {
    "prefix": "nas-pipe-i18n-prop",
    "body": "[${1|nzTitle|}]=\"'$0' | i18n\"",
    "description": "Pipe i18n by property (i18n属性管道)"
  },
  "nas_pipe_i18n": {
    "prefix": "nas-pipe-i18n",
    "body": "{{ '$0' | i18n }}",
    "description": "Pipe i18n (i18n管道)"
  },
  "nas_pipe_translate-prop": {
    "prefix": "nas-pipe-translate-prop",
    "body": "[${1|nzTitle|}]=\"'$0' | translate\"",
    "description": "Pipe translate (translate管道)"
  },
  "nas_pipe_translate": {
    "prefix": "nas-pipe-translate",
    "body": "{{ '$0' | translate }}",
    "description": "Pipe translate by property (translate属性管道)"
  },
  "nas_se_col-1": {
    "prefix": "nas-se-col-1",
    "body": "<se label=\"${1:描述}\" col=\"1\">\n  $0\n</se>",
    "description": "SE single line (编辑：单行)"
  },
  "nas_se_control-checkbox": {
    "prefix": "nas-se-control-checkbox",
    "body": "<label nz-checkbox [(ngModel)]=\"i.${1:name}\" name=\"${1}\">${2|启用,禁止,允许,不允许|}</label>\n$0",
    "description": "SE Control Checkbox (编辑控件：多选框)"
  },
  "nas_se_control-date": {
    "prefix": "nas-se-control-date",
    "body": "<nz-date-picker [(ngModel)]=\"i.${1|date,start,end,birthday|}\" name=\"${1}\"${2: nzShowTime}></nz-date-picker>\n$0",
    "description": "SE Control Date (编辑控件：日期)"
  },
  "nas_se_control-input-group": {
    "prefix": "nas-se-control-input-group",
    "body": "<nz-input-group nzAddOnAfter=\"${2:后置标签}\">\n  <input type=\"text\" nz-input [(ngModel)]=\"i.${1:name}\" name=\"${1}\">\n</nz-input-group>\n$0",
    "description": "SE Control Input group (编辑控件：文本框组合)"
  },
  "nas_se_control-input": {
    "prefix": "nas-se-control-input",
    "body": "<input nz-input [(ngModel)]=\"i.${1:name}\" name=\"${1}\"${2: required}${3: maxlength=\"${4|10,20,30,32,50,100|}\"}>",
    "description": "SE Control Input (编辑控件：文本框)"
  },
  "nas_se_control-number": {
    "prefix": "nas-se-control-number",
    "body": "<nz-input-number [(ngModel)]=\"i.${1:num}\" name=\"${1}\" ${2: required}${3: nzPlaceHolder=\"${4}\" }></nz-input-number>\n$0",
    "description": "SE Control Input number (编辑控件：数字框)"
  },
  "nas_se_control-radio-group": {
    "prefix": "nas-se-control-radio-group",
    "body": "<nz-radio-group [(ngModel)]=\"i.${1:type}\" name=\"${1}\" ${2: required}>\n  <label nz-radio [nzValue]=\"${3:1}\">${4:类型一}</label>\n  $0\n</nz-radio-group>",
    "description": "SE Control Radio group (编辑控件：单选框组)"
  },
  "nas_se_control-select": {
    "prefix": "nas-se-control-select",
    "body": "<nz-select [(ngModel)]=\"i.${1:name}\" name=\"${1}\">\n  <nz-option nzLabel=\"$2\" [nzValue]=\"${3:1}\"></nz-option>\n  $0\n</nz-select>",
    "description": "SE Control Select (编辑控件：选择器)"
  },
  "nas_se_control-switch": {
    "prefix": "nas-se-control-switch",
    "body": "<nz-switch [(ngModel)]=\"i.${1|enabled,disabled,closed,checked,yes,no|}\" name=\"${1}\"></nz-switch>\n$0",
    "description": "SE Control Switch (编辑控件：开关)"
  },
  "nas_se_control-textarea": {
    "prefix": "nas-se-control-textarea",
    "body": "<textarea [(ngModel)]=\"i.${1:remark}\" name=\"${1}\" nz-input rows=\"${2|1,2,3,4,5|}\" placeholder=\"${3:必填项}\"></textarea>\n$0",
    "description": "SE Control Textarea (编辑控件：多行文本框)"
  },
  "nas_se_control-time": {
    "prefix": "nas-se-control-time",
    "body": "<nz-time-picker [(ngModel)]=\"i.${1|time|}\" name=\"${1}\"${2: nzFormat=\"${3|HH:mm,mm:ss,HH,mm,ss|}\"}></nz-time-picker>\n$0",
    "description": "SE Control Time (编辑控件：时间)"
  },
  "nas_se_controlClass": {
    "prefix": "nas-se-controlClass",
    "body": "controlClass=\"${1|text-error,text-primary,text-success|}\"",
    "description": "Class names of se control (编辑属性：控件区域样式名)"
  },
  "nas_se_form": {
    "prefix": "nas-se-form",
    "body": "<form nz-form #f=\"ngForm\" se-container>\n  <se label=\"$2\">\n    $0\n  </se>\n  <se>\n    <button nz-button nzType=\"primary\" [disabled]=\"f.invalid\">${1:保存}</button>\n  </se>\n</form>",
    "description": "Form demo for se (编辑：表单示例)"
  },
  "nas_se_full": {
    "prefix": "nas-se-full",
    "body": "<se label=\"${1:名称}\"${2: required} error=\"${3:请填写}\" optional=\"${4:(选填)}\" optionalHelp=\"$5\" extra=\"$6\">\n  $0\n</se>",
    "description": "full for se (编辑完整示例)"
  },
  "nas_se_help-html": {
    "prefix": "nas-se-help-html",
    "body": "<se [label]=\"${1:type}LabelTpl\">\n  <ng-template #${1}LabelTpl>\n    <label>\n      $2\n      <nz-popover [nzContent]=\"${1}HelpTpl\">\n        <ng-template #${1}HelpTpl>\n          $3\n        </ng-template>\n        <i nz-popover nz-icon type=\"question-circle\"></i>\n      </nz-popover>\n    </label>\n  </ng-template>\n  $0\n</se>",
    "description": "Help html for se (编辑：HTML帮助)"
  },
  "nas_se_modal": {
    "prefix": "nas-se-modal",
    "body": "<div class=\"modal-header\">\n  <div class=\"modal-title\">$1</div>\n</div>\n<form nz-form #f=\"ngForm\" (ngSubmit)=\"${2:save}()\">\n  <div se-container=\"${3|1,2,3,4,5,6|}\">\n    $0\n  </div>\n  <div class=\"modal-footer\">\n    <button nz-button type=\"button\" (click)=\"close()\">${4:关闭}</button>\n    <button nz-button nzType=\"primary\" [disabled]=\"f.invalid\" [nzLoading]=\"http.loading\">${5:保存}</button>\n  </div>\n</form>",
    "description": "Modal demo for se (编辑：模态框示例)"
  },
  "nas_se_page": {
    "prefix": "nas-se-page",
    "body": "<form nz-form #f=\"ngForm\" (ngSubmit)=\"${1:save}()\">\n  <nz-card se-container=\"${2|1,2,3,4,5,6|}\" gutter=\"24\">\n    $0\n  </nz-card>\n  <footer-toolbar errorCollect>\n    <button nz-button nzType=\"primary\" [disabled]=\"f.invalid\" [nzLoading]=\"http.loading\">${3:保存}</button>\n  </footer-toolbar>\n</form>",
    "description": "Page demo using se (编辑：页面示例)"
  },
  "nas_se_search": {
    "prefix": "nas-se-search",
    "body": "<form nz-form nzLayout=\"inline\" (ngSubmit)=\"${1:save}()\" se-container>\n  <se label=\"${2:名称}\">\n    <input nz-input [(ngModel)]=\"i.${3:name}\" name=\"${3}\">\n  </se>\n  <se>\n    <button nz-button nzType=\"primary\">${4:搜索}</button>\n  </se>\n</form>",
    "description": "Search demo for se (编辑：搜索示例)"
  },
  "nas_sf": {
    "prefix": "nas-sf",
    "body": "<sf #sf [schema]=\"${1:schema}\" [ui]=\"${2:ui}\" [formData]=\"${3:i}\" (formSubmit)=\"${4:submit}($event)\"></sf>",
    "description": "Dynamic form (动态表单)"
  },
  "nas_sf_edit": {
    "prefix": "nas-sf-edit",
    "body": "<sf mode=\"edit\" [schema]=\"${1:schema}\" [ui]=\"${2:ui}\" [formData]=\"${3:params}\" (formSubmit)=\"${4:submit}($event)\"></sf>",
    "description": "Edit demo for sf (动态表单：编辑模式)"
  },
  "nas_sf_modal": {
    "prefix": "nas-sf-modal",
    "body": "<sf #sf mode=\"edit\" [schema]=\"schema\" [ui]=\"ui\" [formData]=\"$1\" button=\"none\">\n  <div class=\"modal-footer\">\n    <button nz-button type=\"button\" (click)=\"close()\">关闭</button>\n    <button nz-button type=\"submit\" [nzType]=\"'primary'\" (click)=\"save(sf.value)\" [disabled]=\"!sf.valid\" [nzLoading]=\"http.loading\">保存</button>\n  </div>\n</sf>",
    "description": "Modal demo for sf (动态表单：模态页示例)"
  },
  "nas_sf_page": {
    "prefix": "nas-sf-page",
    "body": "<sf #sf mode=\"edit\" [schema]=\"schema\" [ui]=\"ui\" [formData]=\"$1\" button=\"none\">\n  <footer-toolbar>\n    <button nz-button type=\"submit\" nzType=\"primary\" (click)=\"save(sf.value)\" [disabled]=\"!sf.valid\" [nzLoading]=\"http.loading\">保存</button>\n  </footer-toolbar>\n</sf>",
    "description": "Page dem for sf (动态表单：页面示例)"
  },
  "nas_sf_search": {
    "prefix": "nas-sf-search",
    "body": "<sf mode=\"search\" [schema]=\"${1:searchSchema}\" [formData]=\"${2:params}\" (formSubmit)=\"${3:st}.reset($event)\" (formReset)=\"$3.reset($2)\"></sf>",
    "description": "Search demo for sf (动态表单：搜索模式)"
  },
  "nas_st_custom-title": {
    "prefix": "nas-st-custom-title",
    "body": "<ng-template st-row=\"${1:custom}\" type=\"title\" let-c let-index=\"index\">\n  $0\n</ng-template>",
    "description": "Custom title for st (表格：自定义标题头)"
  },
  "nas_st_custom": {
    "prefix": "nas-st-custom",
    "body": "<ng-template st-row=\"${1:custom}\" let-item let-index=\"index\">\n  $0\n</ng-template>",
    "description": "Custom row for st (表格：自定义列)"
  },
  "nas_st": {
    "prefix": "nas-st",
    "body": "<st [data]=\"${1:url}\" [columns]=\"${2:columns}\"${3: [req]=\"{${4:params: params}\\\\}\"}$0></st>",
    "description": "st (表格)"
  },
  "nas_st_res": {
    "prefix": "nas-st-res",
    "body": "[res]=\"{ reName: { total: \"$1\", list: \"$2\" \\\\}${3:, process: process} \\\\}\"",
    "description": "res paraments for st (表格属性：res 参数)"
  },
  "nas_sv_currency": {
    "prefix": "nas-sv-currency",
    "body": "<sv label=\"${1|单价,金额,订单金额,支付金额,市场价|}\">{{ ${2:i.price} | _currency }}</sv>\n$0",
    "description": "Currency demo for sv (查看：货币示例)"
  },
  "nas_sv": {
    "prefix": "nas-sv",
    "body": "<sv-container${1: col=\"${2|2,3,4,5,6|}\"}${3: [title]=\"'${4}'\"}>\n  <sv label=\"$5\">$6</sv>\n  $0\n</sv-container>",
    "description": "View (查看)"
  },
  "nas_sv_item-custom-title": {
    "prefix": "nas-sv-item-custom-title",
    "body": "<sv [label]=\"${1:idLabelTpl}\">\n  <ng-template #${1}>\n    <a nz-tooltip=\"test\">tip</a>\n    $0\n  </ng-template>\n</sv>",
    "description": "Custom title for sv (查看：自定义标签标题)"
  },
  "nas_sv_item": {
    "prefix": "nas-sv-item",
    "body": "<sv label=\"${1|编号,名称,电话,手机,地址,备注,数量|}\">$2</sv>\n$0",
    "description": "Item for sv (查看：单项)"
  },
  "nas_sv_label-width": {
    "prefix": "nas-sv-label-width",
    "body": "<sv-container labelWidth=\"${1:150}\"${2: col=\"${3|2,3,4,5,6|}\"}${4: [title]=\"'${5}'\"}>\n  <sv label=\"$6\">$7</sv>\n  $0\n</sv-container>",
    "description": "Fix label width for sv (查看：固定标签宽度)"
  },
  "nas_sv_status": {
    "prefix": "nas-sv-status",
    "body": "<sv label=\"状态\">\n  <nz-badge *ngIf=\"i.status === 1\" nzStatus=\"default\" nzText=\"未提交\"></nz-badge>\n  <nz-badge *ngIf=\"i.status === 2\" nzStatus=\"processing\" nzText=\"运行中\"></nz-badge>\n  <nz-badge *ngIf=\"i.status === 4\" nzStatus=\"warning\" nzText=\"上线审核中\"></nz-badge>\n  <nz-badge *ngIf=\"i.status === 6\" nzStatus=\"error\" nzText=\"已删除\"></nz-badge>\n  $0\n</sv>",
    "description": "Status demo for sv (查看：状态示例)"
  },
  "nas_sv_time": {
    "prefix": "nas-sv-time",
    "body": "<sv label=\"${1|时间,开始时间,结束时间,生效时间,创建时间,更新时间|}\">{{ ${2:i.time} | _date }}</sv>\n$0",
    "description": "Time demo for sv (查看：时间示例)"
  },
  "nas_sv_type": {
    "prefix": "nas-sv-type",
    "body": "<sv label=\"${1|失败,取消,重写,过期,警告,原因|}\" type=\"${2|primary,success,danger,warning|}\">$3</sv>\n$0",
    "description": "Type demo for sv (查看属性：列表内容样式)"
  },
  "nas_container_for": {
    "prefix": "nas-container-for",
    "body": "@for (i of ${1:list,item}; track $index) {\n  $0\n}",
    "description": "Include @for (携带 @for)"
  },
  "nas_container_if": {
    "prefix": "nas-container-if",
    "body": "@if ($1) {\n  $0\n}",
    "description": "Include @if for ng-container (携带 @if)"
  },
  "nas_switch": {
    "prefix": "nas-switch",
    "body": "@switch (${1}) {\n  @case (${2}) {\n    $0\n  }\n}",
    "description": "\\@switch syntax (\\@switch 语法)"
  },
  "nas_template": {
    "prefix": "nas-template",
    "body": "<ng-template #${1|actionTpl,extraTpl,editTpl,viewTpl,prefixTpl,suffixTpl|}>\n  $0\n</ng-template>",
    "description": "ng-template"
  },
  "nas_template_outlet": {
    "prefix": "nas-template-outlet",
    "body": "<ng-template [ngTemplateOutlet]=\"${1:content}\"${2: [ngTemplateOutletContext]=\"{ \\$implicit: ${3:item} \\}\"} />\n$0",
    "description": "Include ngTemplateOutlet (携带 ngTemplateOutlet)"
  },
  "nas_template_recursive-tree": {
    "prefix": "nas-template-recursive-tree",
    "body": "<ng-template #treeTpl let-ls let-level=\"level\">\n  <li *ngFor=\"let i of ls\">\n    <ul *ngIf=\"i.children.length > 0\">\n      <ng-container *ngTemplateOutlet=\"treeTpl; context:{ $implicit: i.children, level: level + 1 }\"></ng-container>\n    </ul>\n  </li>\n</ng-template>\n<ul>\n  <ng-container *ngTemplateOutlet=\"treeTpl; context:{ $implicit: tree.children, level: 1 }\"></ng-container>\n</ul>",
    "description": "Recursive tree for ng-template (模板递归树)"
  }
}