🔖 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+.