File
Implements
Metadata
| selector |
app-popover |
| styleUrls |
./popover.component.scss |
| templateUrl |
./popover.component.html |
|
forceAlignment
|
Default value : false
|
|
|
|
horizontalAlign
|
Type : string
|
Default value : 'after'
|
|
|
|
lockAlignment
|
Default value : false
|
|
|
|
margin
|
Type : number
|
Default value : 0
|
|
|
|
scrollOptions
|
Type : []
|
Default value : [
{ value: 'noop', name: 'Do nothing' },
{ value: 'block', name: 'Block scrolling' },
{ value: 'reposition', name: 'Reposition on scroll' },
{ value: 'close', name: 'Close on scroll' },
{ value: 'rugrats', name: 'Invalid option' }
]
|
|
|
|
strategy
|
Type : string
|
Default value : 'reposition'
|
|
|
|
verticalAlign
|
Type : string
|
Default value : 'center'
|
|
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-popover',
templateUrl: './popover.component.html',
styleUrls: ['./popover.component.scss']
})
export class PopoverComponent implements OnInit {
horizontalAlign = 'after';
verticalAlign = 'center';
margin = 0;
forceAlignment = false;
lockAlignment = false;
strategy = 'reposition';
scrollOptions = [
{ value: 'noop', name: 'Do nothing' },
{ value: 'block', name: 'Block scrolling' },
{ value: 'reposition', name: 'Reposition on scroll' },
{ value: 'close', name: 'Close on scroll' },
{ value: 'rugrats', name: 'Invalid option' }
];
constructor() {}
ngOnInit() {}
}
<mat-card>
<mat-card-title>Popover</mat-card-title>
<mat-card-content>
<button mat-icon-button [popoverTriggerFor]="popover">
<mat-icon>grade</mat-icon>
</button>
<stbui-popover #popover="stbuiPopover">
<stbui-date-picker mode="landscape"></stbui-date-picker>
</stbui-popover>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Positioning</mat-card-title>
<mat-card-content>
<div class="config">
<mat-form-field>
<mat-select [(ngModel)]="horizontalAlign" placeholder="horizontalAlign">
<mat-option value="before">Before</mat-option>
<mat-option value="start">Start</mat-option>
<mat-option value="center">Center</mat-option>
<mat-option value="end">End</mat-option>
<mat-option value="after">After</mat-option>
<mat-option value="octopus">Octopus</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [(ngModel)]="verticalAlign" placeholder="verticalAlign">
<mat-option value="above">Above</mat-option>
<mat-option value="start">Start</mat-option>
<mat-option value="center">Center</mat-option>
<mat-option value="end">End</mat-option>
<mat-option value="below">Below</mat-option>
<mat-option value="aardvark">Aardvark</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput type="number" [(ngModel)]="margin" placeholder="anchor's margin-left (px)">
</mat-form-field>
</div>
<button mat-raised-button color="accent" [style.marginLeft]="margin + 'px'">
显示
</button>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Action API</mat-card-title>
<mat-card-content>
<button mat-icon-button [popoverTriggerFor]="popover">
<mat-icon>grade</mat-icon>
</button>
<stbui-popover #popover="stbuiPopover">
<stbui-date-picker mode="landscape"></stbui-date-picker>
</stbui-popover>
<button mat-raised-button>popover#open()</button>
<button mat-raised-button>popover#close()</button>
<button mat-raised-button>popover#toggle()</button>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Scroll Strategies</mat-card-title>
<mat-card-content>
<mat-radio-group>
<mat-radio-button *ngFor="let scrollOption of scrollOptions" [value]="scrollOption.value">
{{scrollOption.name}}
</mat-radio-button>
</mat-radio-group>
<div>
<button mat-raised-button>显示</button>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Focus Behavior</mat-card-title>
<mat-card-content>
<button mat-icon-button [popoverTriggerFor]="popover">
<mat-icon>grade</mat-icon>
</button>
<stbui-popover #popover="stbuiPopover">
<stbui-date-picker mode="landscape"></stbui-date-picker>
</stbui-popover>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Custom Transitions</mat-card-title>
<mat-card-content>
<button mat-icon-button [popoverTriggerFor]="popover">
<mat-icon>grade</mat-icon>
</button>
<stbui-popover #popover="stbuiPopover">
<stbui-date-picker mode="landscape"></stbui-date-picker>
</stbui-popover>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>文件上传</mat-card-title>
<mat-card-content>
<stbui-file-upload></stbui-file-upload>
</mat-card-content>
</mat-card>
:host {
display: block;
}
mat-card {
margin: 20px;
}
Legend
Html element with directive