jQuery ActionSheet - Specify Display Mode
By default, the ActionSheet comes up from the bottom of the page. If you set the usePopover property to true, the action sheet will pop over a certain element on the page. Use the target property to specify this element.
jQuery
JavaScript
$(function() {
$("#actionSheetContainer").dxActionSheet({
dataSource: actionSheetData,
usePopover: true,
target: "#actionSheetTarget"
});
});Angular
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
],
// ...
})Vue
<template>
<DxActionSheet ...
:use-popover="true"
target="#actionSheetTarget"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxActionSheet } from 'devextreme-vue/action-sheet';
export default {
components: {
DxActionSheet
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { ActionSheet } from 'devextreme-react/action-sheet';
class App extends React.Component {
render() {
return (
<ActionSheet ...
usePopover={true}
target="#actionSheetTarget"
/>
);
}
}
export default App;See Also
- ActionSheet - Customize Item Appearance
- ActionSheet API Reference
- Configure a UI Component: Angular | Vue | React | jQuery | AngularJS | Knockout
Feedback