Dhl User Interface Library's Components

Our UI components are implemented using the robust StencilJS framework. StencilJS is a tool that generates standards-compliant Web Components, making it a perfect choice for creating reusable, scalable, and maintainable components. Whether you're working with Angular, React, or Vue, we've got you covered.

In this documentation, you'll find basic examples for each of the three supported frameworks - Angular, React, and Vue. These examples are designed to help you understand how to integrate the User Interface components into your projects seamlessly.

But that's not all! We've also included interactive examples that allow you to set and unset component properties. This hands-on approach will give you a deeper understanding of how our components work and how you can customize them to suit your needs.

So, whether you're a seasoned developer or just starting out, we're confident that our UI components and this documentation will make your development process smoother and more efficient. Dive in, and happy coding!

If you need help in using the DHL User Interface Library make sure to read our Getting Started Section!

Leveraging Utility Constants for UI Components

Our User Interface components come with the added advantage of utility constants. These constants simplify the process of assigning valid values to component properties, reduce the possibility of errors and enriching the developer experience.

The constants follow a naming pattern: [COMPONENT-NAME].[PROPERTY_NAME].[PROPERTY_VALUE]. For instance, you can assign a variant to a button like so: variant=DHL_BUTTON.VARIANT.OUTLINE.

To incorporate these constants into your application, you need to import them. Regardless of your chosen framework, you can use the following syntax (using DHL_BUTTON as an example):

import * as DUIL_CONSTANTS from "@dhl-official/stencil-library";

const { DHL_BUTTON } = DUIL_CONSTANTS;

Alternatively, you can use this simpler syntax:

import { DHL_BUTTON } from "@dhl-official/stencil-library";

You can find the available constants and their values in the specific property documentation section for each component. Alternatively, you can discover them by importing the constant for the component you need and leveraging your IDE's autocomplete feature. This way, you can easily explore and utilize the full range of constants available for each component.