UNi Chip

<uni-chip /> is an encapsulated Web Component built upon the foundation of the uniopen design language.

Implementation is straightforward: simply slot a standard checkbox or radio <input> element inside <uni-chip />. The component automatically transforms the input's visual presentation and interactive behaviors to seamlessly align with uniopen design specifications, allowing effortless adaptation via native HTML attributes and JavaScript properties.

Let's see what can <uni-chip /> do ?

  • size：

  • theme：

  • disabled：

Basic Usage

<uni-chip /> is a web component. All we need to do is put the required script into your HTML document. Then follow <uni-chip />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/uni-chip/mjs/wc-uni-chip.js"> </script>

Structure

Put <uni-chip /> into HTML document. It will have different functions and looks with attribute mutation.

<uni-chip> <input slot="chip" data-content="content" type="checkbox" value="my-value" /> </uni-chip>

<uni-chip /> dynamically adjusts its user interface and core functionality by strictly adhering to the attributes of the encapsulated input element. Developers can leverage these capabilities and observe the corresponding behavioral shifts by modifying standard attributes—such as disabled—directly on the input element.

<uni-chip> <input slot="chip" data-content="content" type="checkbox" value="my-value" disabled /> </uni-chip>

JavaScript Instantiation

<uni-chip /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { UniChip } from 'https://unpkg.com/uni-chip/mjs/wc-uni-chip.js'; const checkboxTemplate = document.querySelector('.my-checkbox-template'); // use DOM api const nodeA = document.createElement('uni-chip'); nodeA.appendChild(checkboxTemplate.content.cloneNode(true)); document.body.appendChild(nodeA); // new instance with Class const nodeB = new UniChip(); nodeB.appendChild(checkboxTemplate.content.cloneNode(true)); document.body.appendChild(nodeB); </script>

Attributes

<uni-chip /> component exposes a curated set of attributes, enabling developers to dynamically adjust the user interface. This provides the flexibility to tailor the component’s appearance to seamlessly adapt to any given context.

size

The size attribute configures the overall dimensions of <uni-chip />. The component currently supports two standard options: large and medium, defaulting to medium.

<uni-chip> <input slot="chip" data-content="content" type="checkbox" value="my-value" size="medium" /> </uni-chip>

theme

Configures the visual theme of the <uni-chip /> to accommodate different styling requirements. It currently supports main and subtle. The default value is main.

<uni-chip> <input slot="chip" data-content="content" type="checkbox" value="my-value" theme="main" /> </uni-chip>

Properties

Property Name Type Description
size String Getter / Setter size. size configures the overall dimensions of <uni-chip />. The component currently supports two standard options: large and medium, defaulting to medium.
theme String Getter / Setter theme. theme configures the visual theme of the <uni-chip /> to accommodate different styling requirements. It currently supports main and subtle options. The default value is main.

Reference