Render API Overview in UIkit Components 8.3
Overview of the UIkit Components Theme system and Render API.
Drupal's theme system gives themes complete control over the appearance of the site. UIkit Components makes this easier for themers and developers, without the need to learn complex code.
Utilizing Drupal's Render API, UIkit Components defines several render elements and provides default templates so users can rapid-develop themes based on the UIkit framework with ease.
Render Elements
UIkit Components defines render elements for some of the more basic UIkit components available.
Not all components are creating equal, however. Those which do not make sense as a render element, such as components which simply provide classes, will not be included with UIkit Components. These components are already available with the UIkit base theme; simply assign the classes to the elements you wish to add them to.
Other more complex components, such as the Switcher component, have not been added to UIkit Components just yet. It will take some time before they are available as we are currently working on their development.
Below you will find the various classes, functions and templates for render elements UIkit Components currently provides. The classes provide usage examples for each render element.
File
- ./
uikit_components.api.php, line 30 - Documentation landing page and topics.
Functions
Name![]() |
Location | Description |
---|---|---|
template_preprocess_uikit_accordion |
includes/ |
Prepares variables for UIkit Accordion templates. |
template_preprocess_uikit_alert |
includes/ |
Prrpares variables for UIkit Alert templates. |
template_preprocess_uikit_article |
includes/ |
Prepares variables for UIkit Article templates. |
template_preprocess_uikit_badge |
includes/ |
Prrpares variables for UIkit Badge templates. |
template_preprocess_uikit_breadcrumb |
includes/ |
Prepares variables for UIkit Breadcrumb templates. |
template_preprocess_uikit_button |
includes/ |
Prrpares variables for UIkit Button templates. |
template_preprocess_uikit_card |
includes/ |
Prepares variables for UIkit Card templates. |
template_preprocess_uikit_comment |
includes/ |
Prrpares variables for UIkit Comment templates. |
template_preprocess_uikit_countdown |
includes/ |
Prepares variables for UIkit Countdown templates. |
template_preprocess_uikit_description_list |
includes/ |
Prepares variables for UIkit Description List templates. |
template_preprocess_uikit_video |
includes/ |
Prrpares variables for UIkit Video templates. |
Classes
Name![]() |
Location | Description |
---|---|---|
UIkitAccordion |
src/ |
Provides a render element for the Accordion component. |
UIkitAlert |
src/ |
Provides a render element for the Alert component. |
UIkitArticle |
src/ |
Provides a render element for the Article component. |
UIkitBadge |
src/ |
Provides a render element for the Badge component. |
UIkitBreadcrumb |
src/ |
Provides a render element for the Breadcrumb component. |
UIkitButton |
src/ |
Provides a render element for the Button component. |
UIkitCard |
src/ |
Provides a render element for the Card component. |
UIkitComment |
src/ |
Provides a render element for the Comment component. |
UIkitCountdown |
src/ |
Provides a render element for the Countdown component. |
UIkitDescriptionList |
src/ |
Provides a render element for the Description List component. |
UIkitVideo |
src/ |
Provides a render element for the Video component. |
Files
Name![]() |
Location | Description |
---|---|---|
uikit-accordion.html.twig |
templates/ |
Default theme implementation for a UIkit Accordion. |
uikit-alert.html.twig |
templates/ |
Default theme implementation for a UIkit Alert. |
uikit-article.html.twig |
templates/ |
Default theme implementation for a UIkit Article. |
uikit-badge.html.twig |
templates/ |
Default theme implementation for a UIkit Badge. |
uikit-breadcrumb.html.twig |
templates/ |
Default theme implementation for a UIkit Breadcrumb. |
uikit-button.html.twig |
templates/ |
Default theme implementation for a UIkit Button. |
uikit-card.html.twig |
templates/ |
Default theme implementation for a UIkit Card. |
uikit-comment.html.twig |
templates/ |
Default theme implementation for a UIkit Comment. |
uikit-countdown.html.twig |
templates/ |
Default theme implementation for a UIkit Countdown. |
uikit-description-list.html.twig |
templates/ |
Default theme implementation for a UIkit Description List. |
uikit-video.html.twig |
templates/ |
Default theme implementation for a UIkit Video. |