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.

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

• <uni-chip /> demo