DropDownButton - Documentation | www.HtmlElements.com

Overview

Smart.DropDownButton represents a button with a placeholder that can convert to an action button, that opens/closes a popup with arbitrary HTML content.

Getting Started

Getting Started with DropDownButton Web Component

Smart UI for Web Components is distributed as smart-webcomponents NPM package. You can also get the full download from our website with all demos from the Download page.

Setup the DropDownButton

Smart UI for Web Components is distributed as smart-webcomponents NPM package

  1. Download and install the package.

    npm install smart-webcomponents

  2. Once installed, import the DropDownButton module in your application.

    <script type="module" src="node_modules/smart-webcomponents/source/modules/smart.dropdownbutton.js"></script>

  3. Adding CSS reference

    The smart.default.css CSS file should be referenced using following code.

    <link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

  4. Add the DropDownButton tag to your Web Page

    <smart-drop-down-button id="dropdownbutton"></smart-drop-down-button>

  5. Create the DropDownButton Component

    	<script type="module">
		Smart('#dropdownbutton', class {
			get properties() {
				return { placeholder: "Calendar" }
			}
		});
	</script>

    Another option is to create the DropDownButton is by using the traditional Javascript way:
    	const dropdownbutton = document.createElement('smart-drop-down-button');

	dropdownbutton.disabled = true;
	document.body.appendChild(dropdownbutton);

    Smart framework provides a way to dynamically create a web component on demand from a DIV tag which is used as a host. The following imports the web component's module and creates it on demand, when the document is ready. The #dropdownbutton is the ID of a DIV tag.

    	import "../../source/modules/smart.dropdownbutton.js";

	document.readyState === 'complete' ? init() : window.onload = init;

	function init() { 
		const dropdownbutton = new Smart.DropDownButton('#dropdownbutton', { placeholder: "Calendar" });
	}

  6. Open the page in your web server.

Appearance

  • By default the element appears as a simple button that opens a drop down container:

     <smart-drop-down-button>
    <h3>What is Lorem Ipsum?</h3>
    <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </smart-drop-down-button>

  • The placeholder property must be set in order for the action button / placeholder container to be visible. It can be any string: 

     <smart-drop-down-button placeholder="DropDownButton">
    <h3>What is Lorem Ipsum?</h3>
    <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </smart-drop-down-button>

  • The dropDownOpenMode property determines when the drop down opens. The element can have two separate buttons: an action and a dropDown button if the property is set to 'dropDownButton'. The action button can execute some user code while the drop down button opens the drop down.

     <smart-drop-down-button drop-down-open-mode="dropDownButton" placeholder="DropDownButton">
    <h3>What is Lorem Ipsum?</h3>
    <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </smart-drop-down-button>

  • The dropDownButtonPosition property determines the position of the button that opens the drop down. Four positions are available: 'left', 'right', 'top', 'bottom'. 

     <smart-drop-down-button drop-down-button-position="left" placeholder="DropDownButton">
    <h3>What is Lorem Ipsum?</h3>
    <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </smart-drop-down-button>

Content

The content of the element can be any HTML. For example, a simple text or a custom element. The content can be set on initialization or dynamically set/removed via the API.

The simplest way of settings the content of the drop down is by settings the innerHTML property:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
<script type="text/javascript" src="../../source/smart.dropdownbutton.js"></script>
 <script>
     window.onload = function () {
         const dropDownButton = document.querySelector('smart-drop-down-button');
         
         dropDownButton.innerHTML = 'Simple Text Content';
     }
 </script>
</head>
<body>
 <smart-drop-down-button></smart-drop-down-button>
</body>
</html>

The element offers the following methods for content manipulation:

  • appendChild method appends HTML elements to the drop down.

    The appendChild method can be called at any time after the element has been initialized.

    The method accepts only one argument - an HTML element.

    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
 <script type="text/javascript" src="../../source/smart.listbox.js"></script>
 <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script>
 <script type="text/javascript" src="../../source/smart.dropdownbutton.js"></script>
 <script  type="text/javascript" src="../../source/smart.menu.js"></script>
 <script type="text/javascript" src="../../source/smart.tree.js"></script>
 <script>
     window.onload = function () {
         const dropDownButton = document.querySelector('smart-drop-down-button'),
            tree = document.createElement('smart-tree');

        tree.dataSource = [{
            label: 'Cats',
            selected: true,
            items: [
                {
                    label: 'Tiger',
                    selected: true
                },
                {
                    label: 'Lion'
                },
                {
                    label: 'Jaguar'
                },
                {
                    label: 'Leopard'
                },
                {
                    label: 'Serval'
                },
                {
                    label: 'Domestic cat'
                }
            ]
        },
            {
                label: 'Dogs',
                expanded: true,
                items: [
                    {
                        label: 'Gray wolf'
                    },
                    {
                        label: 'Ethiopian wolf',
                        selected: true
                    },
                    {
                        label: 'Arctic fox',
                        selected: true
                    },
                    {
                        label: 'Dingo'
                    },
                    {
                        label: 'Domestic dog',
                        selected: true
                    }
                ]
            }
        ];

         dropDownButton.appendChild(tree);
     }
 </script>
   <style>
        smart-drop-down-button {
            --smart-drop-down-element-max-height: 500px;
        }

        .smart-drop-down smart-tree {
            border: none;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
 <smart-drop-down-button drop-down-width="auto"></smart-drop-down-button>
</body>
</html>

  • removeChild method allows to remove an HTML element that has previously been appended.

    The method accepts one argument - the HTML element to be removed. 
    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
     window.onload = function () {
         const dropDownButton = document.querySelector('smart-drop-down-button'),
               tree = document.getElementById('tree');

         //Remove the tree
         dropDownButton.removeChild(tree);
 </script>
</head>
<body>
 <smart-drop-down-button>
    <smart-tree id="tree" show-lines show-root-lines>
        <smart-tree-items-group>
            Europe
            <smart-tree-item>Germany</smart-tree-item>
            <smart-tree-item>Turkey</smart-tree-item>
            <smart-tree-item>Romania</smart-tree-item>
            <smart-tree-item>Bulgaria</smart-tree-item>
            <smart-tree-item>Croatia</smart-tree-item>
        </smart-tree-items-group>
        <smart-tree-items-group expanded>
            North America
            <smart-tree-item selected>United States</smart-tree-item>
            <smart-tree-item>Canada</smart-tree-item>
            <smart-tree-item>Mexico</smart-tree-item>
        </smart-tree-items-group>
        <smart-tree-items-group>
            Asia
            <smart-tree-item>Bangladesh</smart-tree-item>
            <smart-tree-item>Thailand</smart-tree-item>
            <smart-tree-item>South Korea</smart-tree-item>
            <smart-tree-item>Israel</smart-tree-item>
            <smart-tree-item>Bhutan</smart-tree-item>
            <smart-tree-item>United Arab Emirates</smart-tree-item>
            <smart-tree-item>China</smart-tree-item>
            <smart-tree-item>Sri Lanka</smart-tree-item>
        </smart-tree-items-group>
    </smart-tree>
</smart-drop-down-button>
</body>
</html>
  • removeAll deletes the content of the drop down.

    Here's an example:

    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
     window.onload = function () {
         const dropDownButton = document.querySelector('smart-drop-down-button');

         //Empty the drop down
         dropDownButton.removeAll();
     }
 </script>
</head>
<body>
 <smart-drop-down-button>
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</smart-drop-down-button>
</body>
</html>

Behavior

smartDropDownButton offers different drop down positions: bottom, top, overlay-center, overlay-bottom, overlay-top, center-top, center-bottom and auto. The position of the drop down can be changed via the dropDownPosition property, like so:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
     window.onload = function () {
         const dropDownButton = document.querySelector('smart-drop-down-button');

         dropDownButton.dropDownPosition = 'top';
     }
 </script>
</head>
<body>
 <smart-drop-down-button>
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </smart-drop-down-button>
</body>
</html>

Similar to any other property dropDownPosition can be set in the HTML with an attribute:

<smart-drop-down-button drop-down-position="overlay-center"></smart-drop-down-button>

The default value of the property is 'auto'. This means that the element will automatically determine the position of the drop down depending on the space available. The algorithm always starts by trying to place the drop down below the element. If there's no space available it moves it above the element.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
	const dropdownbutton = document.createElement('smart-drop-down-button');

Append it to the DOM: 
	document.body.appendChild(dropdownbutton);

Remove it from the DOM: 
	dropdownbutton.parentNode.removeChild(dropdownbutton);

Set a property: 
	dropdownbutton.propertyName = propertyValue;

Get a property value: 
	const propertyValue = dropdownbutton.propertyName;

Invoke a method: 
	dropdownbutton.methodName(argument1, argument2);

Add Event Listener: 
	const eventHandler = (event) => {
	   // your code here.
	};

	dropdownbutton.addEventListener(eventName, eventHandler);

Remove Event Listener: 
	dropdownbutton.removeEventListener(eventName, eventHandler, true);

Using with Typescript

Smart Web Components package includes TypeScript definitions which enables strongly-typed access to the Smart UI Components and their configuration.

Inside the download package, the typescript directory contains .d.ts file for each web component and a smart.elements.d.ts typescript definitions file for all web components. Copy the typescript definitions file to your project and in your TypeScript file add a reference to smart.elements.d.ts

Read more about using Smart UI with Typescript.

Getting Started with Angular DropDownButton Component

Setup Angular Environment

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine. 

npm install -g @angular/cli

Create a new Application

ng new smart-angular-dropdownbutton

Navigate to the created project folder 

cd smart-angular-dropdownbutton

Setup the DropDownButton

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

  1. Download and install the package.
    npm install smart-webcomponents-angular
  2. Adding CSS reference

    The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code. 

    @import 'smart-webcomponents-angular/source/styles/smart.default.css';

    Another way to achieve the same is to edit the angular.json file and in the styles add the style. 

    "styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]
    If you want to use Bootstrap, Fluent or other themes available in the package, you need to add them after 'smart.default.css'.
  3. Example with Angular Standalone Components


    app.component.html

     <div class="demo-description">smartDropDownButton allows you to display any type of content in a Drop-down.</div>
<smart-drop-down-button
#dropdownbutton drop-down-width="auto" placeholder="Calendar">
    <smart-calendar></smart-calendar>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton2 drop-down-width="auto" placeholder="ListMenu">
        <smart-list-menu></smart-list-menu>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton3 placeholder="Buttons">
        <smart-button>Button</smart-button>
        <smart-switch-button>Switch Button</smart-switch-button>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton4 placeholder="Text">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
        and typesetting industry. Lorem Ipsum has been the industry's standard
        dummy text ever since the 1500s, when an unknown printer took a galley
        of type and scrambled it to make a type specimen book. It has survived
        not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the
        release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.</smart-drop-down-button>

    app.component.ts

     import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DropDownButtonComponent } from 'smart-webcomponents-angular/dropdownbutton';


import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DropDownButtonModule } from 'smart-webcomponents-angular/dropdownbutton';

@Component({
    selector: 'app-root',
	standalone: true,
	imports: [CommonModule, DropDownButtonModule, RouterOutlet],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton!: DropDownButtonComponent;
    @ViewChild('dropdownbutton2', { read: DropDownButtonComponent, static: false }) dropdownbutton2!: DropDownButtonComponent;
    @ViewChild('dropdownbutton3', { read: DropDownButtonComponent, static: false }) dropdownbutton3!: DropDownButtonComponent;
    @ViewChild('dropdownbutton4', { read: DropDownButtonComponent, static: false }) dropdownbutton4!: DropDownButtonComponent;


    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.


        const listMenuDataSource = [
            {
                label: 'OSI',
                items: [
                    {
                        label: 'Application Layer',
                        items: [
                            { label: 'SIP' },
                            { label: 'DNS' },
                            { label: 'FTP' },
                            { label: 'RTP' },
                            { label: 'DHCP' }
                        ]
                    },
                    {
                        label: 'Presentation Layer',
                        items: [
                            { label: 'SSL' },
                            { label: 'TLS' }
                        ]
                    },
                    {
                        label: 'Session Layer',
                        items: [
                            { label: 'NetBIOS' },
                            { label: 'SPDY' }
                        ]
                    },
                    {
                        label: 'Transport Layer',
                        items: [
                            { label: 'TCP' },
                            { label: 'UDP' },
                            { label: 'SCTP' }
                        ]
                    },
                    {
                        label: 'Network Layer',
                        items: [
                            { label: 'IP' },
                            { label: 'ARP' },
                            { label: 'ICMP' }
                        ]
                    },
                    {
                        label: 'Data Link Layer',
                        items: [
                            { label: 'ATM' },
                            { label: 'SDLS' },
                            { label: 'LLC' }
                        ]
                    },
                    {
                        label: 'Physical Layer',
                        items: [
                            { label: 'EIA/TIA-232' },
                            { label: 'ITU-T V-Series' },
                            { label: 'DSL' }
                        ]
                    }
                ]
            },
            {
                label: 'TCP/IP',
                items: [
                    {
                        label: 'Application Layer',
                        items: [
                            { label: 'DHCP' },
                            { label: 'DNS' },
                            { label: 'FTP' },
                            { label: 'HTTP' },
                            { label: 'IMAP' },
                            { label: 'LDAP' },
                            { label: 'XMPP' },
                            { label: 'SSH' },
                            { label: 'RIP' }
                        ]
                    },
                    {
                        label: 'Transport Layer',
                        items: [
                            { label: 'TCP' },
                            { label: 'UDP' },
                            { label: 'SCTP' }
                        ]
                    },
                    {
                        label: 'Internet Layer',
                        items: [
                            { label: 'IP' },
                            { label: 'ICMP' },
                            { label: 'ECN' }
                        ]
                    },
                    {
                        label: 'Link Layer',
                        items: [
                            { label: 'ARP' },
                            { label: 'NDP' },
                            { label: 'DSL' }
                        ]
                    }
                ]
            }
        ];

        const listMenu = document.querySelector('smart-list-menu')
        
        if (listMenu) {
            listMenu.dataSource = listMenuDataSource;
        }

    }
}

  4. Example with Angular NGModule


    app.component.html

     <div class="demo-description">smartDropDownButton allows you to display any type of content in a Drop-down.</div>
<smart-drop-down-button
#dropdownbutton drop-down-width="auto" placeholder="Calendar">
    <smart-calendar></smart-calendar>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton2 drop-down-width="auto" placeholder="ListMenu">
        <smart-list-menu></smart-list-menu>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton3 placeholder="Buttons">
        <smart-button>Button</smart-button>
        <smart-switch-button>Switch Button</smart-switch-button>
    </smart-drop-down-button>
    <smart-drop-down-button #dropdownbutton4 placeholder="Text">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
        and typesetting industry. Lorem Ipsum has been the industry's standard
        dummy text ever since the 1500s, when an unknown printer took a galley
        of type and scrambled it to make a type specimen book. It has survived
        not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the
        release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.</smart-drop-down-button>

    app.component.ts

     import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DropDownButtonComponent } from 'smart-webcomponents-angular/dropdownbutton';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {
    @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton!: DropDownButtonComponent;
    @ViewChild('dropdownbutton2', { read: DropDownButtonComponent, static: false }) dropdownbutton2!: DropDownButtonComponent;
    @ViewChild('dropdownbutton3', { read: DropDownButtonComponent, static: false }) dropdownbutton3!: DropDownButtonComponent;
    @ViewChild('dropdownbutton4', { read: DropDownButtonComponent, static: false }) dropdownbutton4!: DropDownButtonComponent;


    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.


        const listMenuDataSource = [
            {
                label: 'OSI',
                items: [
                    {
                        label: 'Application Layer',
                        items: [
                            { label: 'SIP' },
                            { label: 'DNS' },
                            { label: 'FTP' },
                            { label: 'RTP' },
                            { label: 'DHCP' }
                        ]
                    },
                    {
                        label: 'Presentation Layer',
                        items: [
                            { label: 'SSL' },
                            { label: 'TLS' }
                        ]
                    },
                    {
                        label: 'Session Layer',
                        items: [
                            { label: 'NetBIOS' },
                            { label: 'SPDY' }
                        ]
                    },
                    {
                        label: 'Transport Layer',
                        items: [
                            { label: 'TCP' },
                            { label: 'UDP' },
                            { label: 'SCTP' }
                        ]
                    },
                    {
                        label: 'Network Layer',
                        items: [
                            { label: 'IP' },
                            { label: 'ARP' },
                            { label: 'ICMP' }
                        ]
                    },
                    {
                        label: 'Data Link Layer',
                        items: [
                            { label: 'ATM' },
                            { label: 'SDLS' },
                            { label: 'LLC' }
                        ]
                    },
                    {
                        label: 'Physical Layer',
                        items: [
                            { label: 'EIA/TIA-232' },
                            { label: 'ITU-T V-Series' },
                            { label: 'DSL' }
                        ]
                    }
                ]
            },
            {
                label: 'TCP/IP',
                items: [
                    {
                        label: 'Application Layer',
                        items: [
                            { label: 'DHCP' },
                            { label: 'DNS' },
                            { label: 'FTP' },
                            { label: 'HTTP' },
                            { label: 'IMAP' },
                            { label: 'LDAP' },
                            { label: 'XMPP' },
                            { label: 'SSH' },
                            { label: 'RIP' }
                        ]
                    },
                    {
                        label: 'Transport Layer',
                        items: [
                            { label: 'TCP' },
                            { label: 'UDP' },
                            { label: 'SCTP' }
                        ]
                    },
                    {
                        label: 'Internet Layer',
                        items: [
                            { label: 'IP' },
                            { label: 'ICMP' },
                            { label: 'ECN' }
                        ]
                    },
                    {
                        label: 'Link Layer',
                        items: [
                            { label: 'ARP' },
                            { label: 'NDP' },
                            { label: 'DSL' }
                        ]
                    }
                ]
            }
        ];

        const listMenu = document.querySelector('smart-list-menu')
        
        if (listMenu) {
            listMenu.dataSource = listMenuDataSource;
        }

    }
}

    app.module.ts

     import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { DropDownButtonModule } from "smart-webcomponents-angular/dropdownbutton";
import { ListMenuModule } from "smart-webcomponents-angular/listmenu";
import { ButtonModule } from "smart-webcomponents-angular/button";
import { SwitchButtonModule } from "smart-webcomponents-angular/switchbutton";
import { CalendarModule } from "smart-webcomponents-angular/calendar";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CalendarModule,
    ListMenuModule,
    ButtonModule,
    SwitchButtonModule,
    DropDownButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}


Running the Angular application

After completing the steps required to render a DropDownButton, run the following command to display the output in your web browser

ng serve
and open localhost:4200 in your favorite web browser.

Read more about using Smart UI for Angular: https://www.htmlelements.com/docs/angular-cli/.

Getting Started with React DropDownButton Component

Setup React Environment

The easiest way to start with React is to use NextJS Next.js is a full-stack React framework. It’s versatile and lets you create React apps of any size—from a mostly static blog to a complex dynamic application.

npx create-next-app my-app
cd my-app
npm run dev
or 
yarn create next-app my-app
cd my-app
yarn run dev

Preparation

Setup the DropDownButton

Smart UI for React is distributed as smart-webcomponents-react package

  1. Download and install the package.

    In your React Next.js project, run one of the following commands to install Smart UI DropDownButton for React

    With NPM: 

    npm install smart-webcomponents-react
    With Yarn: 
    yarn add smart-webcomponents-react

  2. Once installed, import the React DropDownButton Component and CSS files in your application and render it. app.js

    import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Button, RepeatButton, ToggleButton, PowerButton } from 'smart-webcomponents-react/button';
import { Calendar } from 'smart-webcomponents-react/calendar';
import { DropDownButton } from 'smart-webcomponents-react/dropdownbutton';
import { ListMenu, MenuItem, MenuItemsGroup } from 'smart-webcomponents-react/listmenu';
import { SwitchButton } from 'smart-webcomponents-react/switchbutton';

class App extends React.Component {
	constructor(props) {
		super(props);

		this.dropdownbutton = React.createRef();
	}

	componentDidMount() {

	}

	render() {
		return (
			<div>
				<div className="demo-description">smartDropDownButton allows you to display any type of content in a Drop-down.</div>
				<DropDownButton
					ref={this.dropdownbutton} dropDownWidth="auto" placeholder="Calendar">
					<Calendar ></Calendar>
				</DropDownButton>
				<DropDownButton  drop-down-width="auto" placeholder="ListMenu">
					<ListMenu  dataSource={
						[{
							label: 'OSI',
							items: [{
								label: 'Application Layer',
								items: [{
									label: 'SIP'
								},
								{
									label: 'DNS'
								},
								{
									label: 'FTP'
								},
								{
									label: 'RTP'
								},
								{
									label: 'DHCP'
								}
								]
							},
							{
								label: 'Presentation Layer',
								items: [{
									label: 'SSL'
								},
								{
									label: 'TLS'
								}
								]
							},
							{
								label: 'Session Layer',
								items: [{
									label: 'NetBIOS'
								},
								{
									label: 'SPDY'
								}
								]
							},
							{
								label: 'Transport Layer',
								items: [{
									label: 'TCP'
								},
								{
									label: 'UDP'
								},
								{
									label: 'SCTP'
								}
								]
							},
							{
								label: 'Network Layer',
								items: [{
									label: 'IP'
								},
								{
									label: 'ARP'
								},
								{
									label: 'ICMP'
								}
								]
							},
							{
								label: 'Data Link Layer',
								items: [{
									label: 'ATM'
								},
								{
									label: 'SDLS'
								},
								{
									label: 'LLC'
								}
								]
							},
							{
								label: 'Physical Layer',
								items: [{
									label: 'EIA/TIA-232'
								},
								{
									label: 'ITU-T V-Series'
								},
								{
									label: 'DSL'
								}
								]
							}
							]
						},
						{
							label: 'TCP/IP',
							items: [{
								label: 'Application Layer',
								items: [{
									label: 'DHCP'
								},
								{
									label: 'DNS'
								},
								{
									label: 'FTP'
								},
								{
									label: 'HTTP'
								},
								{
									label: 'IMAP'
								},
								{
									label: 'LDAP'
								},
								{
									label: 'XMPP'
								},
								{
									label: 'SSH'
								},
								{
									label: 'RIP'
								}
								]
							},
							{
								label: 'Transport Layer',
								items: [{
									label: 'TCP'
								},
								{
									label: 'UDP'
								},
								{
									label: 'SCTP'
								}
								]
							},
							{
								label: 'Internet Layer',
								items: [{
									label: 'IP'
								},
								{
									label: 'ICMP'
								},
								{
									label: 'ECN'
								}
								]
							},
							{
								label: 'Link Layer',
								items: [{
									label: 'ARP'
								},
								{
									label: 'NDP'
								},
								{
									label: 'DSL'
								}
								]
							}
							]
						}
						]
					}></ListMenu>
				</DropDownButton>
				<DropDownButton  placeholder="Buttons">
					<Button >Button</Button>
					<SwitchButton >Switch Button</SwitchButton>
				</DropDownButton>
				<DropDownButton  placeholder="Text">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
				and typesetting industry. Lorem Ipsum has been the industry's standard
				dummy text ever since the 1500s, when an unknown printer took a galley
				of type and scrambled it to make a type specimen book. It has survived
				not only five centuries, but also the leap into electronic typesetting,
				remaining essentially unchanged. It was popularised in the 1960s with the
				release of Letraset sheets containing Lorem Ipsum passages, and more recently
				with desktop publishing software like Aldus PageMaker including versions
			            of Lorem Ipsum.</DropDownButton>
			</div>
		);
	}
}



export default App;

Running the React application

Start the app with 
npm run dev
or 
yarn run dev
and open localhost:3000 in your favorite web browser to see the output.

Setup with Vite

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects
With NPM: 
npm create vite@latest
With Yarn: 
yarn create vite
Then follow the prompts and choose React as a project.

Navigate to your project's directory. By default it is 'vite-project' and install Smart UI for React

In your Vite project, run one of the following commands to install Smart UI DropDownButton for React

With NPM: 

npm install smart-webcomponents-react
With Yarn: 
yarn add smart-webcomponents-react

Open src/App.tsx App.tsx

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Button, RepeatButton, ToggleButton, PowerButton } from 'smart-webcomponents-react/button';
import { Calendar } from 'smart-webcomponents-react/calendar';
import { DropDownButton } from 'smart-webcomponents-react/dropdownbutton';
import { ListMenu, MenuItem, MenuItemsGroup } from 'smart-webcomponents-react/listmenu';
import { SwitchButton } from 'smart-webcomponents-react/switchbutton';

class App extends React.Component {
	constructor(props) {
		super(props);

		this.dropdownbutton = React.createRef();
	}

	componentDidMount() {

	}

	render() {
		return (
			<div>
				<div className="demo-description">smartDropDownButton allows you to display any type of content in a Drop-down.</div>
				<DropDownButton
					ref={this.dropdownbutton} dropDownWidth="auto" placeholder="Calendar">
					<Calendar ></Calendar>
				</DropDownButton>
				<DropDownButton  drop-down-width="auto" placeholder="ListMenu">
					<ListMenu  dataSource={
						[{
							label: 'OSI',
							items: [{
								label: 'Application Layer',
								items: [{
									label: 'SIP'
								},
								{
									label: 'DNS'
								},
								{
									label: 'FTP'
								},
								{
									label: 'RTP'
								},
								{
									label: 'DHCP'
								}
								]
							},
							{
								label: 'Presentation Layer',
								items: [{
									label: 'SSL'
								},
								{
									label: 'TLS'
								}
								]
							},
							{
								label: 'Session Layer',
								items: [{
									label: 'NetBIOS'
								},
								{
									label: 'SPDY'
								}
								]
							},
							{
								label: 'Transport Layer',
								items: [{
									label: 'TCP'
								},
								{
									label: 'UDP'
								},
								{
									label: 'SCTP'
								}
								]
							},
							{
								label: 'Network Layer',
								items: [{
									label: 'IP'
								},
								{
									label: 'ARP'
								},
								{
									label: 'ICMP'
								}
								]
							},
							{
								label: 'Data Link Layer',
								items: [{
									label: 'ATM'
								},
								{
									label: 'SDLS'
								},
								{
									label: 'LLC'
								}
								]
							},
							{
								label: 'Physical Layer',
								items: [{
									label: 'EIA/TIA-232'
								},
								{
									label: 'ITU-T V-Series'
								},
								{
									label: 'DSL'
								}
								]
							}
							]
						},
						{
							label: 'TCP/IP',
							items: [{
								label: 'Application Layer',
								items: [{
									label: 'DHCP'
								},
								{
									label: 'DNS'
								},
								{
									label: 'FTP'
								},
								{
									label: 'HTTP'
								},
								{
									label: 'IMAP'
								},
								{
									label: 'LDAP'
								},
								{
									label: 'XMPP'
								},
								{
									label: 'SSH'
								},
								{
									label: 'RIP'
								}
								]
							},
							{
								label: 'Transport Layer',
								items: [{
									label: 'TCP'
								},
								{
									label: 'UDP'
								},
								{
									label: 'SCTP'
								}
								]
							},
							{
								label: 'Internet Layer',
								items: [{
									label: 'IP'
								},
								{
									label: 'ICMP'
								},
								{
									label: 'ECN'
								}
								]
							},
							{
								label: 'Link Layer',
								items: [{
									label: 'ARP'
								},
								{
									label: 'NDP'
								},
								{
									label: 'DSL'
								}
								]
							}
							]
						}
						]
					}></ListMenu>
				</DropDownButton>
				<DropDownButton  placeholder="Buttons">
					<Button >Button</Button>
					<SwitchButton >Switch Button</SwitchButton>
				</DropDownButton>
				<DropDownButton  placeholder="Text">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
				and typesetting industry. Lorem Ipsum has been the industry's standard
				dummy text ever since the 1500s, when an unknown printer took a galley
				of type and scrambled it to make a type specimen book. It has survived
				not only five centuries, but also the leap into electronic typesetting,
				remaining essentially unchanged. It was popularised in the 1960s with the
				release of Letraset sheets containing Lorem Ipsum passages, and more recently
				with desktop publishing software like Aldus PageMaker including versions
			            of Lorem Ipsum.</DropDownButton>
			</div>
		);
	}
}



export default App;

Read more about using Smart UI for React: https://www.htmlelements.com/docs/react/.

Getting Started with Vue DropDownButton Component


Setup Vue with Vite

In this section we will introduce how to scaffold a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Vue Single-File Components (SFCs). Run the following command in your command line 
npm create vue@latest
This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support: 
✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./...
Done.
If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server: 
cd 
npm install
npm install smart-webcomponents
npm run dev

  • Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element, assuming that you forgot to register a global component or misspelled a component name.

    Open vite.config.js in your favorite text editor and change its contents to the following:

    vite.config.js

    import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('smart-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
  • Open src/App.vue in your favorite text editor and change its contents to the following:

    App.vue 

    <template>
  <div class="vue-root">
    <smart-drop-down-button placeholder="Button">
      What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
      and typesetting industry. Lorem Ipsum has been the industry's standard
      dummy text ever since the 1500s, when an unknown printer took a galley
      of type and scrambled it to make a type specimen book. It has survived
      not only five centuries, but also the leap into electronic typesetting,
      remaining essentially unchanged. It was popularised in the 1960s with the
      release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum.
    </smart-drop-down-button>
    <div class="options">
      <div class="caption">Settings</div>
      <div class="option">
        <div>Open Mode:</div>
        <smart-radio-button checked>Default</smart-radio-button>
        <br />
        <smart-radio-button>DropDownButton</smart-radio-button>
      </div>
      <div class="option" id="eventLog">
        <h4>Event log:</h4>
        <div id="log"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.dropdownbutton.js";
import "smart-webcomponents/source/modules/smart.radiobutton.js";

export default {
  name: "app",
  setup() {
    onMounted(() => {
      const radioButtons = document.getElementsByTagName("smart-radio-button"),
        dropDownButton = document.querySelector("smart-drop-down-button");
      radioButtons[0].addEventListener("change", function() {
        dropDownButton.dropDownOpenMode = "default";
        dropDownButton.placeholder = "Button";
      });
      radioButtons[1].addEventListener("change", function() {
        dropDownButton.dropDownOpenMode = "dropDownButton";
        dropDownButton.placeholder = "Action";
      });
      dropDownButton.addEventListener("actionButtonClick", function(event) {
        document.getElementById("log").innerHTML += event.type + "<br />";
      });
      dropDownButton.addEventListener("dropDownButtonClick", function(event) {
        document.getElementById("log").innerHTML += event.type + "<br />";
      });
      dropDownButton.addEventListener("opening", function(event) {
        document.getElementById("log").innerHTML += event.type + "<br />";
      });
      dropDownButton.addEventListener("closing", function(event) {
        document.getElementById("log").innerHTML += event.type + "<br />";
      });
    });
  }
};
</script>

<style>
smart-drop-down-button {
  width: 250px;
}
</style>
    We can now use the smart-drop-down-button with Vue 3. Data binding and event handlers will just work right out of the box.

Running the Vue application

Start the app with 
npm run dev
and open http://localhost:5173/ in your favorite web browser to see the output below:
When you are ready to ship your app to production, run the following: 
npm run build
This will create a production-ready build of your app in the project's ./dist directory.

Read more about using Smart UI for Vue: https://www.htmlelements.com/docs/vue/.