ComponentesComponents

Tabla de costeo

Edición, selección, filtros y totales de partidas.

DiseñoDesign: MITherramienta · densidaddensity media · sobriaMarkdownJSON

CódigoCode

<section class="work-card" aria-label="Costeo"><h2>Costeo de materiales</h2><p class="muted">Edita cantidades y precios. Importes de ejemplo en USD.</p><label>Filtrar partidas<input data-filter type="search" placeholder="Material o concepto"></label><div class="table-scroll"><table><thead><tr><th>Seleccionar</th><th>Concepto</th><th>Cantidad</th><th>Precio USD</th><th>Subtotal</th></tr></thead><tbody data-rows></tbody></table></div><div class="actions"><button data-add>Añadir partida</button><button data-remove>Quitar seleccionadas</button></div><p>Total USD: <output data-total></output></p><p role="status" data-status></p></section>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Copia los archivos:Copy the files: cost-table.html, cost-table.css, cost-table.js.
  3. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Edición, selección, filtros y totales de partidas.
  • Edición, selección, filtros y totales de partidas.

Mejor noAvoid

  • Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor.
  • Examples do not connect accounts or save files to a server.

AccesibilidadAccessibility

region
Tab EnterRecorre y activa los controlesNavigate and activate controls
  • Errores y resultados se anuncian con role=status.
  • Errors and results use role=status.

CréditosCredits