Componentes
62 wrappers de Vue tipados, um para cada web component do Polaris, agrupados como na referência oficial da Shopify.
Ações
- SButton<s-button>Executa uma ação ou navega, com variantes primary, secondary e tertiary, ícones e um estado de carregamento.
- SButtonGroup<s-button-group>Agrupa um conjunto de botões relacionados, como uma ação principal e suas ações secundárias.
- SClickable<s-clickable>Torna qualquer conteúdo clicável como botão ou link, sem impor o estilo de botão.
- SClickableChip<s-clickable-chip>Um chip interativo que pode ser clicado, seguido como link ou removido; útil para filtros e tags aplicadas.
- SLink<s-link>Um link de texto que navega para outra página ou URL, ou executa um comando.
- SMenu<s-menu>Uma lista de ações exibida em uma sobreposição, aberta a partir de um botão.
- SPressButton<s-press-button>Um botão de alternância que fica pressionado ou não pressionado, para ativar e desativar um modo ou um filtro.
Feedback e status
- SBadge<s-badge>Um pequeno rótulo que mostra o status de um objeto, como um pedido, um pagamento ou um envio.
- SBanner<s-banner>Uma mensagem em destaque que exibe informações importantes, avisos ou erros no topo de uma página ou seção.
- SEmptyState<s-empty-state>Explica por que uma visualização ainda não tem conteúdo e indica aos lojistas a primeira ação a realizar.
- SProgress<s-progress>Uma barra de progresso que mostra quanto uma tarefa já avançou em direção ao seu valor máximo.
- SSpinner<s-spinner>Um indicador animado de que um conteúdo ou uma ação está carregando.
Formulários
- SCheckbox<s-checkbox>Uma caixa de seleção individual para uma escolha de sim ou não, vinculada ao seu estado checked com v-model.
- SChoice<s-choice>Uma opção dentro de uma lista de opções.
- SChoiceList<s-choice-list>Um grupo de botões de opção ou caixas de seleção para escolher uma ou várias opções.
- SColorField<s-color-field>Um campo de texto para inserir um valor de cor, com um canal alfa opcional.
- SColorPicker<s-color-picker>Um controle visual para escolher uma cor.
- SDateField<s-date-field>Um campo para inserir uma data.
- SDatePicker<s-date-picker>Um calendário para selecionar uma única data ou um intervalo de datas.
- SDropZone<s-drop-zone>Uma área de upload de arquivos que aceita arquivos por arrastar e soltar ou por um seletor de arquivos.
- SEmailField<s-email-field>Um campo de texto para endereços de e-mail.
- SMoneyField<s-money-field>Um campo numérico para valores monetários.
- SNumberField<s-number-field>Um campo numérico com mínimo, máximo e incremento opcionais.
- SOption<s-option>Uma opção dentro de um select.
- SOptionGroup<s-option-group>Agrupa opções relacionadas dentro de um select sob um rótulo comum.
- SPasswordField<s-password-field>Um campo de texto para senhas que oculta o que é digitado.
- SSearchField<s-search-field>Um campo de texto para consultas de pesquisa.
- SSelect<s-select>Uma lista suspensa para escolher uma opção de uma lista.
- SSwitch<s-switch>Um interruptor que ativa ou desativa uma configuração.
- STextArea<s-text-area>Um campo de texto de várias linhas para conteúdo mais longo, como notas ou descrições.
- STextField<s-text-field>Um campo de texto de uma linha com rótulo, placeholder, erro de validação e texto de ajuda.
- SUrlField<s-url-field>Um campo de texto para endereços web.
Layout e estrutura
- SBox<s-box>Um contêiner genérico para espaçamento interno, fundo, borda, raio e dimensionamento.
- SDivider<s-divider>Uma linha horizontal ou vertical que separa conteúdo.
- SGrid<s-grid>Um contêiner de CSS grid para organizar conteúdo em linhas e colunas.
- SGridItem<s-grid-item>Um filho de um grid que pode ocupar várias colunas ou linhas.
- SListItem<s-list-item>Um item dentro de uma lista ordenada ou não ordenada.
- SOrderedList<s-ordered-list>Uma lista numerada.
- SPage<s-page>O layout de página de nível superior, com um título, ações de página e áreas de conteúdo.
- SQueryContainer<s-query-container>Transforma um elemento em um contêiner de tamanho para que seus filhos se adaptem à largura dele com container queries.
- SScrollBox<s-scroll-box>Um contêiner que rola seu conteúdo quando ele transborda.
- SSection<s-section>Agrupa conteúdo relacionado, com título, subtítulo e ações opcionais.
- SStack<s-stack>Organiza seus filhos em uma linha ou coluna com espaçamento e alinhamento consistentes.
- STable<s-table>Uma tabela para dados estruturados, com paginação opcional, um estado de carregamento e um layout de lista em telas pequenas.
- STableBody<s-table-body>O corpo de uma tabela, que contém suas linhas de dados.
- STableCell<s-table-cell>Uma célula em uma linha de tabela.
- STableHeader<s-table-header>Um cabeçalho de coluna em uma tabela.
- STableHeaderRow<s-table-header-row>A linha de cabeçalhos de coluna no topo de uma tabela.
- STableRow<s-table-row>Uma linha de dados em uma tabela.
- SUnorderedList<s-unordered-list>Uma lista com marcadores.
Mídia e elementos visuais
- SAvatar<s-avatar>Mostra a imagem de uma pessoa ou empresa, ou as iniciais dela quando não há imagem.
- SIcon<s-icon>Exibe um ícone do conjunto de ícones do Polaris pelo nome.
- SImage<s-image>Exibe uma imagem com controle sobre proporção, ajuste, bordas e carregamento lento.
- SThumbnail<s-thumbnail>Uma pequena imagem de pré-visualização, de tamanho fixo, de um produto ou arquivo.
Sobreposições
Tipografia e conteúdo
- SChip<s-chip>Um rótulo estático para uma tag ou um atributo, que pode ser removível.
- SHeading<s-heading>Um título que nomeia uma seção da página.
- SNumber<s-number>Exibe um número que você já formatou, com estilos de tipografia, tom e cor.
- SParagraph<s-paragraph>Um bloco de texto de corpo.
- SText<s-text>Texto em linha com estilos de tom, peso e ênfase.
- STooltip<s-tooltip>Um rótulo curto que aparece quando outro elemento recebe o cursor ou o foco.