查看
IMPORT MODULE

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

代码演示

title
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Default
Unit
10
Unit
Value
50.11亿
Mulit Value
103
Value Size
DefaultSamllLarge
基本

基本查看页。

expand codeexpand code
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>
      <nz-divider></nz-divider>
      <sv label="Default"></sv>
      <sv label="Unit" unit="个">10</sv>
      <sv label="Unit" unit="个"></sv>
      <sv label="Value">
        <sv-value prefix="约" unit="亿" tooltip="5,011,000,000">50.11</sv-value>
      </sv>
      <sv label="Mulit Value">
        <sv-value>10</sv-value>
        <sv-value>3</sv-value>
      </sv>
      <sv label="Value Size">
        <sv-value>Default</sv-value>
        <sv-value size="small">Samll</sv-value>
        <sv-value size="large">Large</sv-value>
      </sv>
    </sv-container>
  `,
})
export class ComponentsSvBasicComponent {}
ID
1
Name
asdf
Age
25
Reject
OMG Fixed
Long Optional Long Optional(RMB)
Optional
Optional
Optional Help
Default
Custom label
固定标签宽度

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

expand codeexpand code
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" optionalHelp="The background color is #f50" optionalHelpColor="#f50"></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) {}
}
primary
hhhh
success
hhhh
warning
hhhh
danger
hhhh
内容类型

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

expand codeexpand code
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 {}
title
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
垂直布局

垂直布局。

expand codeexpand code
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

参数说明类型默认值全局配置
[size]大小'small','large''large'
[layout]布局'horizontal','vertical''horizontal'
[gutter]间距number32
[col]指定信息最多分几列展示,最终一行几列由 col 配置结合响应式规则决定'1','2','3','4','5','6'3
[labelWidth]默认标签文本宽度number-
[default]默认是否显示默认文本booleantrue
[title]标题string,TemplateRef<void>--
[noColon]默认是否不显示 label 后面的冒号booleanfalse-

sv

参数说明类型默认值
[col]指定信息最多分几列展示,最终一行几列由 col 配置结合响应式规则决定,继承 sv-container'1','2','3','4','5','6'-
[label]标签string,TemplateRef<void>-
[unit]单位string,TemplateRef<void>-
[default]是否显示默认文本,继承 sv-containerboolean-
[type]类型'primary','success','danger','warning'-
[optional]标签可选信息string, TemplateRef<void>-
[optionalHelp]标签可选帮助string, TemplateRef<void>-
[optionalHelpColor]标签可选帮助背景颜色string-
[noColon]是否不显示 label 后面的冒号booleanfalse-

sv-title

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

sv-value

值展示。

参数说明类型默认值
[prefix]前缀string-
[unit]单位string-
[tooltip]文字提示内容string, TemplateRef<void>-
[size]大小'large','small','default'default