How to add animation to grid

[DrunkenRandomWalker]

Textual is currently in active development. I will try to keep the sample functional, but I make no guarantee anything will run right now.

Unless this is a blatant bug, you might want to open a discussion for now.

Hi, I'm a newbie to TUI, and really like this textul.

from textual.app import App
from textual.reactive import Reactive
from textual.widgets import Footer, Placeholder

class GridTest(App):

    async def on_load(self) -> None:
        await self.bind("b", "toggle_sidebar", "Toggle sidebar")
        await self.bind("q", "quit", "Quit")

    show_bar = Reactive(False)

    def watch_show_bar(self, show_bar: bool) -> None:
        self.bar.animate("layout_offset_x", 0 if show_bar else -40)

    def action_toggle_sidebar(self) -> None:

        self.show_bar = not self.show_bar

    async def on_mount(self) -> None:

        self.bar = Placeholder(name="left")

        grid = await self.view.dock_grid(edge="top", name="top")

        grid.add_column(fraction=1, name="left", min_size=20)
        grid.add_column(size=40, name="center")

        grid.add_column(fraction=1, name="right")

        grid.add_row(fraction=2, name="top", min_size=2)
        grid.add_row(fraction=5, name="middle1")
        grid.add_row(fraction=5, name="middle2")
        grid.add_row(fraction=2, name="bottom")

        grid.add_areas(
            area1="left,top",
            area2="left,middle1",
            area3="left-start|right-end,middle2",
            area4="right,top-start|middle1-end",
            area5="left-start|right-end,bottom",
        )

        grid.place(
            area1=Placeholder(name="area1"),
            area2=Placeholder(name="area2"),
            area3=Placeholder(name="area3"),
            area4=Placeholder(name="area4"),
            area5=Footer(),
        )

        #await self.view.dock(footer, edge="bottom")

        await self.view.dock(self.bar, edge="left", size=20, z=1)

The bottom line of bar is lower than Footer(); how can fix this? await self.view.dock(self.bar, edge="left", size=20, z=1) is this correct?

best

[willmcgugan]

https://github.com/Textualize/textual/wiki/Sorry-we-closed-your-issue

[github-actions[bot]]

Did we solve your problem?

Glad we could help!