View
IMPORT MODULE

Viewing grid system is a higher-order components based on the original Grid System that server for view pages.

Examples

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
Basic

The simplest view page.

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
Fixed Label Width

Use labelWidth to make the layout look cleaner

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
Content Type

Usually used to view pages, success, danger, warning, and other fields.

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.
Vertical

Vertical layout.

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

PropertyDescriptionTypeDefaultGlobal Config
[size]size of view'small','large''large'
[layout]type of layout'horizontal','vertical''horizontal'
[gutter]specify the distance between two items, unit is pxnumber32
[col]specify the maximum number of columns to display, the final columns number is determined by col setting combined with Responsive Rules'1','2','3','4','5','6'3
[labelWidth]label text of widthnumber-
[default]whether default textbooleantrue
[title]Display titlestring,TemplateRef<void>--
[noColon]Whether to not display : after label textbooleanfalse-

sv

PropertyDescriptionTypeDefault
[col]specify the maximum number of columns to display, the final columns number is determined by col setting combined with Responsive Rules-
[label]label of viewstring,TemplateRef<void>-
[unit]unit of viewstring,TemplateRef<void>-
[default]whether default text, inherit sv-containerboolean-
[type]type of view'primary','success','danger','warning'-
[optional]Label optional informationstring, TemplateRef<void>-
[optionalHelp]Label optional helpstring, TemplateRef<void>-
[optionalHelpColor]The background color of label optional helpstring-
[noColon]Whether to not display : after label textbooleanfalse-

sv-title

Display title.

sv-value

值展示。

PropertyDescriptionTypeDefault
[prefix]Prefix of valuestring-
[unit]Unit of valuestring-
[tooltip]Tooltip text of valuestring, TemplateRef<void>-
[size]Size of value'large','small','default'default