Skip to content

Commit 4ad659c

Browse files
owenthcareyowenthcarey
committed
deploy: 7fbf9c0 
1 parent 6b43275 commit 4ad659c

File tree

19 files changed

+2888
-43
lines changed

19 files changed

+2888
-43
lines changed

‎404.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,34 @@
372372

373373

374374

375+
376+
377+
378+
379+
380+
381+
<li class="md-nav__item">
382+
<a href="/concepts/hooks/" class="md-nav__link">
383+
384+
385+
386+
<span class="md-ellipsis">
387+
388+
389+
Hooks
390+
391+
392+
393+
</span>
394+
395+
396+
397+
</a>
398+
</li>
399+
400+
401+
402+
375403
</ul>
376404
</nav>
377405

‎api/component-properties/index.html‎

Lines changed: 238 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,34 @@
383383

384384

385385

386+
387+
388+
389+
390+
391+
392+
<li class="md-nav__item">
393+
<a href="../../concepts/hooks/" class="md-nav__link">
394+
395+
396+
397+
<span class="md-ellipsis">
398+
399+
400+
Hooks
401+
402+
403+
404+
</span>
405+
406+
407+
408+
</a>
409+
</li>
410+
411+
412+
413+
386414
</ul>
387415
</nav>
388416

@@ -824,6 +852,17 @@
824852
</label>
825853
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
826854

855+
<li class="md-nav__item">
856+
<a href="#common-layout-properties" class="md-nav__link">
857+
<span class="md-ellipsis">
858+
859+
Common layout properties
860+
861+
</span>
862+
</a>
863+
864+
</li>
865+
827866
<li class="md-nav__item">
828867
<a href="#text" class="md-nav__link">
829868
<span class="md-ellipsis">
@@ -855,6 +894,28 @@
855894
</span>
856895
</a>
857896

897+
</li>
898+
899+
<li class="md-nav__item">
900+
<a href="#view" class="md-nav__link">
901+
<span class="md-ellipsis">
902+
903+
View
904+
905+
</span>
906+
</a>
907+
908+
</li>
909+
910+
<li class="md-nav__item">
911+
<a href="#safeareaview" class="md-nav__link">
912+
<span class="md-ellipsis">
913+
914+
SafeAreaView
915+
916+
</span>
917+
</a>
918+
858919
</li>
859920

860921
<li class="md-nav__item">
@@ -899,6 +960,17 @@
899960
</span>
900961
</a>
901962

963+
</li>
964+
965+
<li class="md-nav__item">
966+
<a href="#slider" class="md-nav__link">
967+
<span class="md-ellipsis">
968+
969+
Slider
970+
971+
</span>
972+
</a>
973+
902974
</li>
903975

904976
<li class="md-nav__item">
@@ -943,6 +1015,39 @@
9431015
</span>
9441016
</a>
9451017

1018+
</li>
1019+
1020+
<li class="md-nav__item">
1021+
<a href="#pressable" class="md-nav__link">
1022+
<span class="md-ellipsis">
1023+
1024+
Pressable
1025+
1026+
</span>
1027+
</a>
1028+
1029+
</li>
1030+
1031+
<li class="md-nav__item">
1032+
<a href="#modal" class="md-nav__link">
1033+
<span class="md-ellipsis">
1034+
1035+
Modal
1036+
1037+
</span>
1038+
</a>
1039+
1040+
</li>
1041+
1042+
<li class="md-nav__item">
1043+
<a href="#flatlist" class="md-nav__link">
1044+
<span class="md-ellipsis">
1045+
1046+
FlatList
1047+
1048+
</span>
1049+
</a>
1050+
9461051
</li>
9471052

9481053
</ul>
@@ -1102,6 +1207,17 @@
11021207
</label>
11031208
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
11041209

1210+
<li class="md-nav__item">
1211+
<a href="#common-layout-properties" class="md-nav__link">
1212+
<span class="md-ellipsis">
1213+
1214+
Common layout properties
1215+
1216+
</span>
1217+
</a>
1218+
1219+
</li>
1220+
11051221
<li class="md-nav__item">
11061222
<a href="#text" class="md-nav__link">
11071223
<span class="md-ellipsis">
@@ -1133,6 +1249,28 @@
11331249
</span>
11341250
</a>
11351251

1252+
</li>
1253+
1254+
<li class="md-nav__item">
1255+
<a href="#view" class="md-nav__link">
1256+
<span class="md-ellipsis">
1257+
1258+
View
1259+
1260+
</span>
1261+
</a>
1262+
1263+
</li>
1264+
1265+
<li class="md-nav__item">
1266+
<a href="#safeareaview" class="md-nav__link">
1267+
<span class="md-ellipsis">
1268+
1269+
SafeAreaView
1270+
1271+
</span>
1272+
</a>
1273+
11361274
</li>
11371275

11381276
<li class="md-nav__item">
@@ -1177,6 +1315,17 @@
11771315
</span>
11781316
</a>
11791317

1318+
</li>
1319+
1320+
<li class="md-nav__item">
1321+
<a href="#slider" class="md-nav__link">
1322+
<span class="md-ellipsis">
1323+
1324+
Slider
1325+
1326+
</span>
1327+
</a>
1328+
11801329
</li>
11811330

11821331
<li class="md-nav__item">
@@ -1221,6 +1370,39 @@
12211370
</span>
12221371
</a>
12231372

1373+
</li>
1374+
1375+
<li class="md-nav__item">
1376+
<a href="#pressable" class="md-nav__link">
1377+
<span class="md-ellipsis">
1378+
1379+
Pressable
1380+
1381+
</span>
1382+
</a>
1383+
1384+
</li>
1385+
1386+
<li class="md-nav__item">
1387+
<a href="#modal" class="md-nav__link">
1388+
<span class="md-ellipsis">
1389+
1390+
Modal
1391+
1392+
</span>
1393+
</a>
1394+
1395+
</li>
1396+
1397+
<li class="md-nav__item">
1398+
<a href="#flatlist" class="md-nav__link">
1399+
<span class="md-ellipsis">
1400+
1401+
FlatList
1402+
1403+
</span>
1404+
</a>
1405+
12241406
</li>
12251407

12261408
</ul>
@@ -1245,6 +1427,18 @@
12451427

12461428
<h1 id="component-property-reference">Component Property Reference<a class="headerlink" href="#component-property-reference" title="Permanent link">&para;</a></h1>
12471429
<p>All style and behaviour properties are passed as keyword arguments to element functions.</p>
1430+
<h2 id="common-layout-properties">Common layout properties<a class="headerlink" href="#common-layout-properties" title="Permanent link">&para;</a></h2>
1431+
<p>All components accept these layout properties:</p>
1432+
<ul>
1433+
<li><code>width</code> — fixed width in dp (Android) / pt (iOS)</li>
1434+
<li><code>height</code> — fixed height</li>
1435+
<li><code>flex</code> — flex grow factor within Column/Row</li>
1436+
<li><code>margin</code> — outer spacing (int, float, or dict with <code>horizontal</code>, <code>vertical</code>, <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>)</li>
1437+
<li><code>min_width</code>, <code>max_width</code> — width constraints</li>
1438+
<li><code>min_height</code>, <code>max_height</code> — height constraints</li>
1439+
<li><code>align_self</code> — override parent alignment (<code>"fill"</code>, <code>"center"</code>, etc.)</li>
1440+
<li><code>key</code> — stable identity for reconciliation</li>
1441+
</ul>
12481442
<h2 id="text">Text<a class="headerlink" href="#text" title="Permanent link">&para;</a></h2>
12491443
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Text</span><span class="p">(</span><span class="n">text</span><span class="p">,</span> <span class="n">font_size</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">bold</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span> <span class="n">text_align</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span>
12501444
<span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">max_lines</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
@@ -1282,6 +1476,16 @@ <h2 id="column-row">Column / Row<a class="headerlink" href="#column-row" title="
12821476
<li><code>alignment</code> — cross-axis: <code>"fill"</code>, <code>"center"</code>, <code>"leading"</code>, <code>"trailing"</code>, <code>"start"</code>, <code>"end"</code>, <code>"top"</code>, <code>"bottom"</code></li>
12831477
<li><code>background_color</code> — container background</li>
12841478
</ul>
1479+
<h2 id="view">View<a class="headerlink" href="#view" title="Permanent link">&para;</a></h2>
1480+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">View</span><span class="p">(</span><span class="o">*</span><span class="n">children</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">padding</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1481+
</code></pre></div>
1482+
1483+
<p>Generic container (UIView / FrameLayout). Supports all layout properties.</p>
1484+
<h2 id="safeareaview">SafeAreaView<a class="headerlink" href="#safeareaview" title="Permanent link">&para;</a></h2>
1485+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">SafeAreaView</span><span class="p">(</span><span class="o">*</span><span class="n">children</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">padding</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1486+
</code></pre></div>
1487+
1488+
<p>Container that respects safe area insets (notch, status bar).</p>
12851489
<h2 id="scrollview">ScrollView<a class="headerlink" href="#scrollview" title="Permanent link">&para;</a></h2>
12861490
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">ScrollView</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
12871491
</code></pre></div>
@@ -1298,13 +1502,24 @@ <h2 id="image">Image<a class="headerlink" href="#image" title="Permanent link">&
12981502
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Image</span><span class="p">(</span><span class="n">source</span><span class="o">=</span><span class="s2">&quot;&quot;</span><span class="p">,</span> <span class="n">width</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">scale_type</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
12991503
</code></pre></div>
13001504

1505+
<ul>
1506+
<li><code>source</code> — image URL (<code>http://...</code> / <code>https://...</code>) or local resource name</li>
1507+
<li><code>scale_type</code> — <code>"cover"</code>, <code>"contain"</code>, <code>"stretch"</code>, <code>"center"</code></li>
1508+
</ul>
13011509
<h2 id="switch">Switch<a class="headerlink" href="#switch" title="Permanent link">&para;</a></h2>
13021510
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Switch</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span> <span class="n">on_change</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
13031511
</code></pre></div>
13041512

13051513
<ul>
13061514
<li><code>on_change</code> — callback <code>(bool) -&gt; None</code></li>
13071515
</ul>
1516+
<h2 id="slider">Slider<a class="headerlink" href="#slider" title="Permanent link">&para;</a></h2>
1517+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Slider</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="mf">0.0</span><span class="p">,</span> <span class="n">min_value</span><span class="o">=</span><span class="mf">0.0</span><span class="p">,</span> <span class="n">max_value</span><span class="o">=</span><span class="mf">1.0</span><span class="p">,</span> <span class="n">on_change</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1518+
</code></pre></div>
1519+
1520+
<ul>
1521+
<li><code>on_change</code> — callback <code>(float) -&gt; None</code></li>
1522+
</ul>
13081523
<h2 id="progressbar">ProgressBar<a class="headerlink" href="#progressbar" title="Permanent link">&para;</a></h2>
13091524
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">ProgressBar</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="mf">0.0</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
13101525
</code></pre></div>
@@ -1321,11 +1536,33 @@ <h2 id="webview">WebView<a class="headerlink" href="#webview" title="Permanent l
13211536
</code></pre></div>
13221537

13231538
<h2 id="spacer">Spacer<a class="headerlink" href="#spacer" title="Permanent link">&para;</a></h2>
1324-
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Spacer</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1539+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Spacer</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">flex</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
13251540
</code></pre></div>
13261541

13271542
<ul>
13281543
<li><code>size</code> — fixed dimension in dp / pt</li>
1544+
<li><code>flex</code> — flex grow factor</li>
1545+
</ul>
1546+
<h2 id="pressable">Pressable<a class="headerlink" href="#pressable" title="Permanent link">&para;</a></h2>
1547+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Pressable</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="n">on_press</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">on_long_press</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1548+
</code></pre></div>
1549+
1550+
<p>Wraps any child element with tap/long-press handling.</p>
1551+
<h2 id="modal">Modal<a class="headerlink" href="#modal" title="Permanent link">&para;</a></h2>
1552+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">Modal</span><span class="p">(</span><span class="o">*</span><span class="n">children</span><span class="p">,</span> <span class="n">visible</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span> <span class="n">on_dismiss</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1553+
</code></pre></div>
1554+
1555+
<p>Overlay dialog shown when <code>visible=True</code>.</p>
1556+
<h2 id="flatlist">FlatList<a class="headerlink" href="#flatlist" title="Permanent link">&para;</a></h2>
1557+
<div class="codehilite"><pre><span></span><code><span class="n">pn</span><span class="o">.</span><span class="n">FlatList</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">render_item</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">key_extractor</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span>
1558+
<span class="n">separator_height</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">background_color</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
1559+
</code></pre></div>
1560+
1561+
<ul>
1562+
<li><code>data</code> — list of items</li>
1563+
<li><code>render_item</code> — <code>(item, index) -&gt; Element</code> function</li>
1564+
<li><code>key_extractor</code> — <code>(item, index) -&gt; str</code> for stable keys</li>
1565+
<li><code>separator_height</code> — spacing between items</li>
13291566
</ul>
13301567

13311568

0 commit comments

Comments
 (0)