Dropplista

Komponent: FSelectField
Status: Produktionsklar

Innehåll

Copy
Responsiv bredd
API

Använd dropplista när användaren ska välja ett av flera liknande, fördefinierade alternativ. En dropplista måste ha minst två alternativ men används oftast då det finns fyra val eller fler.

Dropplista har alltid en etikett som beskriver vad användaren ska fylla i.

Copy

I dropplistor är det vanligt att etiketten är formulerad som en fråga eller ett påstående.

Texten i själva dropplistan formuleras så att det blir tydligt vad användaren ska fylla i, men får inte ensam beskriva valet då den försvinner när användaren gjort ett val.

Responsiv bredd

Etiketten och dropplistan kan ha olika bredd. När etikettens text radbryts behöver alltså inte vara kopplat till hur bred dropplistan i sig är.

Bredden för respektive del anges med antal kolumner vid olika skärmbredder (brytpunkter).

<template>
    <f-select-field v-model="foo" v-validation.required label-width="md-9" select-width="md-6">
        <template #label>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque lacus sed mi
            mollis pulvinar.
        </template>

        <option disabled hidden value="">Välj…</option>
        <option value="FOO">Foo</option>
        <option value="BAR">Bar</option>
        <option value="BAZ">Baz</option>
    </f-select-field>
</template>

<script>
import { defineComponent } from "vue";
import { FSelectField } from "@fkui/vue";

export default defineComponent({
    name: "FSelectFieldWidths",
    components: { FSelectField },
    data() {
        return { foo: "" };
    },
});
</script>

API

Props

id: string Optional

The id for the select id attribute. The id for the label for attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

inline: boolean Optional

Show the component inline.

Default: false

v-model: string|number|object|array|boolean Optional

The value for the input. If the prop is not set undefined will be used.

Default: undefined

labelWidth: string Optional

Set responsive width for label section.

label-width="md-9 lg-6"

Default: "sm-12"

selectWidth: string Optional

Set responsive width for select section that wraps select element and icons.

select-width="md-6 lg-3"

Default: "sm-12"

Events

change

Emitted when the value of the dropdown changes.

Arguments:

<anonymous>: string

update:modelValue

V-model event.

Arguments:

<anonymous>: string

Slots

label

Slot for label content.

tooltip

Slot for tooltip.

description

Optional slot for description. See FLabel for details.

Bindings:

description-class: unknown
format-description-class: unknown

error-message

Slot for displaying single or several error messages.