Rezise图标标签与大小优先

Question

我有一个请求，我想重新设计我的图标标签，我想在我的组件中添加大小

这是我的图标标签.组件.ts

  import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit
} from '@angular/core'
@Component({
  selector: 'mae-icon-label',
  templateUrl: 'icon-label.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconLabelComponent implements OnInit {
  @Input() icon: string
  @Input() color: string
  @Input() iconPosition: string
  public computedClass: string
  ngOnInit() {
    this.computedClass = this.color ? `color--${this.color}` : `iconLabel--default`
  }
}

我的图标标签.html：

    <div class="iconLabel {{computedClass}}">
  <div class="mi__wrapper">
    <i class="mi {{icon}}  "
       *ngIf="!iconPosition || iconPosition === 'left'">
    </i>
    <span class="iconLabel__Label"><ng-content></ng-content></span>
    <i class="mi {{icon}}"
       *ngIf="iconPosition === 'right'">
    </i>
  </div>
</div>

和我的图标标签.scss：

    .iconLabel {
  @extend .label-5;
  padding: 6px 10px;
}
.iconLabel--default {
  @include font-color;
}

我想添加一个大小 proprey 如果用户写 proprety 小我的类图标添加此 mi mi-user mi-2X 作为示例

我希望我的标签HTML是这样的

<mae-icon-label icon="mi-user" [size]="large">Label</mae-icon-label>

怎么会有呢？

谢谢

Answer 1

阅读您的评论后，这是您的解决方案

对于 HTML

<div class="iconLabel {{size}}">
  <div class="mi__wrapper">
    <i class="mi {{icon}}  "
       *ngIf="!iconPosition || iconPosition === 'left'">
    </i>
    <span class="iconLabel__Label"><ng-content></ng-content></span>
    <i class="mi {{icon}}"
       *ngIf="iconPosition === 'right'">
    </i>
  </div>
</div>

对于组件

  import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit
} from '@angular/core'
@Component({
  selector: 'mae-icon-label',
  templateUrl: 'icon-label.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconLabelComponent implements OnInit {
  @Input() icon: string
  @Input() color: string
  @Input() iconPosition: string
  @Input() size: string
  public computedClass: string
  ngOnInit() {
    this.computedClass = this.color ? `color--${this.color}` : `iconLabel--default`
  }
}

调用它

<mae-icon-label icon="mi-user" [size]="'large'">Label</mae-icon-label>

Answer 2

CSS 代码

    .iconLabel {
  @extend .label-5;
  padding: 6px 10px;
}
.iconLabel--default {
  @include font-color;
}

.iconLabel--size {
  @include font-color;
  font-size: 5em;
  &__large{
    font-size: 15em;
  }
}

网页代码

   <div class="iconLabel {{computedClass}} {{size}}" >
  <div class="mi__wrapper">
    <i class="mi {{icon}}"
       *ngIf="!iconPosition || iconPosition === 'left'">
    </i>
    <span class="iconLabel__Label {{size}}"><ng-content></ng-content></span>
    <i class="mi {{icon}}"
       *ngIf="iconPosition === 'right'">
    </i>
  </div>
</div>

打字稿代码

import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit
} from '@angular/core'
@Component({
  selector: 'mae-icon-label',
  templateUrl: 'icon-label.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconLabelComponent implements OnInit {
  @Input() icon: string
  @Input() color: string
  @Input() iconPosition: string
  @Input() size: string
  public computedClass: string
  ngOnInit() {
    this.computedClass = this.color ? `color--${this.color}` : `iconLabel--default`
    //this.computedClass = this.size  ? `size--${this.size}` : `iconLabel--size`
  }
}

Answer 3

.iconLabel {
  @extend .label-5;
  padding: 6px 10px;
  &__large{
    height:75px;
    width: 75px;
  }
}
.iconLabel--default {
  @include font-color;
}