Dile Components

Overview:

Dile components is a collection of Custom Elements created and maintained by @EscuelaIT's students and instructors. These components are created to solve common purposes in websites and web applications. The components come with CSS custom properties to adapt the look and feel of the components according to user needs.

Features:

• Dile-app-drawer: Animated app menu.
• Dile-avatar: Configurable user avatar.
• Dile-breadcrumbs: Create custom breadcrumbs.
• Dile-button: Customizable button.
• Dile-button-icon: Customizable button with an icon.
• Dile-card: Card element.
• Dile-checkbox: Checkbox element.
• DileCloseDocumentClickMixin: Mixin to close elements when the user clicks outside themselves.
• CloseIcon: Close icon lit-html template.
• DileCloseOnEscPressed: Mixin to close an element when the esc key is pressed.
• Dile-confirm: Modal confirm/cancel actions.
• Dile-countdown-time: Countdown hours, minutes, and seconds to a date-time.
• Dile-datepicker: Input element to introduce a date with a calendar.
• Dile-calendar: Accessible calendar with styles.
• Dile-date-without-calendar: Input element to introduce a date.
• DileFormMixin: Introduces some functionality to forms.
• Dile-graph: Wrapper of Chart.js.
• Dile-hamburger: Animated hamburger menu icon.
• Dile-html-transform: Apply breaklines and links on text.
• Dile-icon: Show an icon you should provide.
• Dile-info-box: Styled box for information purposes, with close functionality.
• Dile-input: Customizable input element.
• Dile-input-integer: customizable input element for integers.

Summary:

Dile components is a collection of Custom Elements that solve common purposes in websites and web applications. The components are customizable and come with CSS custom properties for easy adaptation to different needs. Installation is straightforward, requiring the installation of the components via npm and importing them into your project. Once imported, you can easily use the desired component in your HTML.