🔖 This is the initial approach to the "dile-components" catalog. We are developing a new iteration to reorganize the "dile" custom elements more effectively. The latest version of this component catalog can be found in this repository: https://github.com/Polydile/Components.
We have a new webiste with our components catalog docs and demos!! 🎉
https://dile-components.polydile.com/
Dile components is a collection of Custom Elements created and maintained by @EscuelaIT's students and instructors.
This components are created to solve common purpouses in websites and web applications. Each compoment has many of CSS custom properties to adapt the component look & feel to your neeeds.
| Component / Mixin | Package name | Short description | npm version |
|---|---|---|---|
| dile-app-drawer | @dile/dile-app-drawer | Animated app menu |  |
| dile-avatar | @dile/dile-avatar | Configurable user avatar |  |
| dile-breadcrumbs | @dile/dile breadcrumbs | Create custom breadcrumbs |  |
| dile-button | @dile/dile-button | Customizable button |  |
| dile-button-icon | @dile/dile-button-icon | Customizable button with an icon |  |
| dile-card | @dile/dile-card | Card element |  |
| dile-checkbox | @dile/dile-checkbox | Checkbox element |  |
| DileCloseDocumentClickMixin | @dile/dile-close-document-click-mixin | Mixin to close elements when user clicks outside themselves |  |
| closeIcon | @dile/dile-close-icon-template | Close icon lit-html template |  |
| DileCloseOnEscPressed | @dile/dile-close-on-esc-pressed-mixin | Mixin to close element when esc key is pressed |  |
| dile-confirm | @dile/dile-confirm | Modal confirm/cancel actions |  |
| dile-countdown-time | @dile/dile-countdown-time | Countdown hours, minutes and seconds to a date-time |  |
| dile-datepicker | @dile/dile-datepicker | Input element to introduce a date with a calendar |  |
| dile-calendar | @dile/dile-datepicker | Accesible calendar with styles | |
| dile-date-without-calendar | @dile/dile-date-without-calendar | Input element to introduce a date |  |
| DileFormMixin | @dile/dile-form-mixin | Introduces some functionality to forms |  |
| dile-graph | @dile/dile-graph | Wrapper of Chart.js |  |
| dile-hamburger | @dile/dile-hamburger | Animated hamburger menu icon |  |
| dile-html-transform | @dile/dile-html-transform | Apply breaklines and links on text |  |
| dile-icon | @dile/dile-icon | Show an icon you should provide |  |
| dile-info-box | @dile/dile-info-box | Styled box for information purposes, with close functionality |  |
| dile-input | @dile/dile-input | Customizable input element |  |
| dile-input-integer | @dile/dile-input | Customizable input element to integer values | |
| dile-input-money | @dile/dile-input | Customizable input element to money values (two decimals) | |
| dile-input-percentage | @dile/dile-input | Customizable input element to percentage values | |
| dile-input-search | @dile/dile-input-search | Customizable text search element |  |
| dile-input-number-mask | @dile/dile-input-number-mask | Customized mask to input elements |  |
| dile-menu-hamburger | @dile/dile-menu-hamburger | Complete app menu |  |
| dile-menu-overlay | @dile/dile-menu-overlay | Menu interface on floating layer |  |
| dile-message | @dile/dile-message | Display a message with a close icon |  |
| dile-modal | @dile/dile-modal | Customizable modal box interface |  |
| dile-nav | @dile/dile-nav | Nav var |  |
| dile-network | @dile/dile-network | Network status helper |  |
| dile-order-switch | @dile/dile-order-switch | Change order interface |  |
| DileOverlayMixin | @dile/dile-overlay-mixin | Mixin to create overlay elements easily |  |
| dile-pages | @dile/dile-pages | Display one content or other |  |
| dile-password | @dile/dile-password | Customizable input password element |  |
| dile-progress-bar | @dile/dile-progress-bar | Customizable progress bar component |  |
| dile-radio | @dile/dile-radio-group | One radio button | |
| dile-radio-group | @dile/dile-radio-group | Group of radio buttons |  |
| dile-rating | @dile/dile-rating | Star rating interface |  |
| dile-rating-scale-question | @dile/dile-rating-scale-question | Semantic-differential rating-scale questions |  |
| DileSelectorMixin | @dile/dile-selector-mixin | Mixin to select one item from a list |  |
| dile-select | @dile/dile-select | Select native element with more functionality |  |
| dile-select-ajax | @dile/dile-select | Select element that loads its values using ajax | |
| dile-selector | @dile/dile-selector | Generic selector interface |  |
| dile-selector-item | @dile/dile-selector | Generic selector item | |
| dile-slide-show | @dile/dile-slide-show | Collapsable content with animation |  |
| DileSlideDownMixin | @dile/dile-slide-down-mixin | Mixin to create slidedown/slideup effects | |
| dile-smooth-scroll | @dile/dile-smooth-scroll | Create smooth scrolls easily |  |
| DileSmoothScrollMixin | @dile/dile-smooth-scroll | Methods to scroll the entire document | |
| DileSmoothScrollElementMixin | @dile/dile-smooth-scroll | Scroll on elements own scrolling section | |
| dile-social-icon | @dile/dile-social-icon | SVG icons of many social networks |  |
| dile-spinner | @dile/dile-spinner | CSS spinner loader |  |
| dile-spinner-modal | @dile/dile-spinner | CSS spinner loader in a overlay | |
| dile-spinner-horizontal | @dile/dile-spinner | CSS spinner with horizontal bars animation | |
| dile-tabs | @dile/dile-tabs | Tabs interface |  |
| dile-tab | @dile/dile-tabs | One tab | |
| dile-textarea | @dile/dile-textarea | Customizable textarea element |  |
| dile-toast | @dile/dile-toast | Toast feedback messages |  |
| dile-toast-persistent | @dile/dile-toast | Display a toast with message for a undefined time |  |
| dile-tooltip | @dile/dile-tooltip | Create tooltip elements |  |
| icons | @dile/icons | Some utility svg icons to use in dile-components |  |
1.- Install any of the web components
npm install @dile/dile-input
2.- Import the component
Into your HTML page
<script src="./node_modules/@dile/dile-input/dile-input.js" type="module"></script>
... or into your module script
import '@dile/dile-input/dile-input';
3.- Use the component
<dile-input
name="name"
label="Name"
value="John"
></dile-input>
4.- Read the component documentation for more information about component properties, CSS custom properties, API methods and custom events.
Each component documentation is on the related package folder. For example, the <dile-input> documentation is located on the file: packages/dile-input/README.md.
5.- Serve your proyect
There are many development servers to help you in this area. Our recomendation is to use web-dev-server.
6.- Enjoy!
This is a monorepository managed by Lerna.
To develop web components or run the demos allocated on the demo folder, you need to use Lerna to solve the common dependencies installed on the monorepo.
1.- Clone this repository
2.- Run npm install to install the dependencies
3.- Run npm run start to launch the demos
When a new component is published in its own package, in order to use the component in the demos or docs is necesary to run 'npm install'. With this command the package will be available in the npm workspace managed by Lerna v7+.