File

src/app/components/application-header/application-header-kebab-menu.component.ts

Metadata

Index

Methods
Inputs

Constructor

constructor(popOverCtrl: PopoverController)
Parameters :
Name Type Optional
popOverCtrl PopoverController No

Inputs

options
Type : KebabMenuOption[]
Default value : []

Methods

Public onOptionSelect
onOptionSelect($event: MouseEvent, option: KebabMenuOption)
Parameters :
Name Type Optional
$event MouseEvent No
option KebabMenuOption No
Returns : void
import {Component, Input} from '@angular/core';
import {PopoverController} from '@ionic/angular';

export interface KebabMenuOption {
  label: string;
  value: any;
}

@Component({
  selector: 'app-application-header-kebab-menu',
  template: `
      <ion-list lines="none">
          <ion-item *ngFor="let option of options" (click)="onOptionSelect($event, option)">{{ option.label | translate }}</ion-item>
      </ion-list>
  `,
  styleUrls: ['./application-header-kebab-menu.component.scss']
})
export class ApplicationHeaderKebabMenuComponent {
  @Input() options: KebabMenuOption[] = [];
  
  constructor(
    private popOverCtrl: PopoverController
  ) {
  }

  public onOptionSelect($event: MouseEvent, option: KebabMenuOption) {
    this.popOverCtrl.dismiss({ option });
  }
}

./application-header-kebab-menu.component.scss

@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";

:host {
  .item.item-block {
    border-bottom: 2px solid map-get($colors, gray_light);
    &:last-child {
      border-bottom: 0px;
    }
  }

  .list-md .item-block .item-inner {
    border-bottom: 0px;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""