sv 查看

查看栅格系统是在原 Grid 栅格 基础上构建更高阶的组件，用于简化查看页布局。

import { SVModule } from '@delon/abc/sv';

代码演示

基本

基本查看页。

import { Component } from '@angular/core';
@Component({
  selector: 'components-sv-basic',
  template: `
  <sv-container>
    <sv-title>title</sv-title>
    <sv label="Firefox">A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</sv>
    <sv label="Firefox">A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</sv>
    <sv label="Firefox">A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</sv>
    <sv label="Default"></sv>
    <sv label="Unit" unit="个">10</sv>
    <sv label="Unit" unit="个"></sv>
  </sv-container>
  `,
})
export class ComponentsSvBasicComponent {
}

固定标签宽度

固定标签宽度让布局看起来更加整洁。

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'components-sv-fixed',
  template: `
    <sv-container labelWidth="150">
      <sv label="ID">1</sv>
      <sv label="Name">asdf</sv>
      <sv label="Age">25</sv>
      <sv label="Reject" type="danger" col="1"> OMG <a class="ml-sm" (click)="msg.success('to')">Fixed</a> </sv>
      <sv label="Long Optional Long Optional" optional="(RMB)">Optional</sv>
      <sv label="Optional" optionalHelp="Tips">Optional Help</sv>
      <sv label="Default"></sv>
      <sv [label]="label">
        <ng-template #label>
          <a nz-tooltip="test">long</a>
        </ng-template>
        Custom label
      </sv>
    </sv-container>
  `,
})
export class ComponentsSvFixedComponent {
  constructor(public msg: NzMessageService) {}
}

内容类型

通常用于展示页，成功、异常、警告等字段展示。

import { Component } from '@angular/core';
@Component({
  selector: 'components-sv-type',
  template: `
  <sv-container col="4">
    <sv label="primary" type="primary">hhhh</sv>
    <sv label="success" type="success">hhhh</sv>
    <sv label="warning" type="warning">hhhh</sv>
    <sv label="danger" type="danger">hhhh</sv>
  </sv-container>
  `,
})
export class ComponentsSvTypeComponent {
}

垂直布局

垂直布局。

import { Component } from '@angular/core';
@Component({
  selector: 'components-sv-vertical',
  template: `
  <sv-container layout="vertical">
    <sv-title>title</sv-title>
    <sv label="Firefox">A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</sv>
    <sv label="Firefox">A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</sv>
    <sv label="Firefox">A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</sv>
  </sv-container>
  `,
})
export class ComponentsSvVerticalComponent {
}

API

sv-container

sv

sv-title

用于展示标题，单独一行。