Web Components

The library provides front-end developers and engineers a collection of reusable web components to build websites
and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in
prototype and production work.

This library uses Custom Elements and Shadow DOM.

Getting started

Using CDN

All components are available via CDN. This means that they can be added to your application without the need of any
bundler configuration. Each component is available by referencing a specific version.
https://static.design.if.eu/packages/@ids-wc/ddatepicker/0.6.8/datepicker.iife.jsThe Web Component JavaScript for the given version

Basic usage

The CDN artifacts define the custom elements for the browser, so they can be directly used once the script tag has
been added to the page. For example:
<script src='https://static.design.if.eu/packages/@ids-wc/ddatepicker/0.6.8/datepicker.iife.js'></script>
<div class='if input-wrapper'
  <input id='datepicker-01' name='datepicker-01' type='text' class='if input-field date' />
  <label for='datepicker-01' class='if label'>Choose date</label>
  <div class='if input-error'>Please enter a valid date</div>

Using ES IMports

#### Prerequisites

- A decent bash system. For example: iTerm, Terminal in VSCode, Linux Bash, Ubuntu Bash through Windows WSL2 etc
- Node >=14.17.3 and npm >=6.14.4

    class="if alert-banner warning"
    style="margin: 0;margin-top: 2rem;"

    To be able to install packages for If Design System, you are required to setup your environment with
    credentials. Please [follow this guide](/develop/getting-started/setup) before continuing


Using npm:

// Example with the datepicker component
npm i --save @ids-wc/datepicker

Or yarn:

// Example with the datepicker component
yarn add @ids-wc/datepicker

Basic usage

import '@ids-wc/datepicker';

List of available components

A list of available components for each framework is always [available here](/resources/component-status).


If you experience any issues while getting set up with the libraries, please head over to [our MS Teams
We're always glad to help!

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window