List Box

less than 1 minute read

References

TypeScript

import { Components } from "gd-sprest-bs";

React

import * as React from "react";
import { ListBox } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <ListBox
                label="Colors"
                placeholder="Search Colors"
                items={[
                    { text: "Red", value: "red" },
                    { text: "Blue", value: "blue" },
                    { text: "Green", value: "green" },
                    { text: "Purple", value: "purple" },
                    { text: "Brown", value: "brown" },
                    { text: "Yellow", value: "yellow" },
                    { text: "Orange", value: "orange" }
                ]}
            />
        );
    }
}

VueJS

<template>
    <ListBox label="Colors" placeholder="Search Colors" v-bind:items="listItems" />
</template>

<script>
import { ListBox } from "gd-sprest-bs-vue";
export default {
    components: { ListBox },
    data() {
        return {
            listItems: [
                { text: "Red", value: "red" },
                { text: "Blue", value: "blue" },
                { text: "Green", value: "green" },
                { text: "Purple", value: "purple" },
                { text: "Brown", value: "brown" },
                { text: "Yellow", value: "yellow" },
                { text: "Orange", value: "orange" }
            ]
        };
    }
}
</script>

Code Playground