button - Mobile Platform as a Service: Central de Documentação do Alibaba Cloud

Este tópico descreve o componente button.

Atributo	Tipo	Valor padrão	Descrição	Versão mínima
size	String	default	Os valores possíveis são default e mini.	-
type	String	default	Estilo do botão, que pode ser primary, default ou warn.	-
plain	Boolean	false	Define se o botão é vazado.	-
disabled	Boolean	false	Indica se o botão deve ser desabilitado.	-
loading	Boolean	false	Especifica se o texto do botão exibe o ícone de carregamento.	-
hover-class	String	button-hover	Classe de estilo aplicada quando o botão é pressionado. `hover-class="none"` remove o efeito de clique.	-
hover-start-time	Number	20	Tempo em milissegundos para que o estado de clique seja ativado.	-
hover-stay-time	Number	70	Duração em milissegundos do estado de clique após o usuário soltar o dedo.	-
hover-stop-propagation	Boolean	false	Impede que elementos ancestrais do elemento atual entrem no estado de clique.	1.10.0
form-type	String	-	Valores aceitos: submit e reset. Utilizado em componentes de formulário para acionar os eventos de envio ou redefinição ao clicar.	-
open-type	String	-	Capacidades de abertura.	1.1.0
scope	String	-	Atributo válido apenas quando `open-type` está definido como `getAuthorize`.	1.11.0
onTap	EventHandle	-	Evento de toque.	-

Valores válidos para open-type

Valor	Descrição	Versão mínima
Share	Aciona o compartilhamento personalizado. Verifique a disponibilidade executando `canIUse('button.open-type.share')`.	1.1.0
getAuthorize	Habilita a autorização do Mini Program. Consulte o suporte executando `canIUse('button.open-type.getAuthorize')`.	1.11.0
contactShare	Permite compartilhar com amigos da lista de contatos. Valide o recurso executando `canIUse('button.open-type.contactShare')`.	1.11.0

Valores válidos para scope

Quando open-type estiver configurado como getAuthorize, defina scope com um dos seguintes valores:

Valor	Descrição	Versão mínima
phoneNumber	Exibe a interface de autorização para que o usuário permita ao Mini Program obter seu número de celular.	1.11.0

Exemplo de código

<view class="page">
  <view class="section">
    <view class="title">Type</view>
    <button type="default">default</button>
    <button type="primary">primary</button>
    <button type="warn">warn</button>
  </view>
  <view class="section" style="background:#ddd;">
    <view class="title">Misc</view>
    <button type="default" plain>plain</button>
    <button type="default" disabled>disabled</button>
    <button type="default" loading={{true}}>loading</button>
    <button type="default" hover-class="red">hover-red</button>
  </view>
  <view class="section">
    <view class="title">Size</view>
    <button type="default" size="mini">mini</button>
  </view>
  <view class="section">
    <view class="title">Type</view>
    <form onSubmit="onSubmit" onReset="onReset">
      <button form-type="submit">submit</button>
      <button form-type="reset">reset</button>
    </form>
  </view>
</view>