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.

Install

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
  • To be able to install packages for If Design System, you are required to setup your environment with credentials. Please follow this guide 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

Getting started

What's included

@ids-wc/datepicker/
├── dist
│   ├── datepicker.esm.js
│   └── datepicker.iife.js
└── src
    └── datepicker.js
    └── datepicker.styl (not for every component)

CDN

You can also use the CDN for specific components:

Scripts URL Description
JS https://static.design.if.eu/packages/@ids-wc/ddatepicker/14.0.1/datepicker.iife.js The Web Component JavaScript for the given version

Example usage

<script src="https://static.design.if.eu/packages/@ids-wc/ddatepicker/14.0.1/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>
  <ids-datepicker></ids-datepicker>
</div>

Troubleshooting

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

Table of Contents

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