Quick App UI Components

# Heading (title)

# Description

It is used to display headings at different levels.

# Usage result

# How to use it

Importing a component in a .ux file:

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

# Example

<div class="qaui-wrap">
  <div class="group">
    <q-title title="External Heading"></q-title>
    <q-title title="External Heading" target="/pages/home"></q-title>
    <q-title
      title="External Heading"
      description="Description Text"
      target="/pages/home"
    ></q-title>
  </div>
  <div class="group bg-white">
    <q-title title="Internal Heading"></q-title>
    <q-title
      icon="/common/logo.png"
      title="Internal Heading"
      target="/pages/home"
    ></q-title>
    <q-title
      icon="/common/logo.png"
      title="Internal Heading"
      description="Description Text"
      target="/pages/home"
    ></q-title>
    <q-title icon="/common/logo.png" target="/pages/home"
      ><text class="custom"></text
    ></q-title>
  </div>
  <q-container flex-direction="column">
    <q-title title="Title Text"></q-title>
    <q-title
      icon="/common/logo.png"
      title="Title Text"
      target="/pages/home"
    ></q-title>
    <q-title
      icon="/common/logo.png"
      title="Title Text"
      description="Description Text"
      target="/pages/home"
    ></q-title>
    <q-title icon="/common/logo.png" target="/pages/home"
      ><text class="custom">Custom Styles</text></q-title
    >
  </q-container>
</div>
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
.qaui-wrap {
  background-color: #f6f6f6;
  flex-direction: column;
  .group {
    flex-direction: column;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .bg-white {
    background-color: #ffffff;
  }
  .custom {
    color: #456fff;
    font-size: 20px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# API

# Component Properties

Attribute Type Value by default Description
title String '' Title text
icon String '' URL or relative path of the icon
description String '' Descriptive text
target String '' Redirection path

# slot

Name Description
- Custom Title

← Icon (icon) →