Quick App UI Components

# List of Items (list)

# Description

Displays text, images, and paragraphs in a list.

# Usage result

# How to use it

Importing a component in a .ux file:

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

# Example

<template>
  <div class="qaui-wrap">
    <q-list
      title="List Title"
      data="{{ listData }}"
      onitem-tap="itemTap"
      onsamll-btn-tap="smallBtnTap"
      onswitch-tap="switchTap"
    ></q-list>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
export default {
  data() {
    return {
      listData: [
        {
          title: 'Title text',
        },
        {
          title: 'Title text',
          extra: 'rightArrow',
        },
        {
          title: 'Title text',
          rightText: 'Result Text',
        },
        {
          title: 'Title text',
          rightText: 'Result Text',
          extra: 'rightArrow',
        },
        {
          title: 'Title text',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: 'Title text',
          extra: 'button',
          rightBtnText: 'Button',
        },
        {
          title: 'Title Text #1',
          iconType: 'bill-fill',
          extra: 'rightArrow',
        },
        {
          title: 'Title Text #1',
          iconType: 'bill-fill',
          rightText: 'Result Text',
          extra: 'rightArrow',
        },
        {
          title: 'Title Text #1',
          iconType: 'bill-fill',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: 'Title Text #4',
          thumb: '../../common/logo.png',
        },
        {
          title: 'Title text',
          description: 'This is a section of Description Text',
        },
        {
          title: 'Title text',
          description: 'This is a section of Description Text',
          extra: 'rightArrow',
        },
        {
          title: 'Title text',
          description: 'This is a section of Description Text',
          rightText: 'Result Text',
        },
        {
          title: 'Title text',
          description: 'This is a section of Description Text',
          extra: 'rightArrow',
          rightText: 'Result Text',
        },
        {
          title: 'Title text',
          description: 'This is a section of Description Text',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: 'Title text',
          description: 'This is a section of Description Text',
          extra: 'button',
          rightBtnText: 'Button',
        },
        {
          title: 'Title Text #1',
          iconType: 'bill-fill',
          description: 'This is a section of Description Text',
          extra: 'rightArrow',
        },
        {
          title: 'Title Text #2',
          description: 'This is a section of Description Text2',
          iconType: 'bill-fill',
          rightText: 'Result Text',
          extra: 'rightArrow',
        },
        {
          title: 'Title Text #2',
          description: 'This is a section of Description Text2',
          iconType: 'bill-fill',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: 'Title Text #2',
          description: 'This is a section of Description Text2',
          iconType: 'bill-fill',
          extra: 'button',
          rightBtnText: 'Button',
        },
        {
          title: 'Title Text #3',
          description: 'This is a section of Description Text2',
          thumb: '../../common/logo.png',
        },
      ],
    }
  },

  itemTap(data) {
    const index = data.detail.index
    this.listData[index].title = `Selected ${index}行`
  },

  smallBtnTap(data) {
    const index = data.detail.index
    this.listData[index].title = `Select the small button ${index}`
  },

  switchTap(data) {
    const index = data.detail.index
    this.listData[index].title = `Select the switch button ${index}`
  },
}
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

# API

# Component Properties

Attribute Type Value by default Description
data Array [] Source of data for the list
# data Object Attributes
Attribute Type Description
title String Title of the list
description String Descriptive text of the list
iconType String Icon type on the left of the list. For details, see the icon component.
thumb String Thumbnail path to be included on the left of the list
extra String Extra content, which is displayed on the right of the list. The options are: 'rightArrow' | 'switch' | 'button'
rightBtnText String Text of the button placed on the right of the list
rightText String Text placed on the right of the list
switchValue Boolean Initial value of the switch on the right of the list

# Component Events

Event name Event description Value returned
itemTap A list item is clicked {detail：{index: Index of the current click}}
smallBtnTap Triggered when extra is 'button' and the button is clicked {detail：{index: Index of the current click}}
switchTap Triggered when the value of extra is 'switch' and the switch component is clicked {detail：{index: Index of the current click, active: Current value of the switch}}

← Steps Bar (steps) →