logo polydile dile-components

Polydile Web Components

Design components

Custom elements made for all kind of projects and frameworks.

Quick start

To use one of the dile-components you have to install it on your project:

npm install dile-card

Once you have installed is necessary to import it with Javascript:

<script type="module">
    import '@dile/dile-card/dile-card.js';
  </script>
Because the standard es6 module imports are always imported by it's relative paths, you will need to use a frontend tool like Vite to convert this package name to the corresponding module path into node_modules. Find more information on how to use page.

Finally, you can use the component, like you use any other HTML tag.

<dile-card shadow-lg title="Welcome to dile-components">
    <p>Hi everybody!!</p>
  </dile-card>

Consult the component docs to find more markup examples and the available properties and configurations. For example see the dile-card component. All the components, mixins and utils are well documented and you will find some implementation examples to understand how they works in different situations.

Browser support

Since the dile-components are created on top of Web Components Javascript standard, will work on any browser that supports them.

Right now all the browers are fully compatible with Web Components, except Internet Explorer. So, is a great moment to join the Web Components movement.

There are some polyfills to increase the support of Web Components to the old Internet Explorer but we do not test dile-components catalog on it.