UI Elements
Use the UI Elements library to create consistent user interfaces faster. All elements are optimized for accessibility and performance. Thanks to the use of native javascript they can be used in any project.
Download
With this sketch library you have access to the TUI themed UI Elements.
TUI Elements
Add Library to Sketch
https://www.sketch.com/s/7172f2d1-823e-4ccb-89ad-71eec62cff46
Usage
You only need to include the compiled CSS and JS from the TUI cloud.
CSS only 8 Kb
<link rel="stylesheet" href="https://cloud.tui.com/ui/ui-elements/ui-elements/ui-elements.css">JS native 136 Kb
<script scr="https://cloud.tui.com/ui/ui-elements/ui-elements/ui-elements.js"></script>Using ui-elements with React
1. include the ui-elements script
either natively
<script
defer
type="module"
src="https://cloud.tui.com/common/ui-elements/master/ui-elements/ui-elements.esm.js"
></script>
<script
defer
nomodule
src="https://cloud.tui.com/common/ui-elements/master/ui-elements.js"
></script>or preferably with the TUI beone-synergy library @common/environment-util
// for example in index.tsx
import { addUiElementsScripts } from "@common/environment-util";
const stageConfig: StageConfig = {
[EnvStage.ACCEPTANCE]: /.*your-acceptance-stage-url/,
[EnvStage.PRODUCTION]: /.*your-production-stage-url/
};
addUiElementsScripts(stageConfig);addUiElementsScripts will take care of including the ui-elements scripts from the correct stage (acceptance or production).
2. add Type definitions
The ui-elements library is currently not available as node module. So create your own type definition file, for example ui-elements.d.ts and define the elements that you need to use:
declare namespace JSX {
export interface IntrinsicElements {
// very simple
"ui-text": any;
// or more precisely
"ui-symbol": {
filled?: boolean;
symbol: string;
transform?: string;
weight?: "light" | "normal" | "bold" | "ultrabold";
};
}
}Usage
Simple elements without event handling
<ui-symbol transform="rotate90" symbol="aircraft" filled />Elements with event handling
React and web components currently do not play together very well. For using web components in React, some wrapper logic is needed to adapt the event handling.You can use the Npm helper library webcomponents-in-react to create wrappers for the ui-elements, for example:
// UiCheckbox.tsx
import { FunctionComponent } from "react";
import { adapt } from "webcomponents-in-react";
// copied from ui-elements
export interface UiCheckboxResponse {
name: string;
value: string;
checked: boolean;
}
export interface UiCheckboxProps {
checked: boolean;
disabled?: boolean;
onUiCheckboxChanged: (value: CustomEvent<UiCheckboxResponse>) => void;
}
export const UiCheckbox: FunctionComponent<UiCheckboxProps> = adapt(
"ui-checkbox",
{
// event mapping
onUiCheckboxChanged: "onUiCheckboxChanged"
}
);Use your wrapper like any React component:
<ui-checkbox checked={true} disabled={false} onUiCheckboxChanged={(data): void => console.log("checked: ", data.detail.checked)} /> Catalog
Basic
ui-text
Formats texts according to defined font sizes, weights and colors.
<ui-text align="center"expand="false"toggleTitle="false">ui-text</ui-text>ui-divider
A dividing line delimits various content and ensures better readability.
<ui-divider size="large"variant="background">ui-divider</ui-divider>ui-layer
A Layer is a component that contains textual content only.
<ui-layer radius="default"shadow="inset"variant="background">ui-layer</ui-layer>ui-symbol
Provides a curated selection of symbols from the official TUI Icons Library.
<ui-symbol color="s"fill="s"filled="false"symbol="S"transform="s"weight="s">ui-symbol</ui-symbol>ui-text
Formats texts according to defined font sizes, weights and colors.
<ui-text color="T"size="large"weight="bold">ui-text</ui-text>ui-type
Generates predefined ui text elements for structuring content.
<ui-type element="h1"variant="b1">ui-type</ui-type>Information
ui-alert
An alert contains a message that requires the user's immediate attention and can be read with or without requiring an action from the user.
<ui-alert filled="false"icon="S"variant="background">ui-alert</ui-alert>ui-badge
coming soon
<ui-badge filled="false"icon="S"variant="custom">ui-badge</ui-badge>ui-brand-label
Product logos indicate to the customer that a package or hotel is part of a TUI differentiated or non-differentiated product type.
<ui-brand-label brand="s"variant="s">ui-brand-label</ui-brand-label>ui-brand-tile
Product logos indicate to the customer that a package or hotel is part of a TUI differentiated or non-differentiated product type.
<ui-brand-tile brand="s"width="s">ui-brand-tile</ui-brand-tile>ui-flag
An element that is used to display different national flags, usually to show the current language of the interface.
<ui-flag country="C">ui-flag</ui-flag>ui-hotel-category
TUI ratings are TUI generated classifications determined by certain set of market standards.
<ui-hotel-category category="s"weight="s">ui-hotel-category</ui-hotel-category>ui-label
Describes a related input field.
<ui-label disabled="false"labelId="s">ui-label</ui-label>ui-loading-sun
Make the loading state of components visible in order to shorten waiting times.
<ui-loading-sun variant="s">ui-loading-sun</ui-loading-sun>ui-mark
Emphasis on important text passages or strings within text blocks.
<ui-mark variant="default">ui-mark</ui-mark>ui-notification
Notifies the user about changes of an interaction states of a component.
<ui-notification closable="false"corner="false"disabled="false"notificationStyle="a"size="large"variant="default">ui-notification</ui-notification>ui-rating
Presentation of TUI's own guest reviews for hotel and facilities.
<ui-rating icon="S"label="s"percentage="false"score="s"type="bar"value="n"variant="R">ui-rating</ui-rating>ui-tooltip
Tooltips are used to display informative text about an element, where we have limited space to show the content in the initial view in the interface. They display when users hover over, focus on, or tap an element (and disappear when they exit the element or tap the element again).
<ui-tooltip boxSizing="s"delay="n"disabled="false"maxWidth="n"position="BOTTOM"reference="parent"variant="default">ui-tooltip</ui-tooltip>ui-video-cloud
A player for media files like videos, movies or virtual tours hosted in the brightcove video cloud.
<ui-video-cloud account="s"controls="false"muted="false"player="s"video="n">ui-video-cloud</ui-video-cloud>Interaction
ui-autosuggest
An autosuggest field.
<ui-autosuggest autofocus="false"categoryClasses="s"iconItem="s"iconLeft="s"iconRight="s"minSearchstringLength="n"placeholder="s"textNoResults="s"variant="s">ui-autosuggest</ui-autosuggest>ui-button-group-radio
A group of buttons, to trigger an action within an interface. Only one button of the group can be active at one time.
<ui-button-group-radio checked="false"name="s"value="a"variant="default">ui-button-group-radio</ui-button-group-radio>ui-button-group
A group of buttons, to trigger an action within an interface.
<ui-button-group >ui-button-group</ui-button-group>ui-button
A button is used to trigger an action within an interface. There are primary, secondary, tertiary, hero, search, and shortlist buttons.
<ui-button active="false"disabled="false"size="large"type="s"variant="default"variety="native">ui-button</ui-button>ui-checkbox
A checkbox is an element allowing the user to select none, one, or more items from a predefined list.
<ui-checkbox checked="false"disabled="false"name="s"type="s"value="s"variant="default">ui-checkbox</ui-checkbox>ui-chip
An alternative switch button that is supposed to be used in a group of several units, so it functions as tag cloud where the user can choose multiple interests, destinations, etc.
<ui-chip category="s"checked="false"disabled="false"icon="S"name="s"number="n"value="s"variant="default">ui-chip</ui-chip>ui-count
The counter is a numbered radio-button-group that can be used to define for example the number of travelers.
<ui-count checked="n"disabled="false"size="n"start="n"value="a"variant="C">ui-count</ui-count>ui-form-field
Combines an input with its describing label.
<ui-form-field autoFocus="false"cross="false"disabled="false"floatingLabel="false"icon="S"label="s"readonly="false"state="error"variant="default">ui-form-field</ui-form-field>ui-link
Links are elements that help users navigate websites by jumping to a new location when clicked or tapped.
<ui-link filled="false"href="s"rel="s"symbol="S"symbolPosition="end"symbolTransform="rotate135"target="blank"weight="s">ui-link</ui-link>ui-number
A form field for numbers within a specified range.
<ui-number max="n"min="n"reflectValidationState="false"validationState="error"value="n">ui-number</ui-number>ui-radio
A radio button is an element forcing the user to choose one option of a set of two or more mutually exclusive options from a predefined list.
<ui-radio checked="false"disabled="false"hideRadio="false"name="s"value="a"variant="default">ui-radio</ui-radio>ui-slider
A slider allows a user to select a value within a range of pre-defined values with a maximum and minimum value.
<ui-slider disabled="false"scaleMax="n"scaleMin="n"valueMax="n"valueMin="n">ui-slider</ui-slider>ui-switch
A toggle switch allows the user to switch between one state or another, and is used where there are two states, one of which is always "on" and only one can be active at any one time.
<ui-switch checked="false"disabled="false"hasPadding="false"name="s"value="s"variant="default">ui-switch</ui-switch>ui-swyt
Search while you type.
<ui-swyt data="s"enforceMinInputLength="false"initialValue="s"label="s"minInputLength="n"placeholder="s"readonly="false"resultHeading="s">ui-swyt</ui-swyt>ui-calendar-day
Misc
<ui-calendar-day endDate="s"index="n"locale="s"startDate="s"week="D">ui-calendar-day</ui-calendar-day>ui-dropdown
Misc
<ui-dropdown height="s"label="s">ui-dropdown</ui-dropdown>ui-image
Misc
<ui-image height="s"imageUrl="s"resizing="s"width="s">ui-image</ui-image>ui-loading-dot
Misc
<ui-loading-dot >ui-loading-dot</ui-loading-dot>ui-modal
Misc
<ui-modal >ui-modal</ui-modal>ui-video-cloud-shadow
Misc
<ui-video-cloud-shadow account="s"player="s"video="n">ui-video-cloud-shadow</ui-video-cloud-shadow>Marketing
ui-catcher
An eye catcher is a visual device to bring special offers to the customer's attention.
<ui-catcher size="large"variant="backgroundDefault">ui-catcher</ui-catcher>ui-saving
coming soon
<ui-saving variant="default">ui-saving</ui-saving>