DevExtreme Angular - Specify Display Mode

By default, the ActionSheet comes up from the bottom of the page. If you set the usePopover option to true, the action sheet will pop over a certain element on the page. Use the target option to specify this element.

HTML
TypeScript
  • <dx-action-sheet
  • [dataSource]="actionSheetData"
  • [usePopover]="true"
  • target="#actionSheetTarget">
  • </dx-action-sheet>
  • import { DxActionSheetModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxActionSheetModule
  • ],
  • // ...
  • })

View Demo

See Also