
    <nz-space-compact nzBlock>
      <input nz-input value="0571" [style.width.%]="20" />
      <input nz-input value="26888888" [style.width.%]="30" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock nzSize="small">
      <input nz-input value="https://ng.ant.design" [style.width]="'calc(100% - 200px)'" />
      <button nz-button nzType="primary">Submit</button>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <input nz-input value="https://ng.ant.design" [style.width]="'calc(100% - 200px)'" />
      <button nz-button nzType="primary">Submit</button>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <input nz-input value="git@github.com:NG-ZORRO/ng-zorro-antd.git" [style.width]="'calc(100% - 200px)'" />
      <button nz-button nz-tooltip nzTooltipTitle="copy git url">
        <nz-icon nzType="copy" />
      </button>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-select ngModel="Zhejianggggg">
        <nz-option nzLabel="Zhejianggggg" nzValue="Zhejianggggg"></nz-option>
        <nz-option nzLabel="Jiangsu" nzValue="Jiangsu"></nz-option>
      </nz-select>
      <input nz-input value="Xihu District, Hangzhou" [style.width.%]="50" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="30">
        <input nz-input value="0571" />
        <ng-template #addonTmpl>
          <button nz-button class="ant-input-search-button">
            <nz-icon nzType="search" />
          </button>
        </ng-template>
      </nz-input-group>
      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="50">
        <input nz-input value="26888888" />
        <ng-template #addonTmpl>
          <button nz-button class="ant-input-search-button">
            <nz-icon nzType="search" />
          </button>
        </ng-template>
      </nz-input-group>
      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="20">
        <input nz-input value="+1" />
        <ng-template #addonTmpl>
          <button nz-button class="ant-input-search-button">
            <nz-icon nzType="search" />
          </button>
        </ng-template>
      </nz-input-group>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-select nzMode="multiple" [ngModel]="['Zhejianggggg']" [style.width.%]="50">
        <nz-option nzLabel="Zhejianggggg" nzValue="Zhejianggggg"></nz-option>
        <nz-option nzLabel="Jiangsu" nzValue="Jiangsu"></nz-option>
      </nz-select>
      <input nz-input value="Xihu District, Hangzhou" [style.width.%]="50" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-select ngModel="Option1">
        <nz-option nzLabel="Option1" nzValue="Option1"></nz-option>
        <nz-option nzLabel="Option2" nzValue="Option2"></nz-option>
      </nz-select>
      <input nz-input value="input content" [style.width.%]="50" />
      <nz-input-number [ngModel]="12" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <input nz-input value="input content" [style.width.%]="50" />
      <nz-date-picker [style.width.%]="50" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-range-picker [style.width.%]="70" />
      <input nz-input value="input content" [style.width.%]="30" />
      <button nz-button nzType="primary">查询</button>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <input nz-input value="input content" [style.width.%]="30" />
      <nz-range-picker [style.width.%]="70" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-select ngModel="Option1-1">
        <nz-option nzLabel="Option1-1" nzValue="Option1-1"></nz-option>
        <nz-option nzLabel="Option2-1" nzValue="Option2-1"></nz-option>
      </nz-select>
      <nz-select ngModel="Option1-2">
        <nz-option nzLabel="Option1-2" nzValue="Option1-2"></nz-option>
        <nz-option nzLabel="Option2-2" nzValue="Option2-2"></nz-option>
      </nz-select>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-select ngModel="1">
        <nz-option nzLabel="Between" nzValue="1"></nz-option>
        <nz-option nzLabel="Except" nzValue="2"></nz-option>
      </nz-select>
      <input nz-input placeholder="Minimum" style="width: 100px; text-align: center" />
      <input
        nz-input
        class="site-input-split"
        style="
          width: 30px;
          border-left: 0;
          border-right: 0;
          pointer-events: none
        "
        placeholder="~"
        disabled
      />
      <input nz-input class="site-input-right" style="width: 100px; text-align: center" placeholder="Maximum" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-select ngModel="Sign Up" [style.width.%]="30">
        <nz-option nzLabel="Sign Up" nzValue="Sign Up"></nz-option>
        <nz-option nzLabel="Sign In" nzValue="Sign In"></nz-option>
      </nz-select>
      <nz-autocomplete #auto [nzDataSource]="['text 1', 'text 2']" />
      <input nz-input placeholder="Email" [nzAutocomplete]="auto" [style.width.%]="70" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-time-picker [style.width.%]="70" />
      <nz-cascader [nzOptions]="cascaderOptions" nzPlaceholder="Select Address" [style.width.%]="70" />
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-tree-select
        [nzNodes]="nodes"
        nzShowSearch
        nzPlaceHolder="Please select"
        ngModel="10010"
        nzDefaultExpandAll
        [style.width.%]="60"
      ></nz-tree-select>
      <button nz-button nzType="primary">Submit</button>
    </nz-space-compact>
    <br />
    <nz-space-compact nzBlock>
      <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com" [style.width.%]="50">
        <input nz-input placeholder="input here" />
      </nz-input-group>
      <nz-input-number>
        <span nzInputPrefix>$</span>
      </nz-input-number>
      <nz-input-number>
        <span nzInputAddonBefore>$</span>
      </nz-input-number>
    </nz-space-compact>
  