Quick App UI Components

# Button (button)

# Description

Basic component for buttons.

# Usage result

# How to use it

Importing a component in a .ux file:

<import name="q-button" src="qaui/src/components/button/index"></import>
1

# Example

<template>
  <div class="qui-wrap">
    <div class="inline">
      <q-button class="button" type="primary" size="small">Primary</q-button>
      <q-button class="button" type="primary" size="small" disabled="{{true}}"
        >Primary</q-button
      >
    </div>
    <div class="inline">
      <q-button class="button" type="ghost" size="small">Ghost</q-button>
      <q-button class="button" type="ghost" size="small" disabled="{{true}}"
        >Ghost</q-button
      >
    </div>
    <q-button class="button" type="primary">Primary</q-button>
    <q-button class="button" type="primary" disabled="{{true}}"
      >Primary disabled</q-button
    >
    <q-button class="button" type="primary" loading="{{true}}"
      >Primary loading</q-button
    >

    <q-button class="button" type="ghost">Ghost</q-button>
    <q-button class="button" type="ghost" color="orange" loading="{{true}}"
      >Custom color</q-button
    >
    <q-button class="button" type="ghost" disabled="{{true}}"
      >Ghost disabled</q-button
    >

    <q-button class="button" type="error">Error</q-button>
    <q-button class="button" type="error" disabled="{{true}}"
      >Error disabled</q-button
    >

    <q-button class="button" bg-color="orange" color="#000"
      >Custom color</q-button
    >
    <q-button
      class="button"
      type="error"
      loading="{{true}}"
      bg-color="orange"
      color="#000"
      disabled="{{true}}"
      >Customized</q-button
    >
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.qui-wrap {
  flex-direction: column;
  align-items: center;
  .button {
    margin: 5px;
  }
}
1
2
3
4
5
6
7

# API

# Component Properties

Attribute Type Value by default Description
type String 'primary' Button type. The options are as follows: 'primary'|'ghost'|'error'
size String 'normal' Button size. The options are as follows: 'normal'|'small'
loading Boolean false Whether the button is being loaded or not
disabled Boolean false Whether the button is disabled or not
bgColor String '' Button background color
color String '' Button color (including text and border)
width Number '' Button width

# Component Events

Event name Event description Value returned
tap Click of button -

← Container (container) →