Get Started

To use dash_trich_components install the package on your project's terminal.

Installation

              
                pip install dash-trich-components
              
            

Configuration

Import dash_trich_components on the file that you wnat to use it.


Components

Card

A simple card with an image, title, description, badges and link for github with icon, all this arguments are optional.

Argument Value Default
id (string, optional): id of the element Null
link (string, optional): link to redirect when the user clicks on the image Null
image (string, optional): image that will display on card Null
title (string, optional): title of the card Null
description (string, optional): description of the card 'Null
badges (list, optional): list of strings to display in badges, to work porperly put up to 4 or 5 Null
git (string, optional): github URL, is not required, only if you want to Null
dark (boolean, optional): theme color of the card, that for default is light False
className (string, optional): used with CSS to style elements with common properties Null
style (dict, optional): defines CSS styles which will override styles previously set Null

Carousel

A simple carousel for your Dash projects! Add a list of HTML elements inside the component and it turns to carousel slides.

Argument Value Default
id (string, optional): id of the element Null
dots (boolean, optional): show dot indicators False
arrows (boolean, optional): show prev/next arrows True
infinite (boolean, optional): infinitely wrap around contents True
autoplay (boolean, optional): enables autoplay False
speed (number, optional): infinitely wrap around contents 1000
slides_to_show (number, optional): number of slides to show 3
slides_to_scroll (number, optional): number of slides to scroll 1
center_mode (boolean, optional): enables centered view with partial prev/next slides False
center_padding (string, optional): side padding when in center mode (px or %) '50px'
swipe_to_slide (boolean, optional): allow users to drag or swipe directly to a slide irrespective of slides_to_scroll True
variable_width (boolean, optional): variable width slides False
responsive (list, optional): list of objects containing breakpoints and settings (see example) Null
vertical (boolean, optional): vertical slide mode False
className (string, optional): used with CSS to style elements with common properties Null
style (dict, optional): defines CSS styles which will override styles previously set Null

Resposive argument examples

Customize based on breakpoints, you have to pass a list of object, with your settings

! You have to use strings and camel case to pass the arguments (only on the responsive argument), like in the example bellow.

this component was built from: react slick


Side Bar

A collapsible side bar for your dashboard, with icons from Font Awesome.

! This component uses Font Awesome Free 5.8.1, you need yo use the icons available on Font Awesome Gallery and pass the class of the icon on "icon" argument, just like the example bellow.

! For using the callbacks like the example bellow, you will need to have installed Pandas library.

! To have this effect of the content being pushed by the side bar, it is necessary to use id="page_content" in the sidebar sibling Div, like the example bellow.

! For the sidebar height to be 100% relative to the page, the parent div has to be with the 'position': 'relative' attribute, as in the example

            
              pip install pandas
            
          

SideBar

Argument Value Default
id (string, optional): id of the element Null
bg_color (string, optional): color of sidebar background '#2B7279'
text_color (string, optional): color of sidebar text '#FFFFFF'
className (string, optional): used with CSS to style elements with common properties ''

SideBarItem

Argument Value Default
id (string, optional): id of the element Null
label (string, optional): text of menu item on sidebar 'Label'
icon (string, optional): icon of menu item on sidebar, pass the icon class from font awesome 'fas fa-circle'
className (string, optional): used with CSS to style elements with common properties ''

this component was built from: react side nav


Theme Toggle

Dark/Light theme toggle switch for your Dash project.

Include the component in your project, and include the color settings in the CSS, following the example below. It's important to follow this step, otherwise the theme toggle component will not work.

It is also possible to customize the colors of the toggle switcher with arguments if you like.

Or, if you prefer, you can pass no arguments and use the default values.

CSS Settings (Important step, otherwise the component will not work)

Include this settings in your CSS with the colors you want for each theme.

First define the colors of your light theme, you can include as many colors as you want, adding more variables.

In the second part use the same variables to define the value they will receive when the dark theme will be active.

Now, you should use these color variables in all the color properties of your CSS, as in the example bellow.

Don't know how to add a CSS file in you project?
You just have to create a folder with the name "assets" at the root of your project, and inside create a file with the extension .css, for example "styles.css".
To use this component it is recommended that you have a basic knowledge of CSS.

Argument Value Default
id (string, optional): id of the element Null
className (string, optional): used with CSS to style elements with common properties Null
style (dict, optional): defines CSS styles which will override styles previously set Null
bg_color_dark (string, optional): background color of toggle switch when dark theme '#232323'
icon_color_dark (string, optional): sun icon color of toggle switch when dark theme '#EDC575'
bg_color_light (string, optional): background color of toggle switch when light theme '#07484E'
icon_color_light (string, optional): moon icon color of toggle switch when dark theme '#C8DBDC'
tooltip_text (string, optional): text that will appear in tooltip (only desktop) 'Toggle light/dark theme'

Updating

Stay tuned and update our package to get new components released, bug fixes and improvements.

To uptade just run in your project's terminal the command bellow.

              
                pip install --upgrade dash-trich-components 
              
            

Authors

This library is developed by trich.ai team.