@progress/kendo-vue-layout
Version:
85 lines (84 loc) • 2.36 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
/**
* @hidden
*/
declare const DrawerContent: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
/**
* Represents the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
*
* ```jsx
* <template>
* <div>
* <Drawer
* :expanded="expanded"
* :position="position"
* :mode="mode"
* :items="
* items.map((item, index) => ({
* ...item,
* selected: index === selectedId,
* }))
* "
* @select="handleSelect"
* >
* <DrawerContent>
* <k-button @click="handleClick"> Toggle the drawer state </k-button>
* </DrawerContent>
* </Drawer>
* </div>
* </template>
*
* <script>
* import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
* import { Button } from "@progress/kendo-vue-buttons";
* import "./styles.css";
*
* export default {
* name: "App",
* components: { Drawer, DrawerContent, "k-button": Button },
* data() {
* return {
* items: [
* {
* text: "Inbox",
* icon: "inbox",
* selected: true,
* },
* {
* text: "Calendar",
* icon: "calendar",
* },
* {
* text: "Attachments",
* icon: "hyperlink-email",
* },
* {
* text: "Favourites",
* icon: "star-outline",
* },
* ],
* expanded: true,
* selectedId: 0,
* position: "start",
* mode: "push",
* };
* },
* methods: {
* handleClick(e) {
* this.expanded = !this.expanded;
* },
* handleSelect(e) {
* this.selectedId = e.itemIndex;
* },
* },
* };
* </script>
* ```
*/
export { DrawerContent };