SClickable <s-clickable>

Torna qualquer conteúdo clicável como botão ou link, sem impor o estilo de botão. SClickable é o wrapper de Vue 3 tipado do web component <s-clickable> do Shopify Polaris.

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

Boas práticas

• Rotule elementos sem texto visível. Se nada dentro da área clicável for texto legível, defina accessibilityLabel para que os usuários de leitores de tela saibam para que ela serve.
• Escolha o modo adequado. Use-o como botão para acionar ações, dê a ele um href para navegar e defina type="submit" quando ele enviar um formulário.
• Explique os estados desativados. Ao definir disabled, deixe o estado visualmente claro e adicione um texto que diga aos lojistas por que o elemento não pode ser usado.

Veja as boas práticas da Shopify para <s-clickable> (em inglês) para todas as recomendações.

Exemplo

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <!-- SClickable is a generic, unstyled-by-default interactive container: box
       styling props (background, padding, borderRadius, ...) plus a click event. -->
  <SClickable
    background="subdued"
    borderRadius="200"
    padding="base"
    @click="clicks++"
  >
    <SText>Clicked {{ clicks }} times</SText>
  </SClickable>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do elemento. Quando definido, é anunciado aos usuários de tecnologias assistivas e oferece mais contexto a eles. Use-o apenas quando o conteúdo do elemento não oferecer contexto suficiente para usuários de tecnologias assistivas.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Define o significado semântico do conteúdo do componente. Quando definido, o papel (role) é usado pelas tecnologias assistivas para ajudar os usuários a navegar pela página.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Altera a visibilidade do elemento. - visible: o elemento fica visível para todos os usuários. - hidden: o elemento é removido da árvore de acessibilidade, mas continua visível. - exclusive: o elemento fica visualmente oculto, mas permanece na árvore de acessibilidade.
background	"subdued" | "base" | "strong" | "transparent"	A cor de fundo do componente.
blockSize	"auto" | "0"	O tamanho vertical do elemento em layouts padrão (altura em modos de escrita da esquerda para a direita ou da direita para a esquerda). O tamanho em bloco se ajusta de acordo com a direção da escrita: em layouts horizontais, controla a altura; em layouts verticais, controla a largura. Isso garante um comportamento consistente em diferentes direções de texto. Saiba mais sobre block-size.
border	BorderShorthand	Uma borda aplicada com sintaxe abreviada para especificar a largura, a cor e o estilo em uma única propriedade.
borderColor	"subdued" | "base" | "strong"	A cor da borda usando a escala de cores do design system. Quando definida, substitui o valor de cor especificado na propriedade border. Escolha entre subdued, base ou strong de acordo com a ênfase visual necessária.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	O arredondamento dos cantos do elemento, usando a escala de raio do design system. Suporta a sintaxe de 1 a 4 valores para especificar raios diferentes por canto. Use isto para criar cantos arredondados ou elementos totalmente arredondados.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	O estilo visual da borda em todos os lados, como sólida, tracejada ou pontilhada. Quando definido, sobrescreve o valor de estilo especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar estilos diferentes por lado.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	A espessura da borda em todos os lados. Quando definida, sobrescreve o valor de largura especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar larguras diferentes por lado.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Define a ação que o commandFor deve executar quando este elemento clicável é ativado. Consulte a documentação de cada componente para ver as ações compatíveis. - --auto: uma ação padrão para o componente de destino. - --show: exibe o componente de destino. - --hide: oculta o componente de destino. - --toggle: alterna o componente de destino. - --copy: copia o ClipboardItem de destino.
commandFor	string	ID de um componente que deve responder às ativações (por exemplo, cliques) neste componente. Consulte command para saber como controlar o comportamento do destino.
disabled	boolean	Se o componente está desabilitado, impedindo cliques e foco. Quando desabilitado, o evento click não é disparado e os eventos de clique dos elementos filhos param de se propagar imediatamente. Os elementos filhos interativos ainda podem receber foco e ser usados. Isso não aplica nenhum estilo visual por padrão. Você deve aplicar o estilo de desabilitado conforme necessário.
display	"auto" | "none"	O tipo de display externo do componente. O tipo externo define como o componente participa do layout de fluxo. - auto o valor inicial do componente. O valor real depende do componente e do contexto. - none oculta o componente e o remove da árvore de acessibilidade, tornando-o invisível para leitores de tela.
download	string	Faz com que o navegador trate a URL vinculada como um download, usando a string como nome do arquivo. O download só funciona com URLs de mesma origem ou com os esquemas blob: e data:.
href	string	A URL do link. - Se definida, navegará para o local especificado por href após executar o evento click. - Se um commandFor estiver definido, o command será executado em vez da navegação.
inlineSize	"auto" | "0"	A largura em modos de escrita horizontais, ou a altura em modos de escrita verticais. Use isto para um dimensionamento relativo ao fluxo que se adapta à direção do texto. Saiba mais sobre inline-size.
interestFor	string	ID de um componente que deve responder ao interesse (por exemplo, passar o cursor e focar) neste componente.
lang	string	O idioma do conteúdo de texto. Use isto quando o texto estiver em um idioma diferente do restante da página, permitindo que tecnologias assistivas, como leitores de tela, usem a pronúncia correta. O valor deve ser um subtag de idioma válido do registro de subtags de idioma da IANA.
loading	boolean	Se o componente está em estado de carregamento, o que indica às tecnologias assistivas que uma ação está em andamento e impede a interação.
maxBlockSize	"none" | "0"	A altura máxima em modos de escrita horizontais, ou a largura máxima em modos de escrita verticais. Impede que o elemento cresça além desse tamanho. Saiba mais sobre max-block-size.
maxInlineSize	"none" | "0"	A largura máxima em modos de escrita horizontais, ou a altura máxima em modos de escrita verticais. Impede que o elemento cresça além desse tamanho. Saiba mais sobre max-inline-size.
minBlockSize	"0"	A altura mínima em modos de escrita horizontais, ou a largura mínima em modos de escrita verticais. Impede que o elemento encolha abaixo desse tamanho. Saiba mais sobre min-block-size.
minInlineSize	"0"	A largura mínima em modos de escrita horizontais, ou a altura mínima em modos de escrita verticais. Impede que o elemento encolha abaixo desse tamanho. Saiba mais sobre min-inline-size.
overflow	"visible" | "hidden"	Define o comportamento de overflow do elemento. - hidden: corta o conteúdo quando ele é maior que o contêiner do elemento. O elemento não poderá ser rolado e os usuários não conseguirão acessar o conteúdo cortado arrastando ou usando a roda do mouse. - visible: o conteúdo que ultrapassa o contêiner do elemento fica visível.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	O padding aplicado a todas as bordas do componente. Suporta a sintaxe de 1 a 4 valores com valores relativos ao fluxo: - 1 valor se aplica a todos os lados - 2 valores se aplicam a block (topo/base) e inline (esquerda/direita) - 3 valores se aplicam a block-start (topo), inline (esquerda/direita) e block-end (base) - 4 valores se aplicam a block-start (topo), inline-end (direita), block-end (base) e inline-start (esquerda) Exemplos:* base, large none, base large-100 base small Use auto para herdar o padding do contêiner mais próximo com padding removido. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	O espaçamento interno na direção de bloco (em cima e embaixo em modos de escrita horizontais). Aceita um único valor para os dois lados ou dois valores separados por espaço para block-start e block-end. Exemplo:* large none aplica large em cima e none embaixo. Substitui o valor de bloco de padding. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O espaçamento interno block-end (embaixo em modos de escrita horizontais). Substitui o valor block-end de paddingBlock. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O espaçamento interno block-start (em cima em modos de escrita horizontais). Substitui o valor block-start de paddingBlock. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	O padding na direção em linha (esquerda e direita em modos de escrita horizontais). Aceita um único valor para os dois lados ou dois valores separados por espaço para inline-start e inline-end. Exemplo:* large none aplica large à esquerda e none à direita. Sobrescreve o valor em linha de padding. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O padding no fim da linha (direita em modos de escrita LTR, esquerda em RTL). Sobrescreve o valor inline-end de paddingInline. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O padding no início da linha (esquerda em modos de escrita LTR, direita em RTL). Sobrescreve o valor inline-start de paddingInline. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Especifica onde exibir a URL vinculada.
type	"button" | "reset" | "submit"	O comportamento do Button. - submit: indica que o componente funciona como um botão de envio, ou seja, envia o formulário mais próximo. - button: indica que o componente funciona como um botão, ou seja, não tem nenhuma ação padrão. - reset: indica que o componente funciona como um botão de redefinição, ou seja, redefine o formulário mais próximo (retornando os campos aos valores padrão). Esta propriedade é ignorada se o componente oferecer suporte a href ou commandFor/command e um deles estiver definido.

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Escute-os com listeners no estilo @blur em <SClickable>.

Slots

Slot	Descrição
default	O conteúdo exibido dentro do componente clicável, que torna qualquer conteúdo interativo e clicável sem o significado semântico de um botão ou link.