Once you have installed FrankenstyleKit, we can now include the JavaScript to control the behavior of our components.
You can include the JavaScript files on your page like so:
You can import the JavaScript from frankenstyle, which you installed earlier, into your app.js file.
UIkit is listening for DOM manipulations and will automatically initialize, connect and disconnect components as they are inserted or removed from the DOM. That way it can easily be used with JavaScript frameworks like Vue.js and React.
You can use UIkit components by adding uk-* or data-uk-* attributes to your HTML elements without writing a single line of JavaScript. This is UIkit’s best practice of using its components and should always be considered first.
Note React
will work with data-uk-* prefixes only.
You can also initialize components via JavaScript and apply them to elements in your document.
You can retrieve an already initialized component by passing a selector or an element as a first Argument to the component function.
Omitting the second parameter will not re-initialize the component but serve as a getter function.
Each component comes with a set of configuration options that let you customize their behavior. You can set the options on a per-instance level or globally.
Options can be set as shown in the following examples.
With the key: value; format:
In valid JSON format:
As single attributes:
Or as single attributes prefixed with data-:
You can also pass options to the component constructor programmatically.
Options passed via the component attribute will have the highest precedence, followed by single attributes and then JavaScript.
Component options can be changed globally by extending a component. It will affect newly created instances only.
Omitting the second parameter, will apply the custom behavior to every UIkit instance created afterwards.
Programmatically, components may be initialized with the element, options arguments format in JavaScript. The element argument may be any Node, selector or jQuery object. You’ll receive the initialized component as a return value. Functional Components (e.g. Notification) should omit the element parameter.
Note
The options names must be in their camel-cased representation, e.g. show-on-up
becomes showOnUp.
After initialization, you can get your component by calling the same initialization function, omitting the options parameter.
Note
Using UIkit[componentName](selector) with CSS selectors will always return the
first occurrence only! If you need to access all instances do query
the elements first. Then apply the getter to each element separately - UIkit[componentName](element).
Initializing your components programmatically gives you the possibility to invoke their functions directly.
Any component functions and variables prefixed with an underscore are considered as part of the internal API, which may change at any given time.
Each component triggers DOM events that you can react to. For example when a Modal is shown or a Scrollspy element becomes visible.
The component’s documentation page lists its events.
Note Components often trigger events with the same name (e.g. ‘show’). Usually events bubble through the DOM. Check the event target, to ensure the event was triggered by the desired component.
Sometimes, components like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to adjust or fix their height and other dimensions.
UIkit offers several ways of updating a component. Omitting the type parameter will trigger an update event.
If you need to make sure a component is properly destroyed, for example upon removal from the DOM, you can call its $destroy function.
You might need to execute code after UIkit is loaded, but before it initializes its components on the page.
This hook allows you to register custom components or component mixins.
You can hook into this step in the lifecycle by listening for the uikit:init event UIkit triggers on the document.