Navbar

less than 1 minute read

References

TypeScript

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

// Create the navbar
let el = document.querySelector("#navbar");
let navbar = Components.Navbar({
    el: el,
    brand: "Navbar",
    searchBox: {
        onChange: (value) => {
            // Log the value
            console.log("The search value is: " + value);
        },
        onSearch: (value) => {
            // Log the value
            console.log("The search value is: " + value);
        }
    },
    items: [
        {
            text: "Home",
            isActive: true
        },
        {
            text: "Link"
        },
        {
            text: "Disabled Link",
            isDisabled: true
        },
        {
            text: "Dropdown Link",
            items: [
                { text: "Link 1" },
                { text: "Link 2" },
                { text: "Link 3" },
                { text: "Link 4" },
                { text: "Link 5" }
            ]
        }
    ]
});

React

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

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Navbar
                brand="Navbar"
                items={[
                    {
                        text: "Home",
                        isActive: true
                    },
                    {
                        text: "Link"
                    },
                    {
                        text: "Disabled Link",
                        isDisabled: true
                    },
                    {
                        text: "Dropdown Link",
                        items: [
                            { text: "Link 1" },
                            { text: "Link 2" },
                            { text: "Link 3" },
                            { text: "Link 4" },
                            { text: "Link 5" }
                        ]
                    }
                ]}
            />
        );
    }
}

VueJS

<template>
    <Navbar brand="Navbar" v-bind:items="navItems" />
</template>

<script>
import { Navbar } from "gd-sprest-bs-vue";
export default {
    components: { Navbar },
    data() {
        return {
            navItems: [
                {
                    text: "Home",
                    isActive: true
                },
                {
                    text: "Link"
                },
                {
                    text: "Disabled Link",
                    isDisabled: true
                },
                {
                    text: "Dropdown Link",
                    items: [
                        { text: "Link 1" },
                        { text: "Link 2" },
                        { text: "Link 3" },
                        { text: "Link 4" },
                        { text: "Link 5" }
                    ]
                }
            ]
        };
    }
}
</script>

Code Playground