Skip to content

Latest commit

 

History

History
56 lines (35 loc) · 3.22 KB

index.md

File metadata and controls

56 lines (35 loc) · 3.22 KB
meta.Title meta.Description
UI Library
A guide for getting started working with the Umbraco UI Library

UI Library

:::note Please be aware that the topic covered in this document is not a part of the Umbraco CMS at this time.

In the Backoffice UI API Documentation article you can find links to relevant resources for working with the Umbraco backoffice. :::

The Umbraco UI Library is a set of web components that can be used to build Umbraco User Interface. The UI Library separates the user interface from Umbraco’s business logic and creates a unified user experience, with coherent styling and naming, across all the Umbraco platforms and projects including the ones developed by you.

With the UI Library, you get a collection of visual building blocks that consists of pieces to build any UI in Umbraco. Each component is a building block updating its display according to the data passed to it.

Currently, the UI Library is a standalone project. The UI Library components are not yet shipped to the backoffice with Umbraco 9.

UI Library Storybook

Storybook is an application that gathers all the components together, holds their documentation, and showcases different use case scenarios. You can explore all the components through stories reflecting their use cases.

Each story has interactive controls that allow you to change the state of the component in real-time. Every publicly available property is editable in Storybook, so you can test out various configurations and use-cases.

You can also change the stylesheet of custom properties, to see how the component will look like. Every story has a code example that you can copy and paste into your project, allowing you to implement the components in your own packages and extensions.

Installing the UI Library Components

You can download the UI Library package from Github.

If you are installing a component via npm, there are two ways to import it:

  1. To import a specific component and register it at the same time, use the following command:

    import '@umbraco-ui/uui-button/lib';

  2. To build on top of the components functionality, you can extend its class:

    import { UUIButtonElement } from 
'@umbraco-ui/uui-button/lib/uui-button.element';

For more information on installation, CDN, or included components, see the Readme file in the Github project.

Getting Started with the UI Library

The Storybook is the starting point for working with the Umbraco UI Library. The Storybook contains two tabs:

  1. Canvas - The Canvas tab allows to use the interactive controls. Canvas Tab
  2. Docs - Here, you can find code examples for all the stories and use them in your markup. You can look it up by tag name or head to the project repository, where, in the packages folder, you will find all the component packages with all the necessary scripts and examples in the readme files. Docs Tab