Component Property Reference¶

All visual and layout properties are passed via the style dict (or list of dicts) to element functions. Behavioural properties (callbacks, data, content) remain as keyword arguments.

Common layout properties (inside `style`)¶

All components accept these layout properties in their style dict:

width — fixed width in dp (Android) / pt (iOS)
height — fixed height
flex — flex grow factor (shorthand for flex_grow)
flex_grow — how much a child grows to fill available space
flex_shrink — how much a child shrinks when space is limited
margin — outer spacing (int, float, or dict with horizontal, vertical, left, top, right, bottom)
min_width, max_width — width constraints
min_height, max_height — height constraints
align_self — override parent alignment ("stretch", "flex_start", "center", "flex_end")
key — stable identity for reconciliation (passed as a kwarg, not inside style)

View¶

pn.View(*children, style={
    "flex_direction": "column",
    "justify_content": "center",
    "align_items": "center",
    "overflow": "hidden",
    "spacing": 8,
    "padding": 16,
    "background_color": "#F5F5F5",
})

Universal flex container (like React Native's View). Defaults to flex_direction: "column".

Flex container properties (inside style):

flex_direction — "column" (default), "row", "column_reverse", "row_reverse"
justify_content — "flex_start", "center", "flex_end", "space_between", "space_around", "space_evenly"
align_items — "stretch", "flex_start", "center", "flex_end"
overflow — "visible" (default), "hidden"
spacing, padding, background_color

Text¶

pn.Text(text, style={"font_size": 18, "color": "#333", "bold": True, "text_align": "center"})

text — display string (positional)
Style properties: font_size, color, bold, text_align, background_color, max_lines

Button¶

pn.Button(title, on_click=handler, style={"color": "#FFF", "background_color": "#007AFF", "font_size": 16})

title — button label (positional)
on_click — callback () -> None
enabled — interactive state (kwarg, default True)
Style properties: color, background_color, font_size

Column / Row¶

pn.Column(*children, style={"spacing": 12, "padding": 16, "align_items": "center"})
pn.Row(*children, style={"spacing": 8, "justify_content": "space_between"})

Convenience wrappers for View with fixed flex_direction:

Column = View with flex_direction: "column" (always vertical)
Row = View with flex_direction: "row" (always horizontal)
*children — child elements (positional)
Style properties:
spacing — gap between children (dp / pt)
padding — inner padding (int for all sides, or dict with horizontal, vertical, left, top, right, bottom)
align_items — cross-axis alignment: "stretch", "flex_start", "center", "flex_end", "leading", "trailing"
justify_content — main-axis distribution: "flex_start", "center", "flex_end", "space_between", "space_around", "space_evenly"
overflow — "visible" (default), "hidden"
background_color — container background

SafeAreaView¶

pn.SafeAreaView(*children, style={"background_color": "#FFF", "padding": 8})

Container that respects safe area insets (notch, status bar).

ScrollView¶

pn.ScrollView(child, style={"background_color": "#FFF"})

TextInput¶

pn.TextInput(value="", placeholder="Enter text", on_change=handler, secure=False,
             style={"font_size": 16, "color": "#000", "background_color": "#FFF"})

on_change — callback (str) -> None receiving new text

Image¶

pn.Image(source="https://example.com/photo.jpg", style={"width": 200, "height": 150, "scale_type": "cover"})

source — image URL (http://... / https://...) or local resource name
Style properties: width, height, scale_type ("cover", "contain", "stretch", "center"), background_color

Switch¶

pn.Switch(value=False, on_change=handler)

on_change — callback (bool) -> None

Slider¶

pn.Slider(value=0.5, min_value=0.0, max_value=1.0, on_change=handler)

on_change — callback (float) -> None

ProgressBar¶

pn.ProgressBar(value=0.5, style={"background_color": "#EEE"})

value — 0.0 to 1.0

ActivityIndicator¶

pn.ActivityIndicator(animating=True)

WebView¶

pn.WebView(url="https://example.com")

Spacer¶

pn.Spacer(size=16, flex=1)

size — fixed dimension in dp / pt
flex — flex grow factor

Pressable¶

pn.Pressable(child, on_press=handler, on_long_press=handler)

Wraps any child element with tap/long-press handling.

pn.Modal(*children, visible=show_modal, on_dismiss=handler, title="Confirm",
         style={"background_color": "#FFF"})

Overlay dialog shown when visible=True.

TabBar¶

pn.Element("TabBar", {
    "items": [
        {"name": "Home", "title": "Home"},
        {"name": "Settings", "title": "Settings"},
    ],
    "active_tab": "Home",
    "on_tab_select": handler,
})

Native tab bar — typically created automatically by Tab.Navigator.

Platform	Native view
Android	`BottomNavigationView`
iOS	`UITabBar`

items — list of {"name": str, "title": str} dicts defining each tab
active_tab — the name of the currently active tab
on_tab_select — callback (str) -> None receiving the selected tab name

FlatList¶

pn.FlatList(data=items, render_item=render_fn, key_extractor=key_fn,
            separator_height=1, style={"background_color": "#FFF"})

data — list of items
render_item — (item, index) -> Element function
key_extractor — (item, index) -> str for stable keys
separator_height — spacing between items