p-if

p-if is used for toggling elements on the page, similarly to p-show, however it completely adds and removes the element it’s applied to rather than just changing its CSS display property to “none”.

Note

Because of this difference in behavior, p-if should not be applied directly to the element, but instead to a <template> tag that encloses the element.

That template element MUST contain only one root element.

This way, Prune can keep a record of the element once it’s removed from the page.

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>
<template p-if="store.dropdown.visible">
    <div>Contents...</div>
</template>

Toggle visiblity