Skip to main content

Fullscreen mode

Enabling the fullscreen mode​

To enable the fullscreen mode, import the Fullscreen component and wrap the Gantt tag into the Fullscreen tag.

Example:

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

    const data = getData();

</script>

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

<style>
    .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>
    import { getData } from "../data";
    import { Gantt, Fullscreen } from "@svar-ui/svelte-gantt";

    const data = getData();
</script>

<Fullscreen hotkey="ctrl+f">
    <Gantt tasks={data.tasks} links={data.links} />
</Fullscreen>