Color
Well done! You successfully read this important alert message.
This is not super important.
Oh oh...
Oh snap!
Dismissible
Hey... dismiss me.
src/components/badge.tsx
src/components/button.tsx
Button is a wrapper of button element.
Other than specified props, any other props will be spreaded to the button element.
Color
Size
Demo of useScrollOnMount
src/components/carousel/carousel-indicators.tsx
<CarouselIndicators /> should be used within <Carousel /> components.
It will display the dots similar to the number of slides
Refer to Carousel for example.
src/components/carousel/carousel.tsx
<Carousel /> is a compound component that should be used in conjunction with <CarouselIndicators />, <Slides />, and <Slide />.
Next and Previous Navigation
Use CarouselBtn to show Prev and Next at two ends of the Carousel.
Auto Transition
If you would like the Carousel to auto progress, pass down interval props.
src/components/carousel/slide.tsx
<Slide /> renders a specific section of <Carousel />.
It must be direct child of <Slides /> component.
Refer to Carousel for example.
src/components/carousel/slides.tsx
<Slides /> is the component that wrap around <Slide />.
<Slides /> must be used within <Carousel /> component.
Refer to Carousel for example.
src/components/chat/chat-history.tsx
ChatHistory should be the parent of ChatMessage.
In addition of styling, ChatHistory will measure the scroll position everytime new child is appended,
and scroll to bottom if the scroll position is already at bottom.
src/components/chat/chat-message.tsx
Start of chat
Malcolm
Hi there!
13:57
Malcolm
My name is Kee, Malcolm Kee, the son of my father.
13:57
😒😒
13:58
Are you kidding me?
Ask me to online to talk.
And you send me this??? 🤬
13:58
Malcolm
Hi there!
I just bored.
Bye!
14:00
src/components/chat/chat-system-message.tsx
src/components/date-input.tsx
DateInput is a wrapper over jquery.datepick plugin.
Simple Usage
open date picker
Controlled Element
open date picker
Use with Field
open date picker
Custom Format
open date picker
Value is
src/components/dialog.tsx
src/components/field.tsx
Field is a component that provides contextual styling
of the Input and Label within it. In addition, it will
provides default props to Input and Label for accessibility.
Props not specified will be spreaded to the underlying div element.
Field is usually used in conjunction with Input, Label and HelpText.
Field provides styling to those components as well as inject default properties to improve accessibility.
Composition with Input, Label, and HelpText
The name is good.
Customized Input
@
The email is wrong.src/components/file-record.tsx
FileRecord is used by FileUpload to show uploaded image.
You could use it to render uploaded file if you use FileUpload as controlled component.
test.jpg
Removetest-uploading.jpg
Removetest-error.jpgFailed to Upload
src/components/file-upload.tsx
FileUpload upload files and show progress for each individual upload.
It handles upload cancellation correctly.
Unspecified props will be spreaded to the underlying input element.
Note: This component does not work at the moment because the backend server is not ready.
Simple Usage
Drop file here
or
Clear After Upload
Use this when you show the uploaded image separately.
Drop file here
or
src/components/form.tsx
src/components/icon-button.tsx
src/components/image.tsx
Image is a component that allows you to specify image with its standard format (jpg/png/gif) and webp format. It will fallback to use the standard format if browser doesn't support webp.
src/components/input.tsx
Input is a wrapper around input element.
It accepts all props an input element in addition of the stated props.
ref will be forwarded to the underlying input element.
Most of the time you want to wrap this within Field component so it will provides
contextual styling and good defaults on props
Controlled Example
src/components/label.tsx
Label is just a wrapper around html label element.
It accepts all props label element accepts.
However, it will sync its htmlFor with the id of the input within same Field component
Refer to Field component for example.
src/components/list-group.tsx
ListGroup renders a list of items.
All props except variant and items will be spreaded to the underlying container.
- React❤
- Angular
- Ember
- Vue
- Svelte
Button
When variant is button, you can add any props to the underlying button by adding additonal props to the items array, e.g. onClick.
Link
src/components/main-content.tsx
src/components/navbar.tsx
src/components/panel/panel.tsx
Default Panel
Some content, e.g. secret of top 10% richest people in the world.
Copyright © 2050
Color
Title
Content
Title
Content
Title
Content
Title
Content
Title
Content
src/components/radio-group.tsx
RadioGroup is like a select, but you can pass string, boolean, number, or object as value in options.
When the option is selected, onChangeValue will be called with the value you pass without convert it to string.
String value
Value:
Type of value: string
Number Value
Object Value
src/components/remote-component.tsx
<RemoteComponent /> allows us to load module federated modules in webpack 4.
It achieves this by using some webpack undocumented API and monkey patching window object.
If you want to use in production, use at your own risk. 🚨
src/components/select-field.tsx
SelectField is just a composition of Field, Select, Label, and HelpText.
Props not specified will be spreaded to Select element, including ref.
If you need more control, compose them yourself.
Pick wisely
Controlled Component
src/components/select.tsx
Select is a wrapper around select element.
It accepts all props an select element in addition of the stated props.
ref will be forwarded to the underlying select element.
Most of the time you want to wrap this within Field component so it will provides
contextual styling and good defaults on props
Pass options as props
Pass option as children
All props of native select will be supported.
src/components/share-button.tsx
A button to share an URL using Web Share API. Fallback to copy to clipboard when Web Share API is not supported.
src/components/spinner.tsx
Spinner is used to indicate busy status, e.g. waiting for API response
You can set delayShow for delaying the spinner to appear.
This is an example of `delayShow` of 1000 (1 sec).
src/components/text-field.tsx
TextField is just a composition of Field, Input, Label, and HelpText.
Props not specified will be spreaded to Input element, including ref.
If you need more control, compose them yourself.
Must be within 18 and 35
Controlled Component
Length: 0
src/components/textarea.tsx
Textarea is a wrapper around textarea element.
It accepts all props an textarea element in addition of the stated props.
ref will be forwarded to the underlying textarea element.
Most of the time you want to wrap this within Field component so it will provides
contextual styling and good defaults on props