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.| URL | Description |
|---|---|
| https://static.design.if.eu/packages/@ids-wc/ddatepicker/0.6.8/datepicker.iife.js | The 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>
<ids-datepicker></ids-datepicker>
</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
<div
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
</div>Using npm:
// Example with the datepicker component
npm i --save @ids-wc/datepickerOr yarn:
// Example with the datepicker component
yarn add @ids-wc/datepickerBasic usage
import '@ids-wc/datepicker';List of available components
A list of available components for each framework is always [available here](/resources/component-status).Troubleshooting
If you experience any issues while getting set up with the libraries, please head over to [our MS Teams
channel](https://teams.microsoft.com/l/team/19%3a5653139ad54d4f06b340907b42f35aeb%40thread.skype/conversations?groupId=5f5dd61d-c19e-437a-9f65-721db7ef30b7&tenantId=de7e7a67-ae61-49d2-97a7-526c910ad675).
We're always glad to help!