02Dec

Preloaders

We have ceased to notice that majority of components that need a little time in order to fully load or perform can be a time-consuming action accompanied by small, pleasant indicators that visualize the process. You can stumble upon these tiny assistants everywhere — apps in cellphones or tablets, personal websites, online services are highly populated with such animated control elements that try to make the user experience more pleasant and more enjoyable.

Usually it is a simple throbber that for a long time was a gif animation, and only recently has become a code-based solution that involves utilization of either JS or/and CSS, thereby opening up almost endless possibilities to developers.

Default

Puff

Audio

Ball Triangle

Bars

Circles

Grid

Oval

Rings

Tail Spin

Three Dots

Simple

Gooey

Logo Gooey

Spiner

22Jul

Accordion

Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

Usage

To apply the Accordion component, add the uk-accordion class and the data-uk-accordion attribute to a container element. Add the uk-accordion-content class to each of the content sections within the container. Finally, add the uk-accordion-title class to any element, like a heading, above the content section to create a toggle.

Example

Heading 1

Heading 2

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Markup

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

Muliple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the {collapse: false} option to the date attribute.

Example

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Heading 3

JavaScript options

Option Possible value Default Description
showfirst boolean true Show first item on init
collapse boolean true Allow multiple open items
animate boolean true Animate toggle
easing string swing Animation function
duration integer 300 Animation duration
toggle string .uk-accordion-title Css selector for toggles
containers string .uk-accordion-content Css selector for content containers
clsactive string uk-active Class to add when an item is active

Init element manually

var accordion = UIkit.accordion(element, { /* options */ });

Events

Name Parameter Description
toggle.uk.accordion event, active, toggle, content On item toggle

Chameleon I.T are a client focused consultancy seeking to deliver IT efficiency gains through software and consulting solutions.

These solutions seek to take existing systems and optimise them in conjunction with adding cutting edge technologies to complement.

 

Map

Contact us

Phone:
01727 831 383
Email:
info@chameleonit.co.uk
Mon-Fri:
9am to 5pm

Most Read

Search