This project contains a bunch of web components that we use on Hattrick.org and Hattrick Mobile. However, all of these components works independently of Hattrick, so if you want to use them on your site as well, go right ahead!
- Put a script tag like this (with the correct version)
<script src="https://unpkg.com/hattrick-components@1.0.0/dist/hattrick-components.js"></script>in the head of your index.html. - Then you can use the element anywhere in your template, JSX, html etc.
- Run
npm install hattrick-components --save. - Put a script tag similar to this
<script src="node_modules/hattrick-components/dist/hattrick-components.js"></script>in the head of your index.html. - Then you can use the element anywhere in your template, JSX, html etc.
If you're using these components in Angular, don't forget to add
schemas: [CUSTOM_ELEMENTS_SCHEMA]to your@NgModule.
These are the currently available Hattrick Components. For more details on how to use each component, see the respective readme.md linked in the table below.
From NPM, first go to Hattrick Components on GitHub for correct links.
| Component | Description |
|---|---|
| Avatar | Used to display avatar in various styles by providing a JSON representation of the avatar parts. |
| Bar | Used to display various bars, e.g. skill bars or formation experiences (not to be mistaken with sliders!). |
| Flip | Used to display an element with both a front and a back which you can toggle vertically or horizontally. |
| Match clock | A match clock which counts down during halftime and overtime breaks, also counts down if the match hasn't started yet. |
| Progress-arc | Used to display circular progress meters, or in Hattrick used to display stamina. |
| Rating | Used to display a Hattrick rating. Uses progress-arc to display stamina. |
| Timer | A simple timer to display hh:mm:ss, optionally it can also start counting upwards if the deadline has passed. |
| Tooltip | Provides a relatively customizable tooltip for custom mouseover titles that also supports HTML. |
Hattrick Components is built using Stencil.
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.