FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [View Raw Code]   [Original HTTPS Page]

pythonnative/docs/examples.md at main · andevsr/pythonnative · GitHub

  1. andevsr
  2. pythonnative

Repository navigation

Breadcrumbs

  1. pythonnative
  2. docs

examples.md

Latest commit

 

History

History
139 lines (110 loc) · 4.09 KB

Breadcrumbs

  1. pythonnative
  2. docs

examples.md

File metadata and controls

139 lines (110 loc) · 4.09 KB
Raw

Examples

Small, self-contained snippets and full apps that show PythonNative's component model and patterns. Each example is also runnable inside a project scaffolded with pn init.

Featured examples

Page What it covers
Hello world The smallest possible app and how it boots.
Counter use_state, event handlers, and basic styling.
Forms TextInput, controlled inputs, validation, submit.
Lists FlatList, keyed children, dynamic rendering.
Navigation Stack, tab, and drawer navigators side-by-side.
Collapsing header & bottom sheet Scroll-driven animation, Animated.event, gestures, and stacking.

Working from a project

pn init my-app
cd my-app
# Edit app/main.py and paste any of the snippets below.
pn preview       # fast desktop preview with Fast Refresh
pn run android   # or: pn run ios

The app/main.py that pn init writes already returns a small counter; replace it with one of the snippets to try a different example. The quickest way to iterate is pn preview, which renders the app in a desktop window and reloads on every save; use pn run when you want it on a real device or simulator.

Snippets

Reusable components

Compose small components and pass them as children:

import pythonnative as pn


@pn.component
def LabeledInput(label: str = "", placeholder: str = ""):
    return pn.Column(
        pn.Text(label, style={"font_size": 14, "bold": True}),
        pn.TextInput(placeholder=placeholder),
        style={"spacing": 4},
    )


@pn.component
def SignUp():
    return pn.ScrollView(
        pn.Column(
            pn.Text("Sign up", style={"font_size": 24, "bold": True}),
            LabeledInput(label="Name", placeholder="Enter your name"),
            LabeledInput(label="Email", placeholder="you@example.com"),
            pn.Button("Submit", on_press=lambda: print("submitted")),
            style={"spacing": 12, "padding": 16},
        )
    )

Theming via context

ThemeContext = pn.create_context({"primary": "#0a84ff", "bg": "#fff"})


@pn.component
def Header():
    theme = pn.use_context(ThemeContext)
    return pn.Text(
        "Hello",
        style={"color": theme["primary"], "font_size": 28, "bold": True},
    )


@pn.component
def App():
    return pn.Provider(
        ThemeContext,
        {"primary": "#222", "bg": "#fafafa"},
        pn.Column(Header(), style={"padding": 16}),
    )

Wrapping with an error boundary

@pn.component
def Risky():
    raise RuntimeError("oops")


@pn.component
def Safe():
    return pn.ErrorBoundary(
        Risky(),
        fallback=lambda exc: pn.Text(f"Failed: {exc}"),
    )

Flex distribution and absolute positioning

@pn.component
def LayoutShowcase():
    return pn.Column(
        pn.Row(
            pn.View(style={"flex": 1, "height": 60, "background_color": "#FAD"}),
            pn.View(style={"flex": 2, "height": 60, "background_color": "#ADF"}),
            pn.View(style={"flex": 1, "height": 60, "background_color": "#DFA"}),
            style={"spacing": 8, "align_items": "stretch"},
        ),
        pn.View(
            pn.View(style={"position": "absolute", "top": 8, "left": 8,
                           "width": 32, "height": 32,
                           "background_color": "#F00"}),
            pn.View(style={"position": "absolute", "bottom": 8, "right": 8,
                           "width": 32, "height": 32,
                           "background_color": "#0A0"}),
            style={"width": 200, "height": 120, "background_color": "#EEE"},
        ),
        style={"spacing": 12, "padding": 16},
    )

See Layout engine for the full set of supported flexbox features.

Next steps

Back | FazBrowse Home | New Git URL