### File

`src/app/shared/detail-header/detail-header.component.ts`

### Metadata

selector | `hi-detail-header`
styleUrls | `./detail-header.component.scss`
templateUrl | `./detail-header.component.html`

### Index

###### Methods
getTag isSecondary
###### Inputs
cluster controller instance resource workflow

### Constructor

`constructor()`
Defined in src/app/shared/detail-header/detail-header.component.ts:13

### Inputs

cluster
Type : `any`
Defined in src/app/shared/detail-header/detail-header.component.ts:9

controller
Type : `any`
Defined in src/app/shared/detail-header/detail-header.component.ts:12

instance
Type : `any`
Defined in src/app/shared/detail-header/detail-header.component.ts:11

resource
Type : `any`
Defined in src/app/shared/detail-header/detail-header.component.ts:10

workflow
Type : `any`
Defined in src/app/shared/detail-header/detail-header.component.ts:13

### Methods

getTag
`getTag()`
Defined in src/app/shared/detail-header/detail-header.component.ts:21
Returns : `"controller" | "instance" | "resource" | "workflow" | "cluster"`

isSecondary
`isSecondary()`
Defined in src/app/shared/detail-header/detail-header.component.ts:17
Returns : `any`

    import { Component, Input } from '@angular/core';

    @Component({
      selector: 'hi-detail-header',
      templateUrl: './detail-header.component.html',
      styleUrls: ['./detail-header.component.scss'],
    })
    export class DetailHeaderComponent {
      @Input() cluster;
      @Input() resource;
      @Input() instance;
      @Input() controller;
      @Input() workflow;

      constructor() {}

      isSecondary() {
        return this.controller || this.instance || this.resource || this.workflow;
      }

      getTag() {
        if (this.controller) {
          return 'controller';
        }
        if (this.instance) {
          return 'instance';
        }
        if (this.resource) {
          return 'resource';
        }
        if (this.workflow) {
          return 'workflow';
        }
        return 'cluster';
      }
    }

    <!--
      ~ Licensed to the Apache Software Foundation (ASF) under one
      ~ or more contributor license agreements.  See the NOTICE file
      ~ distributed with this work for additional information
      ~ regarding copyright ownership.  The ASF licenses this file
      ~ to you under the Apache License, Version 2.0 (the
      ~ "License"); you may not use this file except in compliance
      ~ with the License.  You may obtain a copy of the License at
      ~
      ~     http://www.apache.org/licenses/LICENSE-2.0
      ~
      ~ Unless required by applicable law or agreed to in writing,
      ~ software distributed under the License is distributed on an
      ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      ~ KIND, either express or implied.  See the License for the
      ~ specific language governing permissions and limitations
      ~ under the License.
      -->

    <h4 fxLayout="row" fxLayoutAlign="center center">
      <span [ngClass]="{ secondary: isSecondary() }">{{ cluster }}</span>
      <mat-icon *ngIf="isSecondary()" class="secondary">navigate_next</mat-icon>
      <span *ngIf="controller">{{ controller }}</span>
      <span *ngIf="instance">{{ instance }}</span>
      <span *ngIf="resource">{{ resource }}</span>
      <span *ngIf="workflow">{{ workflow }}</span>
      <span class="tag" fxLayout="row" fxLayoutAlign="center center">
        <span [ngClass]="getTag()">{{ getTag() }}</span>
        <!-- for testing purpose only
        <span class="cluster">Cluster</span>
        <span class="resource">Resource</span>
        <span class="instance">Instance</span>
        <span class="controller">Controller</span>
        <span class="workflow">Workflow</span> -->
      </span>
    </h4>

`./detail-header.component.scss`

    @use '@angular/material' as mat;

    .secondary {
      color: rgba(0, 0, 0, 0.54);
    }

    .tag {
      padding-left: 10px;

      span {
        color: #fff;
        font-size: 12px;
        line-height: 12px;
        text-transform: uppercase;
        font-weight: normal;
        border-radius: 24px;
        padding: 6px 8px;
      }

      .cluster {
        background-color: mat.get-color-from-palette(
          mat.define-palette(mat.$indigo-palette)
        );
      }

      .controller {
        background-color: mat.get-color-from-palette(
          mat.define-palette(mat.$purple-palette)
        );
      }

      .resource {
        background-color: mat.get-color-from-palette(
          mat.define-palette(mat.$teal-palette)
        );
      }

      .instance {
        background-color: mat.get-color-from-palette(
          mat.define-palette(mat.$blue-palette)
        );
      }

      .workflow {
        background-color: mat.get-color-from-palette(
          mat.define-palette(mat.$deep-orange-palette)
        );
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""