interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Reflect new table styles

Browse source 
Add examples to components.
This commit is contained in:
sthag 2026-03-15 11:32:59 +01:00
parent c4947a9c04
commit 245227d7e9
2 changed files with 23 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

28
source/screens/demo/components.liquid
View file

@ -190,11 +190,11 @@ order: 3
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
<h2>&lt;table&gt;</h2>
<h4>Varianten</h4>
<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3</code></pre>
<table class="width_full fix">
<thead>
<tr>
<th class="cell_pre" scope="col"></th>
<th class="pre" scope="col"></th>
<th scope="col">Kopfzeile</th>
<th scope="col">A</th>
<th scope="col">B</th>
@ -202,19 +202,19 @@ order: 3
</thead>
<tbody>
<tr>
<td class="cell_pre">Vorspalte</td>
<td class="pre">Vorspalte</td>
<td>Eine</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="cell_pre">1</td>
<td class="pre">1</td>
<td></td>
<td>erweiterte</td>
<td></td>
</tr>
<tr>
<td class="cell_pre">2</td>
<td class="pre">2</td>
<td></td>
<td></td>
<td>Tabelle</td>
@ -244,7 +244,7 @@ order: 3
<td>Streifen</td>
</tr>
</table>
<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
<pre class="pre_code"><code>table>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
<table>
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
<thead>
@ -278,6 +278,22 @@ order: 3
</tr>
</tfoot>
</table>
<pre class="pre_code"><code>table>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
<table class="width_full fix">
<tr>
<td>Index</td>
<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
<td style="width: 50%">Zelle mit Angabe der Breite.</td>
</tr>
</table>
<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
<table class="flexible">
<tr>
<td>Index</td>
<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
<td>Zelle mit Angabe der Breite.</td>
</tr>
</table>
</article>
<article>
<h1 id="forms">Formulare</h1>

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit b4c56320060548dacde62639876c6aee72b297ea
Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5