quasar/ui/src/components/chip/QChip.json at dev · hipertracker/quasar · GitHub

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
{
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/chip"
  },

  "props": {
    "dense": {
      "extends": "dense"
    },

    "size": {
      "type": "String",
      "desc": "QChip size name or a CSS unit including unit name",
      "examples": [ "xs", "sm", "md", "lg", "xl", "25px", "2rem" ],
      "category": "style"
    },

    "dark": {
      "extends": "dark"
    },

    "icon": {
      "extends": "icon"
    },

    "icon-right": {
      "extends": "icon"
    },

    "icon-remove": {
      "extends": "icon"
    },

    "icon-selected": {
      "extends": "icon"
    },

    "label": {
      "type": [ "String", "Number" ],
      "desc": "Chip's content as string; overrides default slot if specified",
      "examples": [ "John Doe", "Book" ],
      "category": "content"
    },

    "color": {
      "extends": "color"
    },

    "text-color": {
      "extends": "text-color"
    },

    "model-value": {
      "extends": "model-value",
      "type": "Boolean",
      "desc": "Model of the component determining if QChip should be rendered or not",
      "required": false,
      "default": true
    },

    "selected": {
      "type": "Boolean",
      "sync": true,
      "desc": "Model for QChip if it's selected or not",
      "examples": [
        "v-model:selected=\"myState\""
      ],
      "category": "model"
    },

    "square": {
      "extends": "square",
      "desc": "Sets a low value for border-radius instead of the default one, making it close to a square"
    },

    "outline": {
      "type": "Boolean",
      "desc": "Display using the 'outline' design",
      "category": "style"
    },

    "clickable": {
      "type": "Boolean",
      "desc": "Is QChip clickable? If it's the case, then it will add hover effects and emit 'click' events",
      "category": "state"
    },

    "removable": {
      "type": "Boolean",
      "desc": "If set, then it displays a 'remove' icon that when clicked the QChip emits 'remove' event",
      "category": "state"
    },

    "ripple": {
      "extends": "ripple"
    },

    "tabindex": {
      "extends": "tabindex"
    },

    "disable": {
      "extends": "disable"
    }
  },

  "slots": {
    "default": {
      "desc": "This is where QChip content goes, if not using 'label' property"
    }
  },

  "events": {
    "click": {
      "desc": "Emitted on QChip click if 'clickable' property is set",
      "params": {
        "evt": {
          "extends": "evt"
        }
      }
    },

    "update:selected": {
      "desc": "Used by Vue on 'v-model:selected' for updating its value",
      "params": {
        "state": {
          "type": "Boolean",
          "desc": "Selected state"
        }
      }
    },

    "remove": {
      "desc": "Works along with 'value' and 'removable' prop. Emitted when toggling rendering state of the QChip",
      "params": {
        "state": {
          "type": "Boolean",
          "desc": "Render state (render or not)"
        }
      }
    }
  }
}