Best Practices for A Tag or ItemList Interface

[chalbersma]

I'm looking to let my users put in "tags" and I was hoping to have an interface that looks something like this :

Is there a good example of something like that right now or is that something I'd have to hack together to use?

[TomJGooding]

I'm sure you already checked this, but you can find all the available Textual widgets in the docs: https://textual.textualize.io/widget_gallery/

There's nothing I can see that is quite what you're looking for, but it shouldn't be too hard to build your own.

Here's something I quickly hacked together, which hopefully will help get you started.

from textual import on
from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widget import Widget
from textual.widgets import Button, Label


class TagListView(VerticalScroll):
    DEFAULT_CSS = """
    TagListView {
        width: 30;
        height: 15;
        background: $panel;
        overflow-y: scroll;
    }
    """


class TagItem(Widget):
    DEFAULT_CSS = """
    TagItem {
        layout: horizontal;
        height: auto;
        width: auto;
    }

    TagItem Button {
        min-width: 5;
    }

    TagItem Label {
        border: tall transparent;
        width: 1fr;
        content-align: left middle;
    }
    """

    def __init__(self, text: str) -> None:
        super().__init__()
        self.text = text

    def compose(self) -> ComposeResult:
        yield Label(f"{self.text}")
        yield Button("X", variant="error")

    @on(Button.Pressed)
    def remove_tag(self, event: Button.Pressed) -> None:
        event.stop()
        self.remove()


class ExampleApp(App):
    CSS = """
    Screen {
        align: center middle;
    }
    """

    tag_count = 0

    def compose(self) -> ComposeResult:
        yield TagListView()
        yield Button("Add New Tag!", variant="success")

    @on(Button.Pressed)
    def add_new_tag(self) -> None:
        tag_list = self.query_one(TagListView)
        self.tag_count += 1
        tag_list.mount(TagItem(f"Tag #{self.tag_count}"))


if __name__ == "__main__":
    app = ExampleApp()
    app.run()