p-show

p-show is used to show/hide elements on the page.

The element is visible if the expression inside p-show is True, else it is hidden.

To hide an element, prune will change its CSS display property to “none”.

demo.py

from prune import Prune, notify

class Dropdown:
    def __init__(self) -> None:
        self.visible = False

    @notify
    def toggle(self):
        self.visible = not self.visible

Prune(dropdown=Dropdown())

index.html

<button @click="store.dropdown.toggle()">Toggle visiblity</button>
<div p-show="store.dropdown.visible">Contents...</div>

Toggle visiblity

Contents...