10.0.2 • Published 9 years ago

ak-dropdown v10.0.2

Weekly downloads
-
License
Apache-2.0
Repository
bitbucket
Last release
9 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

9 years ago

10.0.1

9 years ago

10.0.0

9 years ago

9.0.3

9 years ago

9.0.2

9 years ago

9.0.1

9 years ago

9.0.0

9 years ago

8.0.0

9 years ago

7.0.0

9 years ago

6.0.0

9 years ago

5.9.1

9 years ago

5.9.0

10 years ago

5.8.1

10 years ago

5.8.0

10 years ago

5.7.7

10 years ago

5.7.6

10 years ago

5.7.5

10 years ago

5.7.4

10 years ago

5.7.3

10 years ago

5.7.2

10 years ago

5.7.1

10 years ago

5.7.0

10 years ago

5.6.0

10 years ago

5.5.0

10 years ago

5.4.0

10 years ago

5.3.0

10 years ago

5.1.0

10 years ago

5.0.0

10 years ago

4.1.0

10 years ago

4.0.0

10 years ago

3.4.5

10 years ago

3.4.4

10 years ago

3.4.3

10 years ago

3.4.2

10 years ago

3.4.1

10 years ago

3.4.0

10 years ago

3.3.0

10 years ago

3.2.1

10 years ago

3.2.0

10 years ago

3.1.0

10 years ago

3.0.0

10 years ago

2.0.0

10 years ago

1.18.0

10 years ago

1.17.0

10 years ago

1.14.0

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.4.2

10 years ago

0.4.0

10 years ago

0.2.0

10 years ago

0.1.0

10 years ago

0.0.0

10 years ago