Getting started
Installation
Each component in WC Library is published in a separated npm package.
To install it, select the right component package name then run npm install command
Example for installing Text Field component
npm install @c2n/text-fieldImport component in your project
To import components into your project. Uses import syntax of javascript
Example for importing Text Field component
import "@c2n text-field"Usage
Customize components with CSS Variable
Each component has a separated set of css variables. The prefix of css variable name is the component tag.
Example for c2-text-field component, the css variables name will be --c2-text-field-*
Example for customizing Text Field component
<c2-text-field class="my-custom-text-field"></c2-text-field>
<style>
.my-custom-text-field {
--c2-text-field-border-radius: 16px;
--c2-text-field-bg-color: rgb(226 232 240);
--c2-text-field-focus-bg-color: rgb(255 255 255);
}
</style>Extend components with Slot
Another way to customize components is used slot.
Example for Adding help icon for Text Field component
<c2-text-field class="my-custom-text-field">
<svg id="help-icon" width="24px" height="24px" slot="help-icon" viewBox="0 -960 960 960">
<path
d="m480-267.077 177.846-178.615q5.615-5.616 11.654-5.616t11.654 5.616q6.385 6.384 6.385 11.654 0 5.269-6.385 11.653L499.615-240.846q-4.23 4.231-9.192 6.346-4.961 2.116-10.423 2.116t-10.423-2.116q-4.962-2.115-9.192-6.346L278.846-422.385q-5.615-5.615-5.115-11.653.5-6.039 6.115-11.654 6.385-6.385 11.654-6.385t11.654 6.385L480-267.077Zm0-283.462 177.846-178.615q5.615-5.615 11.654-5.615t11.654 5.615q6.385 6.385 6.385 11.654t-6.385 11.654L499.615-524.308q-4.23 4.231-9.192 6.347-4.961 2.115-10.423 2.115t-10.423-2.115q-4.962-2.116-9.192-6.347L278.846-705.846q-5.615-5.615-5.115-11.654t6.115-11.654q6.385-6.385 11.654-6.385t11.654 6.385L480-550.539Z"
/>
</svg>
</c2-text-field>