SDS Dropdown

Adds functionality for dropdowns.

Install

npm install @skills-development-scotland/sds-dropdown --save

Usage

Syntax

SDSDropdown.dropdown({
  selector: '.js-dropdown',
  eventSelectorButton: '.js-dropdown__toggle',
  eventSelectorContent: '.js-dropdown__content'
});

• selector (optional)

  • Type: string
  • Default: .js-dropdown
  • The container css selector for the complete dropdown

• eventSelectorButton (optional)

  • Type: string
  • Default: .js-dropdown__toggle
  • The element css selector for the clickable element to expand/collapse
  • Must be child of selector

• eventSelectorContent (optional)

  • Type: string
  • Default: .js-dropdown__content
  • The element css selector for the content element
  • Must be child of selector

CSS

Application CSS required for the expand and collapse states.

is-collapsed for when the dropdown content item is closed.

is-expanded for when the dropdown content item is open.

Typescript

import { dropdown } from '@skills-development-scotland/sds-dropdown';

dropdown({
  selector: '.js-dropdown',
  eventSelectorButton: '.js-dropdown__toggle',
  eventSelectorContent: '.js-dropdown__content'
});

Javascript

<script src="scripts/sds-dropdown.js"></script>

SDSDropdown.dropdown({
  selector: '.js-dropdown'
});

Angular Component

import { Component, AfterViewInit } from '@angular/core';
import { dropdown } from '@skills-development-scotland/sds-dropdown';

@Component({
  selector: 'app-dropdown',
  template: `
    <div class="dropdown js-dropdown">
      <button class="dropdown__toggle js-dropdown__toggle" aria-haspopup="true" aria-expanded="false" id="dropdown-example">
        Dropdown Dropdown
      </button>
      <div class="dropdown__content js-dropdown__content" aria-labelledby="dropdown-example">
        <p>Dropdown Content</p>
      </div>
    </div>
  `,
})
export class DropdownComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    dropdown({
      selector: '.js-dropdown',
      eventSelectorButton: '.js-dropdown__toggle',
      eventSelectorContent: '.js-dropdown__content'
    });
  }
}