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. Once installed, import the DropDownButtonModule in your application root or feature module.

    app.module.ts

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

import { DropDownButtonModule } from 'smart-webcomponents-angular/dropdownbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DropDownButtonModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

  3. 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"
	]
  4. Example


    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 #listmenu></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 { ListMenuComponent } from 'smart-webcomponents-angular/listmenu';


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

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('listmenu', { read: ListMenuComponent, static: false }) listmenu!: ListMenuComponent;
	@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' }
                        ]
                    }
                ]
            }
        ];
		
        this.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 { CalendarModule } from 'smart-webcomponents-angular/calendar';
import { SwitchButtonModule } from 'smart-webcomponents-angular/switchbutton';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DropDownButtonModule, ListMenuModule, CalendarModule, SwitchButtonModule ],
    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 create-react-app. To scaffold your project structure, follow the installation instructions.

npx create-react-app my-app
cd my-app
npm start

Preparation

Open src/App.js andsrc/App.css

  1. Remove everything inside the App div tag in src/App.js: 
    <div className="App"> </div>
  2. Remove the logo.svg import
  3. Remove the contents of src/App.css
  4. Remove src/logo.svg

Setup the DropDownButton

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

  1. Download and install the package.
    npm install 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 start
and open localhost:3000 in your favorite web browser to see the output.

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

Getting Started with Vue DropDownButton Component


Setup Vue Environment

We will use vue-cli to get started. Let's install vue-cli

npm install -g @vue/cli

Then we can start creating our Vue.js projects with:

vue create my-project

Setup the DropDownButton

Open the "my-project" folder and run:

npm install smart-webcomponents

Setup with Vue 3.x

  • 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 src/main.js in your favorite text editor and change its contents to the following:

    main.js

    import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.isCustomElement = tag => tag.startsWith('smart-');
app.mount('#app')
  • 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.

Setup with Vue 2.x

  • 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 src/main.js in your favorite text editor and change its contents to the following:

    main.js

    import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.config.ignoredElements = [
'smart-drop-down-button'
]

new Vue({
  render: h => h(App),
}).$mount('#app')
  • Open src/App.vue in your favorite text editor and change its contents to the following:

    App.vue 

    <template>
  <div id="dropDownButtonContainer">
    <smart-drop-down-button drop-down-width="auto" placeholder="Calendar">
      <smart-calendar></smart-calendar>
    </smart-drop-down-button>
    <smart-drop-down-button drop-down-width="auto" placeholder="ListMenu">
      <smart-list-menu :dataSource.prop="listMenuDataSource"></smart-list-menu>
    </smart-drop-down-button>
    <smart-drop-down-button placeholder="Buttons">
      <smart-button>Button</smart-button>
      <smart-switch-button>Switch Button</smart-switch-button>
    </smart-drop-down-button>

    <smart-drop-down-button 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>
  </div>
</template>

<script>
// import 'smart-webcomponents/source/modules/smart.button.js';
// import 'smart-webcomponents/source/modules/smart.calendar.js';
// import 'smart-webcomponents/source/modules/smart.listmenu.js';
import "smart-webcomponents/source/smart.elements.js";
import "smart-webcomponents/source/styles/smart.default.css";

export default {
  name: "app",
  data: function () {
    return {
      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' }
                    ]
                }
            ]
        }
    ]
    }
  }
};
</script>

<style>
smart-drop-down-button {
    --smart-drop-down-element-max-height: 300px;
}

    smart-drop-down-button smart-calendar,
    smart-drop-down-button smart-calendar:focus {
        border: none;
    }

    smart-drop-down-button smart-list-menu {
        border: none;
        height: 200px;
    }

#dropDownButtonContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
    We can now use the smart-drop-down-button with Vue. Data binding and event handlers will just work right out of the box.
    We have bound the properties of the smart-drop-down-button to values in our Vue component.

Running the Vue application

Start the app with 
npm run serve
and open localhost:8080 in your favorite web browser to see the output below:

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