Skip to main content

Fullscreen mode

Enabling the fullscreen mode​

To enable the fullscreen mode, import the Fullscreen component from @svar-ui/vue-core and wrap the Gantt tag into the Fullscreen tag.

Example:

<script setup>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/vue-gantt";
    import { Fullscreen } from "@svar-ui/vue-core";

    const data = getData();
</script>

<template>
    <div class="demo">
        <h4>Click the "expand" icon</h4>
        <div class="gtcell">
            <Fullscreen>
                <Gantt :tasks="data.tasks" :links="data.links" />
            </Fullscreen>
        </div>
    </div>
</template>

<style scoped>
    .demo {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
    }

    .gtcell {
        overflow: hidden;
        border: var(--wx-gantt-border);
    }
</style>

Assigning hotkeys​

You can also assign hotkeys for enabling the fullscreen mode. You need to add the value to the hotkey property of the Fullscreen tag:

Example:

<script setup>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/vue-gantt";
    import { Fullscreen } from "@svar-ui/vue-core";

    const data = getData();
</script>

<template>
    <Fullscreen hotkey="ctrl+f">
        <Gantt :tasks="data.tasks" :links="data.links" />
    </Fullscreen>
</template>

Related sample: Fullscreen