bixi/src/app/shared/components/color-box/color-box.component.html

企业级中后台前端解决方案

<div class="color-box">
  <div nz-row nzGutter="30" class="color-example">
    <ng-container *ngFor="let colors of colorList">
      <div nz-col class="gutter-row" nzSpan="8" nz-col nzXs="24" nzSm="12" nzMd="8" nzLg="8"
        nzXl="8" nzXXl="8">
        <div class="color-group">
          <ng-container *ngFor="let item of colors">
            <div [ngClass]="{'color-item': true, 'color-item-main': item.main}"
              title="click to copy color" [style.background]="item.value" [style.color]="item.color"
              (click)="onColorClick(item)">
              <div class="ellipsis">{{item.name}}</div>
              <div class="value ellipsis">{{item.value}}</div>
            </div>
          </ng-container>
        </div>
      </div>
    </ng-container>
  </div>
</div>

<nz-modal [(nzVisible)]="modalVisible" [nzTitle]="null" nzWidth="600" (nzOnCancel)="onClose()"
  [nzFooter]="modalFooterTpl">
  <div class="color-download" *ngIf="selectedColor">
    <div class="color-preview" [style.background]="selectedColor.value">
    </div>
    <div class="color-info">
      <div class="color-value">
        {{selectedColor.value}}
      </div>
      <div class="color-detail">
        <div class="command">
          <span class="tag">{{selectedColor.name}}</span>
        </div>
        <div class="copy" (click)="onCopy(selectedColor.name)">复制</div>
      </div>
    </div>
  </div>
</nz-modal>

<ng-template #modalFooterTpl>
  <div class="icon-actions">
    <div nz-button nzType="primary" class="btn-opt" (click)="onCopy(selectedColor.value)"><i nz-icon
        nzType="copy"></i>&nbsp;&nbsp;复制颜色值</div>
  </div>
</ng-template>