rezise图标标签与大小proprety

Question

我有一个请求，我想重新设计我的图标标签，我想向我的组件添加尺寸属性

这是我的icon-label.component.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`
  }
}

我的icon-label.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>

和我的icon-label.scss：

    .iconLabel {
  @extend .label-5;
  padding: 6px 10px;
}

.iconLabel--default {
  @include font-color;
}

并且我希望添加一个尺寸proprey，如果用户写的是proprety small 我的班级图标添加这个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

j'ai ajouter au comme cela mon css：

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

.iconLabel--default {
  @include font-color;
}

Answer 3

css代码

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

html代码

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`
  }

}

打字稿代码

import pandas as pd
df = pd.DataFrame({'a': [1,2,3,4]})
df['b'] = ''
df['b'] = df['b'].astype(object)
mytuple = ('x','y')
for l in df[df.a % 2 == 0].index:
    df.set_value(l, 'b', mytuple)