Usuario:


Componentes

Storyboard

>Modelo

ID:(1240, 0)



q-select

Concepto

>Top


El formato para los selectores de datos q-select se define en la sección q-pag mediante

```

v-model='select'

float-label='Is Quasar Awesome?'

:options='selectOptions'

/>

```

Los datos se asignan con el formato:

```

selectOptions: [

{

label: 'Google',

value: 'goog'

},

{

label: 'Facebook',

value: 'fb'

}

]

```

Las propiedades son

Vue properties

Vue Property | Type | Description

-------------|------|----------------

:options | Array | (Required) A list of objects to present as the selections options.

multiple | Boolean | If set to true, multiple selections will be allowed.

radio | Boolean | If set to true, the selection will be through radios. For single selection only.

toggle | Boolean | If set to true, the selection options will offer a toggle to select them.

chips | Boolean | If set to true, the selections will appear as chips (instead of comma separated strings) on the input frame (works for multiple selection only).

chips-color | String | Override default children chips text color.

chips-bg-color | String | Override default children chips background color.

readonly | Boolean | If set to true, select is readonly and the user cannot change model.

filter | Boolean/Function(terms,obj) | If set to true or supplying a filter function, the selections will offer an input to filter the selection options.

autofocus-filter | Boolean | Auto-focus on the filter input field (if available) when opening selection.

filter-placeholder | String | A text to show in the filter input field. Default is 'Filter'.

separator | Boolean | If set to true, the selection options will be separated by a line.

display-value | String | Overrides text displayed in input frame. See 'Working with Display Value' section below.

placeholder | String | Placeholder text.

clearable | Boolean | If used, the component offers the user an actionable icon to reset the current value to clear-value (which is by default null for single selection and [] for multiple selection). The icon appears only when the current value matches clear-value.

clear-value | String | The value to which to reset the field model to when using clearable. The default value is null for single selection and [] for a multiple selection.

no-icon | Boolean | Use no icon on left side

popup-max-height | String | (v0.17.13+) Maximum height of popup described in CSS units.

Quasar propierties

Property | Type | Description

---------|------|-------------

prefix | String | A text that should be shown before the textfield.

suffix | String | A text that should be shown after the textfield.

float-label | String | A text label that will 'float' up above the input field, once the input field gets focus.

stack-label | String | A text label that will be shown above the input field and is static.

color | String | One from Quasar Color Palette.

inverted | Boolean | Inverted mode. Color is applied to background instead.

inverted-light | Boolean | Inverted mode with a light color. Color is applied to background instead.

hide-underline | Boolean | Hides the bottom border.

dark | Boolean | Is it rendered on a dark background?

align | String | One of 'left', 'center' or 'right' which determines the text align within the textfield.

disable | Boolean | If set to true, the field is disabled and the user cannot select anything.

warning | Boolean | If set to true, the component colors are changed to show there is a warning.

error | Boolean | If set to true, the input field?s colors are changed to show there is an error.

before | Array of Objects | Icon buttons positioned on the left side of field.

after | Array of Objects | Icon buttons on the right side of the field.

no-parent-field | Boolean | Avoid trying to connect to a parent QField.

Vue Methods

Vue Method | Description

-----------|------------

show() | Opens the Popover

hide() | Closes the Popover

clear() | Resets the model to an empty string.

Vue Events

Vue Event | Description

----------|------------

@input(newVal) | Triggered immediately on model value change.

@change(newVal) | Triggered on lazy model value change.

@clear(clearVal) | Triggered when the model is cleared.

@focus | Triggered when the field gets focus.

@blur | Triggered when the field loses focus.

Items propierties

Property | Type | Description

---------|------|-------------

leftColor | String | Color for left side from Quasar Color Palette.

icon | String | Icon on the left to use.

avatar | String | URL pointing to statics for an avatar.

letter | String | One character String.

leftInverted | Boolean | Invert mode, but only for icon and letter.

leftTextColor | String | Override default ?white? text-color when using an icon or letter only.

image | String | URL pointing to statics for an image.

label | String | Main label of the selection.

sublabel | String | Sub-label of the selection.

labelLines | String/Number | Number of lines that label can expand to.

sublabelLines | String/Number | Number of lines that the sublabel can expand to.

inset | Boolean | Inset Label if no left-side is specified (no icon, avatar, letter or image).

rightColor | String | Color for right side from Quasar Color Palette.

rightIcon | String | Icon on the right to use.

rightAvatar | String | URL pointing to statics for an avatar on right side.

rightLetter | String | One character String for right side.

rightImage | String | URL pointing to statics for an image on right side.

rightInverted | Boolean | Invert mode, but only for icon and letter.

rightTextColor | String | Override default ?white? text-color when using an icon or letter only.

stamp | String | Stamp to use for right side. Example: ?10 min ago?.

ID:(9901, 0)