gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Data Columns component in data display

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-20 13:52:31 +02:00
parent 2c822c7da0
commit e4304de9ce
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
+28 -1
View File
@@ -48,5 +48,32 @@
</section>
<!-- Component: Data Columns -->
<section id="component-data-columns">
<p class="sg-preview-label">Component: Data Columns</p>
<table class="sg-data-table" aria-label="Beispiel Kennzahlen-Spalten" data-component="data-columns">
<tbody>
<tr>
<td class="sg-data-table__label" data-component-part="data-columns-label-cell">PE <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
<td class="sg-data-table__value" data-component-part="data-columns-value-cell">7.7</td>
<td data-component-part="data-columns-reference-cell">11.7</td>
</tr>
<tr>
<td class="sg-data-table__label" data-component-part="data-columns-label-cell">PE Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
<td class="sg-data-table__value" data-component-part="data-columns-value-cell">8.6</td>
<td data-component-part="data-columns-reference-cell">9.7</td>
</tr>
<tr>
<td class="sg-data-table__label" data-component-part="data-columns-label-cell">PEG Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
<td class="sg-data-table__value sg-data-table__value--warning" data-component-part="data-columns-value-cell" data-component-state="warning">1.23</td>
<td data-component-part="data-columns-reference-cell">1.43</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
</html>
semantic-tokens-components.html
+10
View File
@@ -187,6 +187,16 @@
<tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Tabellenzellen.</td></tr>
<tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Tabellen-Help-Icon.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Data Columns</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
<tr><td>surface-data-table</td><td>color-light-grey</td><td>Gesamtfläche der Spaltenliste.</td></tr>
<tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Spaltenzellen.</td></tr>
<tr><td>surface-data-table-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons im Spaltenkontext.</td></tr>
<tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Spaltenzellen.</td></tr>
<tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Spaltenzellen.</td></tr>
<tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Spalten-Help-Icon.</td></tr>
</tbody></table>
</section>
<section id="semantic-typography">