https://github.com/soywod/catalyx
⚗️ Collection of native Web Components.
https://github.com/soywod/catalyx
collection custom-element custom-elements html-template javascript library native shadow-dom typescript web-component web-components
Last synced: 8 months ago
JSON representation
⚗️ Collection of native Web Components.
- Host: GitHub
- URL: https://github.com/soywod/catalyx
- Owner: soywod
- License: mit
- Archived: true
- Created: 2020-04-20T21:13:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T17:19:26.000Z (almost 3 years ago)
- Last Synced: 2025-01-30T19:07:09.905Z (9 months ago)
- Topics: collection, custom-element, custom-elements, html-template, javascript, library, native, shadow-dom, typescript, web-component, web-components
- Language: TypeScript
- Homepage: https://catalyx.soywod.me
- Size: 1.21 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ⚗️ Catalyx [](https://travis-ci.org/soywod/catalyx) [](https://www.npmjs.com/package/catalyx)
Catalyx is a collection of native web components:
✔ based on **Web Components** standards
✔ written in pure **JavaScript**
✔ lightweight, performant and customizable
*Live demo at https://catalyx.soywod.me.*
## Table of contents
- [Roadmap to `v1`](#roadmap-to-v1)
- [Buttons](#buttons)
- [Button](#button)
- [Switch](#switch)
- [Choice](#choice)
- [Fields](#fields)
- Text based
- [Text](#text)
- [Email](#email)
- [Tel](#tel)
- [URL](#url)
- [Password](#password)
- [Phone](#phone)
- Number based
- [Integer](#integer)
- [Float](#float)
- [Currency](#currency)
- [Pickers](#pickers)
- [Date](#date)
- [Select](#select)
- [File](#file)
- [Dialogs](#dialogs)
- [Tooltip](#tooltip)
- [Toast](#toast)
- [Modal](#modal)
- [Layouts](#layouts)
- [Heading](#heading)
- [Form](#form)
- [Router](#router)
- [Changelog](https://github.com/soywod/catalyx/blob/master/CHANGELOG.md)
- [License](https://github.com/soywod/catalyx/blob/master/LICENSE)
## Roadmap to `v1`
- [ ] Buttons
- [X] Button
- [X] Switch
- [ ] Choice
- [X] Fields
- [X] Text based
- [X] Text
- [X] Email
- [X] Tel
- [X] URL
- [X] Password
- [X] Phone
- [X] Number based
- [X] Integer
- [X] Float
- [X] Currency
- [X] Pickers
- [X] Date
- [X] Select
- [X] File
- [ ] Dialogs
- [X] Tooltip
- [X] Toast
- [ ] Modal
- [X] Layouts
- [X] Heading
- [X] Form
- [X] Router
## Buttons
### Button
## Fields
### Text
Control for entering a single or multiple lines of text.
#### Usage
```html
```
#### Attributes
Accept all `` attributes.
### Email
Control for entering an email. Extends [Text field](#text).
#### Usage
```html
```
#### Attributes
Accept all `` attributes.
### Password
Control for entering a password. Extends [Text field](#text). The password can be
shown or hidden with the toggler on the right side.
#### Usage
```html
```
#### Attributes
Accept all `` attributes.
### Integer
Control for entering an integer. The value can be incremented and decremented via the input (right buttons), via the keyboard (top and bottom arrow), and via the mouse (wheel).
#### Usage
```html
```
#### Attributes
Accept all `` attributes.
### Float
Control for entering a float.
#### Usage
```html
```
### Currency
Control for entering a currency.
#### Usage
```html
```
### Date picker
Control for picking a date based on [`Popper`](https://popper.js.org/) positionning engine.
#### Usage
```html
```
#### Attributes
#### Properties
#### Events
Name|Description|Example
---|---|---
`change`|Called when the date changes. Date available in `evt.detail.date`.|`elem.addEventListener("change", handler)`
## Tooltip
Text popup tip based on [`Popper`](https://popper.js.org/) positionning engine.
#### Usage
```html
Hover me
```
#### Attributes
Name|Description|Example
---|---|---
`title`|Tooltip title initializer.|``
`placement`|Tooltip position initializer. Possible values: top (default), bottom, right, left, top-start, top-end, bottom-start, bottom-end, right-start, right-end, left-start, left-end, auto, auto-start, auto-end|``
#### Properties
Name|Description|Example
---|---|---
`title`|Tooltip title setter.|`elem.title = "New tooltip"`
`placement`|Tooltip position setter. Same possible values as `placement` attribute.|`elem.placement = "bottom"`
## Links
- [CSS `::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
- [Various way of styling a web component](https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/)
- [Awesome Google doc about Web Components](https://developers.google.com/web/fundamentals/web-components)
- [List of HTML colors](https://en.wikipedia.org/wiki/Web_colors)
- [Web Components and SEO](https://medium.com/patternfly-elements/web-components-and-seo-58227413e072)
- [List of HTML5 inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Labels_and_placeholders)