Sync styleguide 2026.05.18.2
This commit is contained in:
1 parent
414781db74
commit
5dbbac35c3
6 files changed
+62
-83
No files matched your search
@@ -77,7 +77,7 @@
|
||||
|
||||
<p class="sg-preview-label">Component: Large Table</p>
|
||||
<p>Suche, Sortierung und „Mehr laden“ sind hier Demo-Markup. Produktions-Implementierungen müssen Treffer serverseitig neu rendern.</p>
|
||||
<p>Optionale Spaltenbreiten-Anpassung: <code>data-column-resize="true"</code> aktiviert die Funktion. Die Tabelle benötigt dafür eine stabile, portalweit eindeutige <code>data-column-resize-key</code>. Die Header-Zellen können mit <code>data-default-width</code> (Prozent, Pixel oder relative <code>fr</code>-Werte) und die Tabelle mit <code>data-column-min-width</code> konfiguriert werden. Die Runtime wird nach dynamischem Nachladen über <code>window.sgInitLargeTableColumnResize({ root })</code> erneut aufgerufen. Gespeicherte Werte liegen als <code>{ version: 1, widths: number[] }</code> unter <code>sg:large-table:column-widths:<key></code> in <code>localStorage</code>.</p>
|
||||
<p>Optionale Spaltenbreiten-Anpassung: <code>data-column-resize="true"</code> aktiviert die Funktion. Die Tabelle benötigt dafür eine stabile, portalweit eindeutige <code>data-column-resize-key</code>. Die Header-Zellen können mit <code>data-default-width</code> (Prozent, Pixel oder relative <code>fr</code>-Werte) und die Tabelle mit <code>data-column-min-width</code> konfiguriert werden. Die Runtime wird nach dynamischem Nachladen über <code>window.sgInitLargeTableColumnResize({ root })</code> erneut aufgerufen. Gespeicherte Werte liegen als <code>{ version: 3, ratios: number[] }</code> unter <code>sg:large-table:column-widths:<key></code> in <code>localStorage</code>; die Werte sind proportionale Anteile der verfügbaren Tabellenbreite.</p>
|
||||
|
||||
<article id="styleguide-large-table" class="sg-card sg-large-table" data-component="large-table" data-column-resize="true" data-column-resize-key="styleguide-large-table" data-column-min-width="8rem" role="table" aria-label="Beispiel Large Table">
|
||||
<div class="sg-large-table__viewport" data-component-part="large-table-viewport">
|
||||
|
||||
@@ -106,14 +106,7 @@
|
||||
|
||||
.sg-large-table[data-column-resize="true"] .sg-large-table__row,
|
||||
.sg-large-table[data-column-resize="true"] .sg-large-table__title-segment {
|
||||
width: max(
|
||||
100%,
|
||||
calc(
|
||||
var(--large-table-grid-min-width, 0px) +
|
||||
var(--card-segment-padding-horizontal) +
|
||||
var(--card-segment-padding-horizontal)
|
||||
)
|
||||
);
|
||||
width: max(100%, var(--large-table-grid-min-width, 0px));
|
||||
}
|
||||
|
||||
.sg-large-table__row--hidden {
|
||||
|
||||
Reference in new issue
Block a user