fxgcomponent_chpet001 v1.0.10

fxgcomponent_chpet001

Tp 2 Christopher Petryk

https://www.npmjs.com/package/fxgcomponent_chpet001

Travail pratique 1️ Groupe Christopher Petryk et Alexandre Cloutier-Lemay

Start project 🚀 :

yarn install

yarn storybook

Liste des 10 composantes:

ALERT ✅

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task

Component API props used : color

Description : The color of the component. Unless provided, the value is taken from the severity prop.It supports both default and custom theme colors.

Type : string

Used for the example :

                    'error'                       
                    'info'                      
                    'success'                    
                    'warning'

BADGE ✅

Badge generates a small badge to the top-right of its child(ren).

Component API props used : color

Description : The color of the component. It supports both default and custom theme colors.

Type : string

Used for the example :

                    'primary'
                    'secondary'
                    'error'
                    'info'
                    'success'
                    'warning'
                   

BREADCRUMBS ✅

Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

Component API props used : separator

Description : Custom separator node.

Type : node

Used for the example :

                    '/'	
                    '>'
                    '--->'
                    '-'  

BUTTON ✅

Buttons allow users to take actions, and make choices, with a single tap.

Component API props used : color

Description : The color of the component. It supports both default and custom theme colors.

Type : string

Used for the example :

                    'success'
                    'error'
                    'warning'

Component API props used : variant

Description : The variant to use.

Type : string

Used for the example :

                    'contained'
                    'outlined'
                    'text'
                	

CHECKBOX ✅

Checkboxes allow the user to select one or more items from a set.

Component API props used : color

Description : The color of the component. It supports both default and custom theme colors.

Type : string

Used for the example :

                    'primary'
                    'secondary'
                    'error'
                    'info'
                    'success'
                    'warning'
          

LINK ✅

The Link component allows you to easily customize anchor elements with your theme colors and typography styles.

Component API props used : underline

Description : Controls when the link should have an underline.

Type : string

Used for the example :

                     'always'
                     'hover'
                     'none'

CIRCULAR PROGRESS ✅

Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

Component API props used : color

Description : The color of the component. It supports both default and custom theme colors.

Type : string

Used for the example :

                     'error'
                     'success'
                     'warning'

Component API props used : size

Description : The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'.

Type : number

Used for the example :

                     25
                     75
                     200

SLIDER ✅

Sliders allow users to make selections from a range of values.

Component API props used : size

Description : The size of the slider.

Type : string

Used for the example :

                    'default'
                    'small'
                    'medium'

TOGGLE BUTTON ✅

Toggle buttons can be used to group related options.

Component API props used : oriented

Description : The component orientated(layout flow direction)

Type : string

Used for the example :

                     'default'
                     'horizontal'
                     'vertical'

TYPOGRAPHY ✅

Use typography to present your design and content as clearly and efficiently as possible.

Component API props used : variant

Description : Applies the theme typography styles.

Type : string

Used for the example :

                     'h1'
                     'h2'
                     'h3'
                     'h4'
                     'h5'
                     'h6'

What we used: