(pagetop): Añade Margin y Padding nativos

- Nuevo módulo `html::spacing` con `Margin`/`Padding`: igual que
  `FlexItem`, se resuelven generando clases CSS dinámicamente y se
  aplican con `PropsOp::margin()`/`PropsOp::padding()` sobre cualquier
  componente.
- Elimina `Margin`/`Padding` de `pagetop-bootsier`.
- Añade el ejemplo `intro-spacing` con los patrones de uso típicos.
This commit is contained in:
Manuel Cillero 2026-09-13 00:48:11 +02:00
parent 64113aff09
commit 50e4b42fe4
17 changed files with 881 additions and 322 deletions

View file

@ -0,0 +1,19 @@
spacing_slogan = Márgenes y relleno nativos con Margin y Padding
spacing_note = Margin y Padding no tienen relación con Flexbox: se aplican sobre cualquier componente, use o no Flexbox su contenedor. Aquí se combinan con Flex sólo para colocar las cajas de muestra en fila.
spacing_block_title_padding = Rellenos
spacing_block_title_layout = Composición
spacing_block_title_responsive = Relleno por punto de corte
spacing_block_title_combined = Margin y padding combinados
spacing_title_uniform_small = Relleno pequeño en los cuatro lados
spacing_title_uniform_medium = Relleno medio en los cuatro lados
spacing_title_uniform_large = Relleno grande en los cuatro lados
spacing_title_sides = Un valor distinto para cada lado, incluidos los lados lógicos de inicio y fin
spacing_title_margin_gap = El margen de la caja central empuja a sus vecinas, sin usar Gap
spacing_title_margin_center = Un margen automático en ambos lados centra la caja en el espacio libre
spacing_title_responsive = El relleno crece a partir de md, y de nuevo a partir de lg
spacing_title_combined = Margen exterior arriba/abajo y relleno interno por los cuatro lados, sobre un componente con contenido real
spacing_box_sample = Contenido
spacing_box_card_button = Aceptar