10.0.2 • Published 7 years ago

ak-dropdown v10.0.2

Weekly downloads
-
License
Apache-2.0
Repository
bitbucket
Last release
7 years ago

AtlasKit component registry Commitizen friendly semantic-release Report an issue Ask in our forum

Dropdown

Dropdown creates a dropdown menu, with optional sections, headings, icons, checkbox items, radio group items and disabled items.

Example dropdown

Try it out

Interact with a live demo of the ak-dropdown component.

Installation

npm install ak-dropdown

Using the component

HTML

The ak-dropdown package exports the Dropdown Skate component.

Import the component in your JS resource:

bundle.js

import Dropdown from 'ak-dropdown';

Now you can use the defined tag in your HTML markup:

index.html

<html>
<head>
  <script src="bundle.js"></script>
</head>
<body>
  <!-- ... -->
  <ak-dropdown></ak-dropdown>
</body>

The dropdown must include a trigger and a list of elements.

Example:

<ak-dropdown>
  <ak-dropdown-trigger slot="trigger">Some text</ak-dropdown-trigger>
  <ak-dropdown-item>first item</ak-dropdown-item>
  <ak-dropdown-item>second item</ak-dropdown-item>
  <ak-dropdown-item>third item</ak-dropdown-item>
</ak-dropdown>

The trigger is not styled by default. Any html element can be used as the trigger such as a button or a tab item. Example:

<ak-dropdown>
  <ak-dropdown-trigger slot="trigger"><ak-trigger-button>Button as the trigger</ak-trigger-button></ak-dropdown-trigger>
  <ak-dropdown-item>first item</ak-dropdown-item>
</ak-dropdown>

React

This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.

import Dropdown from 'ak-dropdown';
import reactify from 'skatejs-react-integration';

const ReactComponent = reactify(Dropdown, {});

ReactDOM.render(<ReactComponent />, container);

Dropdown

Kind: global class

new Dropdown()

The definition for the Dropdown component.

HTML Example

<ak-dropdown></ak-dropdown>

JS Example

import Dropdown from 'ak-dropdown';
const dropdown = new Dropdown();

dropdown.stepOutside : Boolean

If the dropdown is placed inside an element with overflow:hidden, this property should be set to true in order for the Dropdown to be able to step outside the container

Kind: instance property of Dropdown
Default: false
HTML Example

<ak-dropdown step-outside></ak-dropdown>

JS Example

dropdown.stepOutside = true;

dropdown.appearance : string

Defines the appearance of the dropdown. Allowed values: 'standard', 'fitwidth', 'tall'. Width of the 'fitwidth' dropdown will always be in sync with the width of its trigger. A 'tall' dropdown doesn't have the maximum height restriction

Kind: instance property of Dropdown
Default: "standard"
HTML Example

<ak-dropdown appearance="fitwidth"></ak-dropdown>

JS Example

dropdown.appearance = 'fitwidth';

Dropdown.checked : Boolean

checked state of the item.

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item checked>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.checked = true;

Dropdown.disabled : Boolean

disabled state of a dropdown's item

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item disabled>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.disabled = true;

Dropdown.first : Boolean

is this item the first in the list of items

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item first>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.first = true;

Dropdown.last : Boolean

is this item the last in the list of items

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item last>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.last = true;

Dropdown.focused : Boolean

focused state of a dropdown's item

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item focused>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.focused = true;

Dropdown.hidden : Boolean

defines whether the item is invisible

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item hidden>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.hidden = true;

Dropdown.href : String

href for a dropdown item's link'

Kind: static property of Dropdown
Default: ''
HTML Example

<ak-dropdown>
  <ak-dropdown-item href="http://google.com">some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.href = 'http://google.com';

Dropdown.target : String

target for a dropdown item's link

Kind: static property of Dropdown
Default: ''
HTML Example

<ak-dropdown>
  <ak-dropdown-item href="http://google.com" target="_blank">some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem._target = '_blank';

Dropdown.active : Boolean

active state of a dropdown's item. Set this to true if for some reason you want this particular item to be highlighted

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item active>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.active = true;

Dropdown.checked : Boolean

checked state of the item.

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-item checked>some content</ak-dropdown-item>
</ak-dropdown>

JS Example

dropdownItem.checked = true;

Dropdown.open : Boolean

Open/closed state of the dropdown

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown open></ak-dropdown>

JS Example

dropdown.open = true;

Dropdown.position : string

Position of the dropdown. See the documentation of ak-layer for more details.

Kind: static property of Dropdown
Default: "bottom left"
HTML Example

<ak-dropdown position="right top"></ak-dropdown>

JS Example

dropdown.position = 'top right';

Dropdown.boundariesElement

Link to the target element

Kind: static property of Dropdown
JS Example

dropdown.target = document.getElementById("target");

Dropdown.disabled : Boolean

disabled state of the dropdown's trigger

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-trigger disabled>Dropdown trigger</ak-dropdown-trigger>
</ak-dropdown>

JS Example

dropdown.childNodes[0].disabled = true;

Dropdown.opened : Boolean

opened state of the dropdown's trigger

Kind: static property of Dropdown
Default: false
HTML Example

<ak-dropdown>
  <ak-dropdown-trigger opened>Dropdown trigger</ak-dropdown-trigger>
</ak-dropdown>

JS Example

dropdown.childNodes[0].opened = true;

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!

atlaskitui
ak-layerakutil-commonakutil-shared-stylesbabel-runtimeclassnameskeycodeskatejsak-iconak-button
jonelson-tmp-navigationak-tabs
10.0.2

7 years ago

10.0.1

7 years ago

10.0.0

7 years ago

9.0.3

7 years ago

9.0.2

7 years ago

9.0.1

7 years ago

9.0.0

7 years ago

8.0.0

7 years ago

7.0.0

8 years ago

6.0.0

8 years ago

5.9.1

8 years ago

5.9.0

8 years ago

5.8.1

8 years ago

5.8.0

8 years ago

5.7.7

8 years ago

5.7.6

8 years ago

5.7.5

8 years ago

5.7.4

8 years ago

5.7.3

8 years ago

5.7.2

8 years ago

5.7.1

8 years ago

5.7.0

8 years ago

5.6.0

8 years ago

5.5.0

8 years ago

5.4.0

8 years ago

5.3.0

8 years ago

5.1.0

8 years ago

5.0.0

8 years ago

4.1.0

8 years ago

4.0.0

8 years ago

3.4.5

8 years ago

3.4.4

8 years ago

3.4.3

8 years ago

3.4.2

8 years ago

3.4.1

8 years ago

3.4.0

8 years ago

3.3.0

8 years ago

3.2.1

8 years ago

3.2.0

8 years ago

3.1.0

8 years ago

3.0.0

8 years ago

2.0.0

8 years ago

1.18.0

8 years ago

1.17.0

8 years ago

1.14.0

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.4.2

8 years ago

0.4.0

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago

0.0.0

8 years ago