First you should install the chayns-components package into your project:
# Yarn
yarn add chayns-components
# NPM
npm install chayns-componentsThe styles to our components are provided via the
chayns-css library and some of
the components also rely on the
chayns-js API, so you should
include these in your HTML:
<!-- CSS styles -->
<script
src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js"
version="4.2"
></script>
<!-- JS api -->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>The following components are part of this package:
| Component | Description |
|---|---|
| Accordion › | Accordions are collapsible sections that are toggled by interacting with a permanently visible header. |
| AmountControl › | The AmountControl is a three-segment control used to increase or decrease an incremental value. |
| AnimationWrapper › | The AnimationWrapper provides an eye-catching initial animation to its children. |
| Badge › | Badges are small, circular containers used to decorate other components with glancable information. |
| Bubble › | A floating bubble that is primarily used to power the ContextMenu and Tooltip components. |
| Button › | Buttons initiate actions, can include a title or an icon and come with a set of predefined styles. |
| Calendar › | An interactive grid calendar that can highlight specified dates. |
| Checkbox › | Checkboxes allow users to complete tasks that involve making choices such as selecting options. Can be styled as a switch, a visual toggle between two mutually exclusive states — on and off. |
| ColorPicker › | Lets a user choose a color for text, shapes, marking tools, and other elements. |
| ColorScheme › | Adjusts the color scheme for all child components. |
| ComboBox › | A button with a dropdown that contains a scrollable list of distinct values from which people can choose. |
| ContextMenu › | Gives people access to additional functionality related to onscreen items without cluttering the interface. |
| DateInfo › | Formats a date or date range to be easily readable and reveals the absolute date on hover. |
| EmojiInput › | A text input that allows emojis to be put in. |
| ExpandableContent › | A collapsible section that reveals its children with a height transition. |
| FileInput › | Accepts specified file types via dialog or drag and drop. |
| FilterButton › | A chip-like component that is used to filter lists. Usually used in a group of 2 or more. |
| FormattedInput › | A text input that automatically formats its input with a formatter. Since this component is based on the Input-component, it takes any of the Input-components props, which are not listed here. This component only works as an uncontrolled component, meaning that it does not take a value-prop. |
| Gallery › | An image gallery that displays up to four images by default. Also supports reordering and deletion of images and blurred image previews for images loaded from tsimg.cloud. |
| Icon › | Displays a FontAwesome icon. |
| ImageAccordion › | An accordion that has a big image and appears in a grid. Should be used inside of an ImageAccordionGroup. |
| ImageAccordionGroup › | Groups several ImageAccordion components together, so only one of them can be open at a time. |
| Input › | A text input that can be validated and decorated with different designs. |
| List › | The wrapper for the ListItem-component to create lists. |
| ListItem › | The items in a list to display related data in a structured format. Should be used inside of a List component. |
| OpeningTimes › | An input for opening times. |
| PersonFinder › | An autocomplete search for persons that can be customized to work with arbitrary data. |
| PositionInput › | A location input with a map and text input. This requires the Google Maps JavaScript API with the places library enabled. You can find more information about the Maps API here. |
| ProgressBar › | An animated progress bar that can show an actions progress or an indeterminate state like a loading spinner. |
| RadioButton › | A radio button that allows to select one of multiple options. |
| RfidInput › | A component to take in an RFID signal. |
| ScrollView › | A scrollable container with a custom scrollbar that looks great on every device. |
| SearchBox › | An autocomplete input to search through a list of entries. |
| SelectButton › | A choose button that opens a selection dialog when clicked. |
| SelectItem › | A radio button that expands its content when selected. Should be used inside of a SelectList. |
| SelectList › | A vertical list of radio buttons that reveal content when selected. |
| SetupWizard › | A set of steps the user has to go through sequentially. |
| SetupWizardItem › | An item that represents one step in a SetupWizard. |
| SharingBar › | A context menu for sharing a link and some text on various platforms. |
| Signature › | A component to let the user subscribe |
| Slider › | A horizontal track with a thumb that can be moved between a minimum and a maximum value. |
| SliderButton › | A linear set of buttons which are mutually exclusive. |
| SmallWaitCursor › | A small circular loading indicator. |
| TagInput › | A text input that allows values to be grouped as tags. |
| TextArea › | A multiline text input that can automatically grow with its content. |
| TextString › | Loads text strings from our database and displays them. Handles replacements and changing the string via CTRL + Click (only internal). |
| Tooltip › | Wraps a child component and displays a message when the child is hovered or clicked on. Allows to be shown imperatively by calling .show() or .hide() on its reference. |
| VerificationIcon › |
We also provide a set of common utility functions:
| Function | Description |
|---|---|
| imageUpload | Function to upload images to tsimg.cloud |
| isTobitEmployee | Get the information if user is an tobit employee |
| createLinks | Creates a string with links from a string with URLs |
| removeHtml | Removes HTML Tags from a string |
| ColorUtils | Utility functions to convert color values (hex, rgb, hsv) |
| equalizer | Utility functions to equalize the width of html elements |
If you want to contribute to chayns-components, check out the
CONTRIBUTING.md file.