Componentes
62 wrappers de Vue tipados, uno por cada web component de Polaris, agrupados igual que en la referencia oficial de Shopify.
Acciones
- SButton<s-button>Ejecuta una acción o navega, con variantes primary, secondary y tertiary, iconos y un estado de carga.
- SButtonGroup<s-button-group>Agrupa un conjunto de botones relacionados, como una acción principal y sus acciones secundarias.
- SClickable<s-clickable>Hace que cualquier contenido se pueda pulsar como botón o enlace, sin imponer el estilo de botón.
- SClickableChip<s-clickable-chip>Un chip interactivo que se puede pulsar, seguir como enlace o eliminar; útil para filtros y etiquetas aplicadas.
- SLink<s-link>Un enlace de texto que navega a otra página o URL, o ejecuta un comando.
- SMenu<s-menu>Una lista de acciones que se muestra en una superposición y se abre desde un botón.
- SPressButton<s-press-button>Un botón de alternancia que permanece pulsado o no pulsado, para activar y desactivar un modo o un filtro.
Avisos y estado
- SBadge<s-badge>Una pequeña etiqueta que muestra el estado de un objeto, como un pedido, un pago o un envío.
- SBanner<s-banner>Un mensaje destacado que muestra información importante, advertencias o errores en la parte superior de una página o sección.
- SEmptyState<s-empty-state>Explica por qué una vista aún no tiene contenido e indica a los comerciantes la primera acción que deben realizar.
- SProgress<s-progress>Una barra de progreso que muestra cuánto ha avanzado una tarea hacia su valor máximo.
- SSpinner<s-spinner>Un indicador animado de que un contenido o una acción se está cargando.
Formularios
- SCheckbox<s-checkbox>Una casilla de verificación individual para una elección de sí o no, vinculada a su estado checked con v-model.
- SChoice<s-choice>Una opción dentro de una lista de opciones.
- SChoiceList<s-choice-list>Un grupo de botones de opción o casillas de verificación para elegir una o varias opciones.
- SColorField<s-color-field>Un campo de texto para introducir un valor de color, con un canal alfa opcional.
- SColorPicker<s-color-picker>Un control visual para elegir un color.
- SDateField<s-date-field>Un campo para introducir una fecha.
- SDatePicker<s-date-picker>Un calendario para seleccionar una sola fecha o un rango de fechas.
- SDropZone<s-drop-zone>Un área de carga de archivos que acepta archivos arrastrándolos y soltándolos o desde un selector de archivos.
- SEmailField<s-email-field>Un campo de texto para direcciones de correo electrónico.
- SMoneyField<s-money-field>Un campo numérico para importes monetarios.
- SNumberField<s-number-field>Un campo numérico con mínimo, máximo y paso opcionales.
- SOption<s-option>Una opción dentro de un select.
- SOptionGroup<s-option-group>Agrupa opciones relacionadas dentro de un select bajo una etiqueta común.
- SPasswordField<s-password-field>Un campo de texto para contraseñas que oculta lo que se escribe.
- SSearchField<s-search-field>Un campo de texto para consultas de búsqueda.
- SSelect<s-select>Una lista desplegable para elegir una opción de una lista.
- SSwitch<s-switch>Un interruptor que activa o desactiva un ajuste.
- STextArea<s-text-area>Un campo de texto de varias líneas para contenido más largo, como notas o descripciones.
- STextField<s-text-field>Un campo de texto de una línea con etiqueta, placeholder, error de validación y texto de ayuda.
- SUrlField<s-url-field>Un campo de texto para direcciones web.
Diseño y estructura
- SBox<s-box>Un contenedor genérico para relleno, fondo, borde, radio y tamaño.
- SDivider<s-divider>Una línea horizontal o vertical que separa contenido.
- SGrid<s-grid>Un contenedor de CSS grid para organizar contenido en filas y columnas.
- SGridItem<s-grid-item>Un hijo de una cuadrícula que puede abarcar varias columnas o filas.
- SListItem<s-list-item>Un elemento dentro de una lista ordenada o desordenada.
- SOrderedList<s-ordered-list>Una lista numerada.
- SPage<s-page>El diseño de página de nivel superior, con un encabezado, acciones de página y áreas de contenido.
- SQueryContainer<s-query-container>Convierte un elemento en un contenedor de tamaño para que sus hijos se adapten a su ancho con container queries.
- SScrollBox<s-scroll-box>Un contenedor que desplaza su contenido cuando se desborda.
- SSection<s-section>Agrupa contenido relacionado, con un encabezado, un subencabezado y acciones opcionales.
- SStack<s-stack>Organiza sus hijos en una fila o columna con espaciado y alineación coherentes.
- STable<s-table>Una tabla para datos estructurados, con paginación opcional, un estado de carga y un diseño de lista en pantallas pequeñas.
- STableBody<s-table-body>El cuerpo de una tabla, que contiene sus filas de datos.
- STableCell<s-table-cell>Una celda de una fila de tabla.
- STableHeader<s-table-header>Un encabezado de columna de una tabla.
- STableHeaderRow<s-table-header-row>La fila de encabezados de columna en la parte superior de una tabla.
- STableRow<s-table-row>Una fila de datos de una tabla.
- SUnorderedList<s-unordered-list>Una lista con viñetas.
Multimedia y elementos visuales
- SAvatar<s-avatar>Muestra la imagen de una persona o de una empresa, o sus iniciales cuando no hay imagen.
- SIcon<s-icon>Muestra un icono del conjunto de iconos de Polaris por su nombre.
- SImage<s-image>Muestra una imagen con control sobre la relación de aspecto, el ajuste, los bordes y la carga diferida.
- SThumbnail<s-thumbnail>Una pequeña imagen de vista previa de tamaño fijo de un producto o archivo.
Superposiciones
Tipografía y contenido
- SChip<s-chip>Un rótulo estático para una etiqueta o un atributo, que opcionalmente se puede eliminar.
- SHeading<s-heading>Un encabezado que titula una sección de la página.
- SNumber<s-number>Muestra un número que ya has formateado, con estilos de tipografía, tono y color.
- SParagraph<s-paragraph>Un bloque de texto de cuerpo.
- SText<s-text>Texto en línea con estilos de tono, grosor y énfasis.
- STooltip<s-tooltip>Una etiqueta breve que aparece al pasar el cursor sobre otro elemento o al darle el foco.