CrappUIButton

O CrappUIButton é um botão que se adapta ao layout e aos estilos definidos, proporcionando uma aparência coerente e responsiva, alinhando-se às demandas de interfaces moderna e dinâmicas.

Características	Valor
Class	crapp.ui.display.button.CrappUIButton
Extends	CrappUIDisplay
Style Tag	CrappUIStyleDefaultTagType.BUTTON
Composites	OverEffectComposite, ButtonableComposite, DisabledEffectComposite

Exemplos

<priori>
    <imports>
        <crapp.ui.display.button.CrappUIButton />
        <crapp.ui.display.layout.CrappUILayout />
    </imports>
    <view>
        <private:CrappUILayout hLayoutAlignment="CENTER" vLayoutDistribution="SIDE" vLayoutGap="10" left="10" right="10" top="10" bottom="10" >
            <private:CrappUIButton />
            <private:CrappUIButton label="MY LABEL" />
            <private:CrappUIButton id="red" />
            <private:CrappUIButton id="small" />
            <private:CrappUIButton label="DISABLED" disabled=":true" />
            <private:CrappUIButton autoSize=":false" width="200" />
            <private:CrappUIButton id="noborder" label="NO BORDER" />
            <private:CrappUILayout vLayoutSize="FIT" hLayoutSize="FLEX" hLayoutDistribution="SIDE" hLayoutGap="10" >
                <private:CrappUIButton hLayoutSize="FLEX" />
                <private:CrappUIButton hLayoutSize="FLEX" />
                <private:CrappUIButton hLayoutSize="FLEX" />
            </private:CrappUILayout>
        </private:CrappUILayout>
    </view>
</priori>

Propriedades do Componente

• id: Permite identificar o elemento para manipulá-lo de forma individual.

• label: Define o texto exibido no botão. No exemplo, um botão é criado com o rótulo "MY LABEL".

• disabled: Quando definido (por exemplo, disabled=":true"), desativa a interação com o botão. O botão torna-se semi transparene quando desabilitado.

• autoSize: Controla se o botão deve ajustar seu tamanho automaticamente. Definido como ":false", por exemplo, permite configurar manualmente a largura.

• width: Em conjunto com autoSize, possibilita definir um tamanho fixo (como width="200").

• hLayoutSize: O parâmetro hLayoutSize pode gerar alguns efeitos automáticos na renderização do botão:

  • FIT: O botão aplica autoSize = true, ou seja, o tamanho é calculado com base no conteúdo (por exemplo, a largura da label).

  • FLEX: Define autoSize como false e força a largura do botão a ser igual à largura definida pelo layout do elemento pai, permitindo que o botão se ajuste de forma flexível dentro do espaço disponível, caso o elemento pai esteja configurado para distribuir os elementos filhos.

  • FIXED: O botão assume uma largura fixa conforme o valor especificado no layout, sem ajuste dinâmico com base no conteúdo, através da propriedade width.

Propriedades Não Recomendadas

• height: Não é recomendado definir diretamente a altura de um botão. Ela é calculada automaticamente pelo compoentente.

Efeitos do Estilo

• style.color: Define a cor de fundo do botão.

• style.on_color: Define a cor do texto do botão. A cor da borda também poderá ser impactada pelo on_color caso a luminosidade do on_color for maior que a cor definida em color.

• style.space: O valor de space definido no estilo é usado para ajustar o tamanho do botão e da label. Por exemplo, o cálculo da altura utiliza a altura da label acrescida de duas vezes o espaço, e o cálculo da largura depende da propriedade autoSize. Se autoSize for verdadeira, a largura é definida com base na largura da label (mais um fator do espaço); caso contrário, a largura da label é ajustada com base na largura total menos um valor derivado do space.

• style.corners: A propriedade style.corners é utilizada para calcular o arredondamento dos cantos.

• style.prevent_border: O estilo determina se uma borda deve ser aplicada. Se style.prevent_border for verdadeiro ou se a luminosidade da cor on_color for maior ou igual à cor base, a borda é desativada. Caso contrário, é criada uma borda com a cor definida em style.on_color.