SGrid `<s-grid>`

Un contenedor de CSS grid para organizar contenido en filas y columnas. SGrid es el wrapper de Vue 3 tipado del web component <s-grid> de Shopify Polaris.

import { SGrid } from 'polaris-vue-elements'

Buenas prácticas

Piensa en las pantallas pequeñas. Una cuadrícula que funciona en escritorio puede desmoronarse en móvil. Decide cómo debe reajustarse o reorganizarse en anchos más estrechos en lugar de fijar un único diseño.
Usa un espaciado uniforme. Separaciones regulares entre los elementos dan al diseño un ritmo constante y lo hacen más fácil de recorrer, así que evita mezclar distintos enfoques de espaciado dentro de una misma cuadrícula.
Ten en cuenta el contenido que no cabe. Las celdas tienen dimensiones definidas, pero la longitud del contenido varía. Decide de antemano si el contenido demasiado largo o ancho debe pasar a la línea siguiente, truncarse o desplazarse.
Usa un componente más sencillo cuando baste. SGrid es potente pero añade complejidad, así que comprueba si un componente de diseño más sencillo resuelve el caso y reserva la cuadrícula para los casos que necesitan lo que ofrece.

Consulta las buenas prácticas de Shopify para <s-grid> (en inglés) para ver todas las recomendaciones.

Ejemplo

Column 1

Column 2

Column 1

Column 2

vue

<script setup>
import { SGrid, SGridItem, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</template>

Props

Prop	Tipo	Descripción
`accessibilityLabel`	`string`	Una etiqueta que describe el propósito o el contenido del elemento. Cuando se define, se anuncia a los usuarios de tecnologías de asistencia y les proporciona más contexto. Úsala solo cuando el contenido del elemento no aporte suficiente contexto a los usuarios de tecnologías de asistencia.
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	Define el significado semántico del contenido del componente. Cuando se establece, las tecnologías de asistencia usan el rol para ayudar a los usuarios a navegar por la página.
`accessibilityVisibility`	`"visible" \| "hidden" \| "exclusive"`	Cambia la visibilidad del elemento. - `visible`: el elemento es visible para todos los usuarios. - `hidden`: el elemento se elimina del árbol de accesibilidad, pero sigue siendo visible. - `exclusive`: el elemento se oculta visualmente, pero permanece en el árbol de accesibilidad.
`alignContent`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (9 more)`	Alinea la cuadrícula a lo largo del eje de bloque. Reemplaza el valor de bloque de `placeContent`.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Alinea los elementos de la cuadrícula a lo largo del eje de bloque.
`background`	`"subdued" \| "base" \| "strong" \| "transparent"`	El color de fondo del componente.
`blockSize`	`"auto" \| "0"`	El tamaño vertical del elemento en diseños estándar (la altura en modos de escritura de izquierda a derecha o de derecha a izquierda). El tamaño de bloque se ajusta según la dirección de escritura: en diseños horizontales controla la altura; en diseños verticales controla la anchura. Esto garantiza un comportamiento coherente en distintas direcciones de texto. Más información sobre block-size.
`border`	`BorderShorthand`	Un borde aplicado con sintaxis abreviada para especificar el ancho, el color y el estilo en una sola propiedad.
`borderColor`	`"subdued" \| "base" \| "strong"`	El color del borde según la escala de colores del sistema de diseño. Cuando se establece, sobrescribe el valor de color especificado en la propiedad `border`. Elige entre `subdued`, `base` o `strong` según el énfasis visual necesario.
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	El redondeo de las esquinas del elemento según la escala de radios del sistema de diseño. Admite la sintaxis de 1 a 4 valores para especificar radios distintos por esquina. Úsalo para crear esquinas redondeadas o elementos completamente redondeados.
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	El estilo visual del borde en todos los lados, como sólido, discontinuo o punteado. Cuando se establece, anula el valor de estilo especificado en la propiedad `border`. Admite la sintaxis de 1 a 4 valores para especificar estilos distintos por lado.
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small-100" \| "small" \| "large" \| "large-100" \| "none">`	El grosor del borde en todos los lados. Cuando se establece, anula el valor de ancho especificado en la propiedad `border`. Admite la sintaxis de 1 a 4 valores para especificar anchos distintos por lado.
`columnGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	Ajusta el espaciado entre elementos en el eje en línea. Reemplaza el valor de columna de `gap`. Acepta: - Un único valor de `SpacingKeyword`, como `large-100` - Una cadena de valor adaptable con el SpacingKeyword admitido como valor de consulta
`display`	`"auto" \| "none"`	El tipo de display externo del componente. El tipo externo determina cómo participa un componente en el flujo de diseño. - `auto`: el valor inicial del componente. El valor real depende del componente y del contexto. - `none`: oculta el componente y lo elimina del árbol de accesibilidad, de modo que resulta invisible para los lectores de pantalla.
`gap`	`MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>`	Ajusta el espaciado entre elementos. Acepta: - Un único valor de `SpacingKeyword` aplicado a ambos ejes, como `large-100` - Un par de valores, como `large-100 large-500`, para definir los ejes en línea y de bloque respectivamente - Una cadena de valor adaptable con el SpacingKeyword admitido como valor de consulta
`gridTemplateColumns`	`string`	Las columnas de la cuadrícula y sus tamaños. Acepta: - Valores de tamaño de pista, como `1fr auto` - Una cadena de valor adaptable con los valores de tamaño de pista admitidos como valor de consulta
`gridTemplateRows`	`string`	Las filas de la cuadrícula y sus tamaños. Acepta: - Valores de tamaño de pista, como `1fr auto` - Una cadena de valor adaptable con los valores de tamaño de pista admitidos como valor de consulta
`inlineSize`	`"auto" \| "0"`	La anchura en modos de escritura horizontales, o la altura en modos de escritura verticales. Úsalo para un dimensionamiento relativo al flujo que se adapte a la dirección del texto. Más información sobre inline-size.
`justifyContent`	`"normal" \| "stretch" \| "center" \| "start" \| "end" \| "unsafe center" \| "unsafe start" \| "unsafe end" … (6 more)`	Alinea la cuadrícula a lo largo del eje en línea. Reemplaza el valor en línea de `placeContent`.
`justifyItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Alinea los elementos de la cuadrícula a lo largo del eje en línea.
`maxBlockSize`	`"none" \| "0"`	La altura máxima en modos de escritura horizontales, o la anchura máxima en modos de escritura verticales. Impide que el elemento crezca más allá de este tamaño. Más información sobre max-block-size.
`maxInlineSize`	`"none" \| "0"`	La anchura máxima en modos de escritura horizontales, o la altura máxima en modos de escritura verticales. Impide que el elemento crezca más allá de este tamaño. Más información sobre max-inline-size.
`minBlockSize`	`"0"`	La altura mínima en modos de escritura horizontales, o la anchura mínima en modos de escritura verticales. Impide que el elemento se reduzca por debajo de este tamaño. Más información sobre min-block-size.
`minInlineSize`	`"0"`	La anchura mínima en modos de escritura horizontales, o la altura mínima en modos de escritura verticales. Impide que el elemento se reduzca por debajo de este tamaño. Más información sobre min-inline-size.
`overflow`	`"visible" \| "hidden"`	Define el comportamiento de desbordamiento del elemento. - `hidden`: recorta el contenido cuando es más grande que el contenedor del elemento. El elemento no se podrá desplazar y los usuarios no podrán acceder al contenido recortado arrastrando ni usando la rueda del mouse. - `visible`: el contenido que sobrepasa el contenedor del elemento es visible.
`padding`	`MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>`	El relleno aplicado a todos los bordes del componente. Admite la sintaxis de 1 a 4 valores con valores relativos al flujo: - 1 valor se aplica a todos los lados - 2 valores se aplican a block (arriba/abajo) e inline (izquierda/derecha) - 3 valores se aplican a block-start (arriba), inline (izquierda/derecha) y block-end (abajo) - 4 valores se aplican a block-start (arriba), inline-end (derecha), block-end (abajo) e inline-start (izquierda) Ejemplos:* `base`, `large none`, `base large-100 base small` Usa `auto` para heredar el relleno del contenedor más cercano con el relleno eliminado. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`paddingBlock`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	El relleno en la dirección de bloque (arriba y abajo en modos de escritura horizontales). Acepta un solo valor para ambos lados o dos valores separados por espacios para block-start y block-end. Ejemplo:* `large none` aplica `large` arriba y `none` abajo. Sobrescribe el valor de bloque de `padding`. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`paddingBlockEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	El relleno block-end (abajo en modos de escritura horizontales). Sobrescribe el valor block-end de `paddingBlock`. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`paddingBlockStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	El relleno block-start (arriba en modos de escritura horizontales). Sobrescribe el valor block-start de `paddingBlock`. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`paddingInline`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	El relleno en la dirección en línea (izquierda y derecha en modos de escritura horizontales). Acepta un solo valor para ambos lados o dos valores separados por espacios para inline-start e inline-end. Ejemplo:* `large none` aplica `large` a la izquierda y `none` a la derecha. Sobrescribe el valor en línea de `padding`. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`paddingInlineEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	El relleno inline-end (derecha en modos de escritura LTR, izquierda en RTL). Sobrescribe el valor inline-end de `paddingInline`. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`paddingInlineStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	El relleno inline-start (izquierda en modos de escritura LTR, derecha en RTL). Sobrescribe el valor inline-start de `paddingInline`. También acepta una cadena de valor adaptable con el `PaddingKeyword` admitido como valor de consulta.
`placeContent`	`"normal normal" \| "normal stretch" \| "normal center" \| "normal start" \| "normal end" \| "normal unsafe center" \| "normal unsafe start" \| "normal unsafe end" … (3 more)`	Una propiedad abreviada para `justify-content` y `align-content`.
`placeItems`	`AlignItemsKeyword \| "normal normal" \| "normal stretch" \| "normal baseline" \| "normal first baseline" \| "normal last baseline" \| "normal center" \| "normal start" … (2 more)`	Una propiedad abreviada para `justify-items` y `align-items`.
`rowGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	Ajusta el espaciado entre elementos en el eje de bloque. Reemplaza el valor de fila de `gap`. Acepta: - Un único valor de `SpacingKeyword`, como `large-100` - Una cadena de valor adaptable con el SpacingKeyword admitido como valor de consulta

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).

Slots

Slot	Descripción
`default`	Los elementos hijos que se muestran dentro del componente de cuadrícula, organizados en un diseño de cuadrícula flexible con columnas, filas y espaciado configurables.

SGrid <s-grid> ​

Buenas prácticas ​

Ejemplo ​

Props ​

Slots ​

SGrid `<s-grid>`

Buenas prácticas

Ejemplo

Props

Slots