तुलना
Before / After Image Slider
Two photographs stacked under a draggable wipe handle that also works from the keyboard.
#comparison#slider#before-after
6 फ्रेमवर्कएडवांस्ड
Loading…
A plan-versus-feature matrix built as a real table, with readable boolean cells.
<!--
A comparison is a matrix, and a matrix is a table. The <caption> names it, the
plan names are <th scope="col"> and the feature names are <th scope="row">, so
landing on a cell announces "Priority support, Pro, Included". Rebuild the
same thing out of divs and that cell announces "Included" - true, but of what?
-->
<div class="cmp-table">
<table class="cmp-table__table">
<caption class="cmp-table__caption">Plan comparison - what each tier includes</caption>
<thead>
<tr>
<th class="cmp-table__col cmp-table__col--feature" scope="col">Feature</th>
<th class="cmp-table__col" scope="col">Starter</th>
<th class="cmp-table__col" scope="col">Pro</th>
<th class="cmp-table__col" scope="col">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th class="cmp-table__row-head" scope="row">Projects</th>
<td class="cmp-table__cell">3</td>
<td class="cmp-table__cell">Unlimited</td>
<td class="cmp-table__cell">Unlimited</td>
</tr>
<tr>
<th class="cmp-table__row-head" scope="row">Team members</th>
<td class="cmp-table__cell">1</td>
<td class="cmp-table__cell">10</td>
<td class="cmp-table__cell">Unlimited</td>
</tr>
<tr>
<th class="cmp-table__row-head" scope="row">Priority support</th>
<!--
The glyph is aria-hidden and the word beside it is visually hidden:
sighted users get ✓/✗, everyone else gets "Included"/"Not included".
An icon-only cell is an empty cell to a screen reader.
-->
<td class="cmp-table__cell">
<span class="cmp-table__no" aria-hidden="true">✗</span>
<span class="cmp-table__sr">Not included</span>
</td>
<td class="cmp-table__cell">
<span class="cmp-table__yes" aria-hidden="true">✓</span>
<span class="cmp-table__sr">Included</span>
</td>
<td class="cmp-table__cell">
<span class="cmp-table__yes" aria-hidden="true">✓</span>
<span class="cmp-table__sr">Included</span>
</td>
</tr>
<tr>
<th class="cmp-table__row-head" scope="row">Audit log</th>
<td class="cmp-table__cell">
<span class="cmp-table__no" aria-hidden="true">✗</span>
<span class="cmp-table__sr">Not included</span>
</td>
<td class="cmp-table__cell">
<span class="cmp-table__yes" aria-hidden="true">✓</span>
<span class="cmp-table__sr">Included</span>
</td>
<td class="cmp-table__cell">
<span class="cmp-table__yes" aria-hidden="true">✓</span>
<span class="cmp-table__sr">Included</span>
</td>
</tr>
<tr>
<th class="cmp-table__row-head" scope="row">SSO & SAML</th>
<td class="cmp-table__cell">
<span class="cmp-table__no" aria-hidden="true">✗</span>
<span class="cmp-table__sr">Not included</span>
</td>
<td class="cmp-table__cell">
<span class="cmp-table__no" aria-hidden="true">✗</span>
<span class="cmp-table__sr">Not included</span>
</td>
<td class="cmp-table__cell">
<span class="cmp-table__yes" aria-hidden="true">✓</span>
<span class="cmp-table__sr">Included</span>
</td>
</tr>
</tbody>
</table>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | ComparisonRow[] | - | रेंडर की जाने वाली आइटम की सूची। |
plansआवश्यक | string[] | - | तुलना की जा रही कॉलम, प्रदर्शन क्रम में। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Rows are positional: `values[i]` belongs to `plans[i]`, and a boolean renders as a ✓/✗ pair while a string renders verbatim - which is what lets "Unlimited" and "included" share one row type instead of forcing two components. The part to leave alone is the header wiring. `<th scope="col">` on the plan names and `<th scope="row">` on the feature names is what makes a cell announce as "Priority support, Pro, Included"; rebuild the same grid out of divs and that cell announces "Included" - true, but of what? The same logic drives the ✓: it is `aria-hidden` and the word beside it is `sr-only`, so an icon-only cell never reaches a screen reader as an empty one. Overflow lives on the wrapper, never the table, so the feature column cannot scroll out of view.