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