All Components

Appearance

The Popup enables you to style its host element and the elements that hold its content as well as to copy the anchor font styles of the content-holding element.

Host Elements

To style the host element of the Popup, decorate the component element.

@Component({
  selector: 'my-app',
  template: `
      <style>
        .wrapper {
          padding: 20px;
          color: #fff;
          background-color: red;
        }
      </style>
      <button #anchor (click)="onToggle()" class="k-button">{{toggleText}} Popup</button>
      <kendo-popup [anchor]="anchor" class="wrapper" *ngIf="show">
        Popup content.
      </kendo-popup>
  `
})
class AppComponent {
    private toggleText: string = "Show";
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
        this.toggleText = this.show ? "Hide" : "Show";
    }
}

Content-Holding Elements

To style the element which holds the content, use the popupClass property binding.

@Component({
  selector: 'my-app',
  template: `
      <button #anchor (click)="onToggle()" class="k-button">{{toggleText}} Popup</button>
      <kendo-popup [anchor]="anchor" *ngIf="show">
        <div class="inner-wrapper">
          Popup content.
        </div>
      </kendo-popup>
  `,
  styles: [`
    .inner-wrapper {
      padding: 20px;
      color: #fff;
      background-color: red;
    }
  `]
})
class AppComponent {
    private toggleText: string = "Show";
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
        this.toggleText = this.show ? "Hide" : "Show";
    }
}

Copying Anchor Font Styles

To copy anchor font styles to the element which holds the content, use the copyAnchorStyles property binding.

@Component({
  selector: 'my-app',
  styles: [`
      .fonts {
        font-size: 20px;
        font-style: italic;
      }
      .content {
        padding: 30px;
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
      }
  `],
  template: `
      <button #anchor (click)="show = !show" class="k-button fonts">Toggle</button>
      <kendo-popup [anchor]="anchor" [copyAnchorStyles]="true" *ngIf="show">
        <div class="content">
          Popup content.
        </div>
      </kendo-popup>
  `
})
class AppComponent {
    private show: boolean = false;
}
In this article