angular-material-app documentation
  1. Components
  2. TagSelectComponent

File

src/app/component/tag-select/tag-select.component.ts

Implements

OnInit

Metadata

selector stbui-tag-select
styleUrls ./tag-select.component.scss
templateUrl ./tag-select.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()
Defined in src/app/component/tag-select/tag-select.component.ts:16

Inputs

label
Type : string
Default value : '热门标签：'
Defined in src/app/component/tag-select/tag-select.component.ts:9
selectedIndex
Type : number | null
Defined in src/app/component/tag-select/tag-select.component.ts:10
tags
Type : any
Default value : []
Defined in src/app/component/tag-select/tag-select.component.ts:11

Outputs

selectedTagChange
Type : EventEmitter
Defined in src/app/component/tag-select/tag-select.component.ts:13
selectedTagIndex
Type : EventEmitter
Defined in src/app/component/tag-select/tag-select.component.ts:14

Methods

ngOnInit
ngOnInit()
Defined in src/app/component/tag-select/tag-select.component.ts:20
Returns : void
onMoreTriggered
onMoreTriggered()
Defined in src/app/component/tag-select/tag-select.component.ts:27
Returns : void
onTagTriggered
onTagTriggered(tag)
Defined in src/app/component/tag-select/tag-select.component.ts:22
Parameters :
Name Optional
tag No
Returns : void

Properties

isExpand
Type : boolean
Default value : true
Defined in src/app/component/tag-select/tag-select.component.ts:16
 
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'stbui-tag-select',
  templateUrl: './tag-select.component.html',
  styleUrls: ['./tag-select.component.scss']
})
export class TagSelectComponent implements OnInit {
  @Input() label: string = '热门标签：';
  @Input() selectedIndex: number | null;
  @Input() tags: any = [];

  @Output() readonly selectedTagChange = new EventEmitter<any>();
  @Output() readonly selectedTagIndex = new EventEmitter<any>();

  isExpand: boolean = true;

  constructor() {}

  ngOnInit() {}

  onTagTriggered(tag) {
    this.selectedIndex = tag;
    this.selectedTagChange.emit(tag);
  }

  onMoreTriggered() {
    this.isExpand = !this.isExpand;
  }
}

<div class="tag-select" [class.expand]="isExpand">
  <label>{{ label }}</label>
  <ul class="tag-select-wrap">
    <li class="tag-select-item" *ngFor="let tag of tags">
      <a mat-ripple [class.active]="selectedIndex === tag" (click)="onTagTriggered(tag)">{{ tag.name }}</a>
    </li>
  </ul>
  <a mat-ripple class="tag-select-extra" [class.active]="isExpand" (click)="onMoreTriggered()">
    <span>更多</span>
    <mat-icon class="mat-icon">expand_more</mat-icon>
  </a>
</div>

./tag-select.component.scss 

.tag-select {
  position: relative;
  font-size: 14px;
  line-height: 28px;

  > label {
    position: absolute;
  }

  &.expand {
    height: 28px;
    overflow: hidden;
  }

  &-wrap {
    display: block;
    margin: 0 84px;
    padding: 0;
  }

  &-item {
    display: inline-block;

    > a {
      position: relative;
      display: inline-block;
      padding: 0 12px;
      margin-left: 4px;
      text-align: center;
      cursor: default;
      border-radius: 2px;
    }

    > a:hover {
      background-color: #ccc;
    }
  }

  &-extra {
    padding: 0 8px;
    margin-left: 4px;
    position: absolute;
    top: 0;
    right: 6px;
    cursor: pointer;

    .mat-icon {
      float: right;
      transform: rotate(-180deg);
      transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    &.active {
      .mat-icon {
        transform: rotate(0);
      }
    }
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""