Quick App UI Components

# Filter Bar (filter)

# Description

Component used to filter data.

# Usage result

# How to use it

Importing a component in a .ux file:

<import name="q-filter" src="../../components/filter"></import>
1

# Example

<template>
  <div class="wrap">
    <q-filter
      bar-option="{{barOption}}"
      popup-option="{{popupOption}}"
      show-filter-icon="{{showFilterIcon}}"
      onselect-bar="handleSelectBar"
      onselect-popup="handleSelectPopup"
    ></q-filter>
    <div style="flex-direction: column">
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
      <text>Some text</text>
    </div>
  </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
export default {
  data: {
    barOption: [
      {
        type: 'drawer',
        label: 'Title text',
        value: 'barValue1',
        select: 'radio',
        direction: 'column',
        children: [
          {
            label: 'Description Text',
            value: 'value1',
          },
          {
            label: 'Description Text',
            value: 'value2',
          },
          {
            label: 'Description Text',
            value: 'value3',
          },
          {
            label: 'Description Text',
            value: 'value4',
            size: 'large',
          },
          {
            label: 'Description Text',
            value: 'value5',
          },
        ],
      },
      {
        type: 'singleState',
        label: 'Title text',
        value: 'barValue2',
      },
      {
        type: 'sort',
        label: 'Title text',
        value: 'barValue3',
      },
    ],
    popupOption: [
      {
        type: 'radio',
        label: 'Title text',
        value: 'popupValue1',
        children: [
          {
            label: 'Description Text',
            value: 'value1',
          },
          {
            label: 'Description Text',
            value: 'value2',
          },
          {
            label: 'Description Text',
            value: 'value3',
          },
          {
            label: 'Description Text',
            value: 'value4',
          },
          {
            label: 'Description Text',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: 'Title text',
        value: 'popupValue2',
        children: [
          {
            label: 'Description Text',
            value: 'value1',
          },
          {
            label: 'Description Text',
            value: 'value2',
          },
          {
            label: 'Description Text',
            value: 'value3',
          },
          {
            label: 'Description Text',
            value: 'value4',
          },
          {
            label: 'Description Text',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: 'Title text',
        value: 'popupValue3',
        children: [
          {
            hasSecond: true,
            firstLabel: 'Subtitle',
            secondLabel: 'Secondary text',
            value: 'value1',
          },
          {
            hasSecond: true,
            firstLabel: 'Subtitle',
            secondLabel: 'Secondary text',
            value: 'value2',
          },
          {
            hasSecond: true,
            firstLabel: 'Subtitle',
            secondLabel: 'Secondary text',
            value: 'value3',
          },
        ],
      },
      {
        type: 'range',
        label: 'Title text',
        value: 'popupValue3',
        leftRange: {
          default: '100',
          placeholder: 'Enter some text',
        },
        rightRange: {
          default: '',
          placeholder: 'Enter some text',
        },
      },
      {
        type: 'checkbox',
        label: 'Title text',
        value: 'popupValue3',
        canFold: true,
        isFolded: false,
        children: [
          {
            label: 'Description Text',
            value: 'value1',
          },
          {
            label: 'Description Text',
            value: 'value2',
          },
          {
            label: 'Description Text',
            value: 'value3',
          },
          {
            label: 'Description Text',
            value: 'value4',
          },
          {
            label: 'Description Text',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: 'Title text',
        value: 'popupValue3',
        canFold: true,
        isFolded: true,
        children: [
          {
            label: 'Description Text',
            value: 'value1',
          },
          {
            label: 'Description Text',
            value: 'value2',
          },
          {
            label: 'Description Text',
            value: 'value3',
          },
          {
            label: 'Description Text',
            value: 'value4',
          },
          {
            label: 'Description Text',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: 'Title text',
        value: 'popupValue3',
        canFold: true,
        isFolded: true,
        children: [
          {
            label: 'Description Text',
            value: 'value1',
          },
          {
            label: 'Description Text',
            value: 'value2',
          },
          {
            label: 'Description Text',
            value: 'value3',
          },
          {
            label: 'Description Text',
            value: 'value4',
          },
          {
            label: 'Description Text',
            value: 'value5',
          },
        ],
      },
    ],
    showFilterIcon: true,
    drawerTop: '40px',
  },

  handleSelectBar(e) {
    console.log('The selected items are:', e.detail.barResult)
  },

  handleSelectPopup(e) {
    console.log('The selected items are:', e.detail.popupResult)
  },
}
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
.wrap {
  flex-direction: column;
}
1
2
3

# API

# Component Properties

Attribute Type Value by default Description
barOption Array [] Top filter bar setup items
popupOption Array [] Filter dialog box setup items
showFilterIcon Boolean true Display the filter button

# bar-option Attributes

Attribute Type Value by default Description
type String '' Filter item type. Values can be: drawer, singleState, sort
label String '' Description of the filter item
value String '' Value of the filter item
select String '' Indicates whether to select one or multiple items in a drawer. This parameter is valid only when type is set to drawer.
direction String '' Arrangement mode of subitems in a drawer. The options are: column and row. This parameter is valid only when type is set to drawer.
children Array [] Children. This parameter is valid only when type is set to drawer.
children.label String '' Description of the child element
children.value String '' Value of the child element
children.size String 'small' Size of a child element. The options are small, middle, and large.
Attribute Type Value by default Description
type String '' Filter item type. The options are: radio, checkbox, and range.
label String '' Description of the filter item
value String '' Value of the filter item
canFold Boolean false Whether the filter item is collapsible or not
isFolded Boolean false Check whether the filter item is collapsed
children Array [] Children elements
children.label String '' Description of the child element
children.value String '' Value of the child element
leftRange Object {} Left text box configuration. This parameter is valid only when type is set to range.
leftRange.default String '' Default value of the left text box
leftRange.placeholder String '' Placeholder of the left text box
rightRange Object {} Right text box configuration. This parameter is valid only when type is set to range.
rightRange.default String '' Default value of the right text box
rightRange.placeholder String '' Placeholder text of the right text box

# Component Events

Event name Event description Value returned
selectBar Selection in the filter bar {value:value}
selectPopup Clicked the OK button in the search box. [ {value:value} ]

← Radio Button (radio) →