Contenedores

Tabla comparadora

Compara varios planes columna a columna. La cabecera queda fija al desplazarse, de modo que la columna que se lee siempre muestra a qué plan pertenece. La columna destacada lleva la clase de una superficie de marca.

Uso

<vadavo-comparison-table> genera el interruptor «ver solo las diferencias» y filtra las filas por sí solo; dentro, header-row se aplica a la fila de cabecera y row a cada fila de características. Cada celda lleva cell y, según el contenido, la clase included o excluded para mostrar el disco con la marca de verificación o la cruz. Destacar una columna o una celda es ponerle la clase de una superficie de marca.

No dibuja caja: enmarcarla es envolverla en una tarjeta con flush, que la deja llegar a sus bordes.

Qué filas oculta el filtro

Al pulsar el interruptor, el componente oculta cada row cuyas celdas —aparte de la primera, la etiqueta— tengan todas el mismo texto y el mismo estado included/excluded: las filas donde ningún plan se diferencia de los demás.

Características

Little WP

Business WP

Unicorn WP

Almacenamiento

10 GB

25 GB

50 GB

Copias de seguridad diarias

Certificado SSL

<vadavo-card flush>
<vadavo-comparison-table>
    <div class="header-row">
        <div class="column">Características</div>
        <div class="column">Little WP</div>
        <div class="column standout">Business WP</div>
        <div class="column">Unicorn WP</div>
    </div>
    <div class="row">
        <div class="cell">Almacenamiento</div>
        <div class="cell">10 GB</div>
        <div class="cell standout">25 GB</div>
        <div class="cell">50 GB</div>
    </div>
    <div class="row">
        <div class="cell">Copias de seguridad diarias</div>
        <div class="cell excluded"></div>
        <div class="cell standout included"></div>
        <div class="cell included"></div>
    </div>
    <div class="row">
        <div class="cell">Certificado SSL</div>
        <div class="cell included"></div>
        <div class="cell standout included"></div>
        <div class="cell included"></div>
    </div>
</vadavo-comparison-table>
</vadavo-card>

Tokens semánticos

Token	Qué es
`--comparison-table--shadow--toggle`	La sombra desplazada (`box-shadow` completa) del interruptor «ver solo las diferencias» en reposo.
`--comparison-table--shadow--toggle-active`	La sombra desplazada del interruptor «ver solo las diferencias» mientras se pulsa.