├── CONTRIBUTING.md ├── README.md ├── app.py ├── assets └── cheatsheet.css ├── content ├── __init__.py ├── about.py ├── dbc_components.py ├── misc_helpers.py ├── plotly_components.py ├── typography.py ├── utility_background.py ├── utility_border.py ├── utility_color.py ├── utility_display.py ├── utility_flex.py ├── utility_gutter.py ├── utility_opacity.py ├── utility_position.py ├── utility_sizing.py ├── utility_spacing.py └── utility_text.py ├── index_examples.py ├── requirements.txt └── utilities.py /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # App Maintenance Notes 2 | 3 | ## App Structure 4 | Main entry point: `app.py` 5 | 6 | - `app.py`: Main app. Has the main layout and callbacks 7 | - `utilities.py`: Has reusable components and app data used in other parts of the app 8 | - `content` folder: Each file is a cheatsheet card. 9 | - `index_examples.py`: Ties the list item name in the card with the content displayed in the offcanvas 10 | code stippets and preview. This is used in the pattern matching callback in `app.py` to show the content 11 | when the card item is clicked on 12 | 13 | 14 | ##Adding Content 15 | 16 | ### Cards with code snippets 17 | 18 | **The name of the example on the card must be unique. It's used 19 | as an `id` in the callbacks** 20 | 21 | 22 | In the `content` directory, each file is one cheatsheet card. A good example is the `utility_opacity.py` because it's a small file. 23 | 24 | - The card definition is the last variable defined in the file: It has the header name and link, list item name and list item hover info 25 | - example: `make_listgroup_item("opacity-{value}", "opacity of elements"),` "opacity-{value}" shows as a list item on the card. "opacity of elements" is the hover info 26 | - `snippet_name_code` is a code text string for each item - shows in the "Code Snippet" panel of the Offcanvas 27 | - `snippen_name_preivew` is the code snippet for each item (actual code) for the "Preview" panel of the Offcanvas 28 | 29 | In the `index_examples.py`: 30 | - import the card from the `content` folder 31 | - add to `examples` dict: 32 | - key is name of example in the card 33 | - value is a list [snippet_name_code, snippet_name_preview] 34 | 35 | In `app.py` 36 | - import the card 37 | - add the card to the layout 38 | 39 | ### Cards with links only 40 | 41 | See an example in `about.py` or `dbc_components.py` -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dash-bootstrap-cheatsheet 2 | 3 | This handy interactive cheatsheet makes it easy to use the Bootstrap 5 classes with your Dash app 4 | made with the latest version of *dash-bootstrap-components* V1.0 5 | 6 | ### See it live at https://dashcheatsheet.pythonanywhere.com/ 7 | 8 | ### Note - this is a WIP. If you have any comments or suggestions or just want to give some :heart: Please open an issue. 9 | 10 | ## Background 11 | 12 | 13 | 14 | If you are upgrading from `dash-bootstrap-components` v0.13 (which uses Bootstrap 4) you will find lots of cool new features – but also some breaking changes. This is mainly because Bootstrap 5 is a major rewrite of the Bootstrap project. Not only are there changes to some of the components, but there are also many new and renamed utility classes. 15 | 16 | One example is Bootstrap 5 now supports RTL, so classes are renamed “start” and “end” instead of “left” and “right”. This means the new way to set left or right margin is className="ms-2 me-4" rather than className="ml-2 mr-4". There are also many new things like the opacity classes, and classes that make it easier to make components like: image 17 | 18 | For more information see 19 | - `dash-bootstrap-components` [V1 announcement](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/5) 20 | - [Bootstrap Migration Guide](https://getbootstrap.com/docs/5.0/migration/) 21 | - `dash-bootstrap-components` [Migration Guide](https://dbc-v1.herokuapp.com/migration-guide/) 22 | 23 | I hope this Cheatsheet makes it easier for you to use dbc V1 and Bootstrap 5 in your Dash app. 24 | 25 | --- 26 | - 27 | --- 28 | 29 | 30 | 31 | ![cheatsheet](https://user-images.githubusercontent.com/72614349/134268914-10dc5211-80b2-4b36-95b4-0515d27d70e8.gif) -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | """ 2 | Main APP 3 | 4 | This is the starting point for the Dash Boostrap 5 Cheatsheet 5 | 6 | The main layout is defined here. 7 | See the content folder for the content of the offcanvas component. 8 | See index_examples.py for the links between the name of the item in the 9 | cheatsheet cards content of the offcanvas component. 10 | 11 | """ 12 | 13 | from dash import Dash, html, dcc, Input, Output, MATCH, callback_context, State 14 | import dash_bootstrap_components as dbc 15 | import json 16 | 17 | from utilities import new_items, dbc_home_url 18 | from index_examples import examples 19 | 20 | from content.utility_border import utility_border 21 | from content.utility_background import utility_background 22 | from content.utility_color import utility_color 23 | from content.utility_display import utility_display 24 | from content.utility_sizing import utility_sizing 25 | from content.utility_spacing import utility_spacing_margin, utility_spacing_padding 26 | from content.utility_opacity import utility_opacity 27 | from content.utility_position import utility_position 28 | from content.utility_text import utility_text 29 | from content.misc_helpers import misc_helpers 30 | from content.utility_flex import utility_flex 31 | from content.utility_gutter import utility_gutter 32 | from content.dbc_components import dbc_components1, dbc_components2, dbc_components3 33 | from content.plotly_components import plotly_links 34 | from content.about import about, book 35 | from content.typography import typography 36 | 37 | app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) 38 | app.title = "Cheatsheet" 39 | dbc_logo = "https://user-images.githubusercontent.com/72614349/133677816-5ea52424-bfd3-4405-9ccf-8ad0dbd18020.png" 40 | bootstrap_logo = "https://user-images.githubusercontent.com/72614349/133683669-eef08b42-2eff-49df-b0a5-33a7754a2b86.png" 41 | plotly_logo = "https://user-images.githubusercontent.com/72614349/182969599-5ae4f531-ea01-4504-ac88-ee1c962c366d.png" 42 | dash_url = "https://dash.plotly.com/" 43 | 44 | header = html.Div( 45 | dbc.Container( 46 | [ 47 | html.H1("Dash Bootstrap Cheatsheet", className="display-3 text-white",), 48 | html.P( 49 | "A guide for using Bootstrap 5 utility classes in Plotly Dash Apps", 50 | className="fst-italic lead", 51 | ), 52 | html.Div( 53 | [ 54 | html.A( 55 | html.Img(src=plotly_logo, height=80, className="me-2"), 56 | href=dash_url, 57 | target="_blank", 58 | ), 59 | html.A( 60 | html.Img(src=dbc_logo, height=80, className="me-2"), 61 | href=dbc_home_url, 62 | target="_blank", 63 | ), 64 | html.A( 65 | html.Img(src=bootstrap_logo, height=80), 66 | href="https://getbootstrap.com/docs/5.1/getting-started/introduction/", 67 | target="blank", 68 | ), 69 | ], className="text-nowrap" 70 | ), 71 | html.Div( 72 | [ 73 | dbc.Button( 74 | "Go To Dash Bootstrap Theme Explorer", 75 | color="secondary", 76 | href="https://hellodash.pythonanywhere.com/", 77 | external_link=True, 78 | target="_blank", 79 | className="me-2", 80 | size="sm" 81 | 82 | ), 83 | ], 84 | className="mt-4" 85 | ), 86 | dbc.Button( 87 | "Highlight New", 88 | id="new", 89 | n_clicks=0, 90 | color="secondary", 91 | className="position-absolute bottom-0 end-0 p-3", 92 | ), 93 | ], 94 | fluid=True, 95 | className="py-3", 96 | ), 97 | className="p-3 bg-primary text-light rounded-3 mb-4 position-relative", 98 | style={"height": 425}, 99 | ) 100 | 101 | 102 | """ 103 | ===================================================================== 104 | Layout and Callbacks 105 | """ 106 | 107 | 108 | app.layout = dbc.Container( 109 | [ 110 | header, 111 | dbc.Row( 112 | [ 113 | dbc.Col(utility_background), 114 | dbc.Col(utility_border), 115 | dbc.Col(utility_color), 116 | dbc.Col(utility_display), 117 | dbc.Col(utility_gutter), 118 | dbc.Col(utility_opacity), 119 | dbc.Col(utility_position), 120 | dbc.Col(utility_sizing), 121 | dbc.Col(utility_spacing_margin), 122 | dbc.Col(utility_spacing_padding), 123 | dbc.Col(utility_text), 124 | dbc.Col(typography), 125 | dbc.Col(misc_helpers), 126 | dbc.Col(utility_flex), 127 | dbc.Col(dbc_components1), 128 | dbc.Col(dbc_components2), 129 | dbc.Col(dbc_components3), 130 | dbc.Col(plotly_links), 131 | ] 132 | ), 133 | 134 | dbc.Row(dbc.Col([about, book])) 135 | 136 | ], 137 | fluid=True, 138 | ) 139 | 140 | 141 | @app.callback( 142 | Output({"type": "off-canvas", "index": MATCH}, "is_open"), 143 | Output({"type": "off-canvas", "index": MATCH}, "style"), 144 | Output({"type": "code", "index": MATCH}, "children"), 145 | Output({"type": "preview", "index": MATCH}, "children"), 146 | Input({"type": "list-item", "index": MATCH}, "n_clicks"), 147 | Input({"type": "button", "index": MATCH}, "n_clicks"), 148 | prevent_initial_call=True, 149 | ) 150 | def open_card_modal(example_click, fullscreen_click): 151 | """ opens offcanvas content for item in card & controls screen size """ 152 | 153 | # This gets the name of the clicked on example (I know it's ugly) 154 | input_id = callback_context.triggered[0]["prop_id"].split(".")[0] 155 | example_name = json.loads(input_id)["index"] if "index" in input_id else "" 156 | 157 | style = ( 158 | {"position": "absolute", "height": 1000} 159 | if fullscreen_click 160 | else {"position": "absolute", "height": 400} 161 | ) 162 | open_offcanvas = True if example_click else False 163 | 164 | return open_offcanvas, style, examples[example_name][0], examples[example_name][1] 165 | 166 | 167 | @app.callback( 168 | [Output({"type": "list-item", "index": n}, "className") for n in new_items], 169 | Input("new", "n_clicks"), 170 | State({"type": "list-item", "index": "vstack"}, "className"), 171 | prevent_initial_call=True, 172 | ) 173 | def show_new(n, current_class): 174 | new_className = ( 175 | "bg-secondary text-white border-0" 176 | if current_class == "border-0" 177 | else "border-0" 178 | ) 179 | return [new_className] * len(new_items) 180 | 181 | 182 | def toggle_collapse(n, is_open): 183 | if n: 184 | return not is_open 185 | return is_open 186 | 187 | 188 | if __name__ == "__main__": 189 | app.run_server(debug=True) 190 | -------------------------------------------------------------------------------- /assets/cheatsheet.css: -------------------------------------------------------------------------------- 1 | .border-utils [class^="border"] { 2 | display: inline-block; 3 | width: 5rem; 4 | height: 5rem; 5 | margin: .25rem; 6 | background-color: #f5f5f5; 7 | } 8 | 9 | .pill { 10 | display: inline-block; 11 | width: 10rem; 12 | height: 5rem; 13 | margin: .25rem; 14 | background-color: #f5f5f5; 15 | } 16 | .sm-square { 17 | width: 2em; 18 | height: 2em; 19 | background-color: #212529; 20 | border-radius: .25rem; 21 | } 22 | 23 | .class-card { 24 | max-width: 400px; 25 | min-height: 490px; 26 | margin-bottom: 20px; 27 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10); 28 | } 29 | 30 | 31 | .class-card-tall { 32 | max-width: 400px; 33 | min-height: 690px; 34 | margin-bottom: 20px; 35 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10); 36 | } 37 | 38 | // $box-shadow: 0 .5rem 1rem rgba($black, .15); 39 | // $box-shadow-sm: 0 .125rem .25rem rgba($black, .075); 40 | // $box-shadow-lg: 0 1rem 3rem rgba($black, .175); 41 | // $box-shadow-inset: inset 0 1px 2px rgba($black, .075); -------------------------------------------------------------------------------- /content/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnMarieW/dash-bootstrap-cheatsheet/bce02f9bbb4cdc50ec185de2897ebf6bc8868130/content/__init__.py -------------------------------------------------------------------------------- /content/about.py: -------------------------------------------------------------------------------- 1 | # This site was adapted for Dash from: 2 | """ 3 | This is the card for the About links 4 | """ 5 | 6 | from dash import html, dcc 7 | import dash_bootstrap_components as dbc 8 | 9 | 10 | 11 | book_img = "https://user-images.githubusercontent.com/72614349/185497519-733bdfc3-5731-4419-9a68-44c1cad04a78.png" 12 | nostarch = "https://nostarch.com/book-dash" 13 | github = "fa-brands fa-github" 14 | youtube = "fa-brands fa-youtube" 15 | info = "fa-solid fa-circle-info" 16 | cart = "fa-solid fa-cart-shopping" 17 | plotly = "https://plotly.com/python/" 18 | dash_url = "https://dash.plotly.com/" 19 | forum = "https://community.plotly.com/" 20 | plotly_logo = "https://user-images.githubusercontent.com/72614349/182969599-5ae4f531-ea01-4504-ac88-ee1c962c366d.png" 21 | plotly_logo_dark = "https://user-images.githubusercontent.com/72614349/182967824-c73218d8-acbf-4aab-b1ad-7eb35669b781.png" 22 | book_github = "https://github.com/DashBookProject/Plotly-Dash" 23 | amw = "https://github.com/AnnMarieW" 24 | adam = "https://www.youtube.com/c/CharmingData/featured" 25 | chris = "https://finxter.com/" 26 | dbt_github = "https://github.com/AnnMarieW/dash-bootstrap-templates" 27 | dbc_docs_url = "https://dash-bootstrap-components.opensource.faculty.ai/" 28 | bootstrap_docs_url = "https://getbootstrap.com/docs/5.1/" 29 | utility_classes_tutorial = "https://hellodash.pythonanywhere.com/adding-themes/bootstrap-utility-classes" 30 | theme_explorer_url = "https://hellodash.pythonanywhere.com/" 31 | 32 | 33 | 34 | welcome_md = dcc.Markdown( 35 | f""" 36 | ### Welcome to Dash Bootstrap Cheatsheet 🤗 37 | 38 | This cheatsheet is based on the official Bootstrap documentation. You can find more information about each category by 39 | clicking on the book icon in the category headings. For even more examples, don't miss 40 | the [Dash Bootstrap Utilities Tutorial]({utility_classes_tutorial}) 41 | on the [Dash Bootstrap Theme Explorer]({theme_explorer_url}) site. 42 | 43 | 44 | If you're new to Dash or Bootstrap, see: 45 | - The [Plotly Dash]({plotly}) tutorial 46 | - The [Dash Boostrap Components]({dbc_docs_url}) documentation 47 | - The [Bootstrap]({bootstrap_docs_url}) documentation 48 | - Videos by [Charming Data]({adam}) 49 | 50 | Still have questions? Try asking on the [Dash Community Forum]({forum}) 51 | """,) 52 | 53 | 54 | quickstart = dcc.Markdown(""" 55 | #### Quickstart - Bootstrap utility classes 56 | Bootstrap includes dozens of utility classes for showing, hiding, aligning, spacing and styling content. 57 | 58 | Bootstrap utility classes can be applied to any Dash component to quickly style them without the need to write custom CSS rules. Just add them to the Dash component’s `className` prop. 59 | 60 | For example, instead of using CSS in the `style` prop: 61 | ``` 62 | style={ 63 | "backgroundColor": "blue", 64 | "padding": 16, 65 | "marginTop": 32, 66 | "textAlign": "center", 67 | "fontSize": 32, 68 | } 69 | ``` 70 | You can use Bootstrap utilities in the `className` prop: 71 | ``` 72 | className="bg-primary p-1 mt-2 text-center h2", 73 | ``` 74 | """) 75 | 76 | 77 | 78 | 79 | 80 | 81 | def make_link(text, icon, link): 82 | return html.Span(html.A([html.I(className=icon + " ps-1 pe-2"), text], href=link)) 83 | 84 | 85 | button = dbc.Button( 86 | [html.I(className=cart + " pe-2"),"Order"], color="primary", href=nostarch, size="sm", className="mt-2 ms-1" 87 | ) 88 | 89 | cover_img = html.A( 90 | dbc.CardImg( 91 | src=book_img, 92 | className="img-fluid rounded-start", 93 | ), 94 | href=nostarch, 95 | 96 | ) 97 | 98 | text = dcc.Markdown( 99 | "From basic components to advanced layouts, learn how to display data in effective, usable, and elegant ways.", 100 | className="ps-2", 101 | ) 102 | 103 | 104 | authors = html.P( 105 | [ 106 | "By ", 107 | make_link("Adam Schroeder ", youtube, adam), 108 | make_link("Christian Mayer", info, chris), 109 | make_link("Ann Marie Ward", github, amw), 110 | ], 111 | className="card-text p-2", 112 | ) 113 | 114 | 115 | about_me1 = f""" 116 | __This site is maintained by Ann Marie Ward__ 117 | co-author of ["The Book of Dash"]({nostarch}) 118 | 119 | """ 120 | about_me = dcc.Markdown(about_me1, 121 | className="mt-5 text-center small", 122 | style={"maxWidth": "32rem"}, 123 | ) 124 | 125 | 126 | book_card = dbc.Card( 127 | [ 128 | dbc.Row( 129 | [ 130 | dbc.Col(cover_img, width=3, className="p-1"), 131 | dbc.Col( 132 | [text, button], 133 | width=9, 134 | ), 135 | ], 136 | className="g-0 d-flex align-items-center", 137 | ), 138 | dbc.Row(dbc.Col(authors)), 139 | ], 140 | className="mt-4 mb-5 small shadow p-2", 141 | style={"maxWidth": "32rem"}, 142 | ) 143 | 144 | about = dbc.Card( 145 | [ 146 | dbc.CardHeader([html.H3("About")]), 147 | dbc.CardBody([welcome_md, quickstart]) 148 | ], 149 | className="shadow m-5", 150 | ) 151 | 152 | book = html.Div( 153 | [ 154 | html.Hr(), 155 | dbc.Row(dbc.Col([about_me, book_card], width="auto"), justify="center") 156 | 157 | ] 158 | ) -------------------------------------------------------------------------------- /content/dbc_components.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card for the Dash Boostrap Components links 3 | """ 4 | 5 | from dash import html 6 | import dash_bootstrap_components as dbc 7 | from utilities import make_link, make_listgroup_link, dbc_url, dbc_home_url 8 | 9 | dbc_card1_urls = { 10 | "GitHub dbc Source Code": "https://github.com/facultyai/dash-bootstrap-components", 11 | "Quickstart": f"{dbc_home_url}docs/quickstart/", 12 | "Themes" : f"{dbc_home_url}docs/themes/", 13 | "Theme Explorer": "https://hellodash.pythonanywhere.com/", 14 | "Icons": f"{dbc_home_url}docs/icons/", 15 | "Accordion": f"{dbc_url}accordion", 16 | "Alert": f"{dbc_url}alert/", 17 | "Badge": f"{dbc_url}badge", 18 | "Breadcrumb": f"{dbc_url}breadcrumb", 19 | "Button": f"{dbc_url}button", 20 | "ButtonGroup": f"{dbc_url}buttongroup", 21 | } 22 | 23 | 24 | dbc_card2_urls = { 25 | "Card": f"{dbc_url}card", 26 | "Carousel": f"{dbc_url}carousel", 27 | "Collapse": f"{dbc_url}collapse", 28 | "DropdownMenu": f"{dbc_url}dropdownmenu", 29 | "Fade": f"{dbc_url}fade", 30 | "Form": f"{dbc_url}form", 31 | "Input": f"{dbc_url}input", 32 | "InputGroup": f"{dbc_url}inputgroup", 33 | "Jumbotron": f"{dbc_url}jumbotron", 34 | "Layout": f"{dbc_url}layout", 35 | "ListGroup": f"{dbc_url}listgroup", 36 | 37 | } 38 | 39 | 40 | dbc_card3_urls = { 41 | "Modal": f"{dbc_url}modal", 42 | "Nav": f"{dbc_url}nav", 43 | "Navbar": f"{dbc_url}navbar", 44 | "Offcanvas": f"{dbc_url}offcanvas", 45 | "Pagination": f"{dbc_url}pagination", 46 | "Popover": f"{dbc_url}popover", 47 | "Progress": f"{dbc_url}progress", 48 | "Spinner": f"{dbc_url}spinner", 49 | "Table": f"{dbc_url}table", 50 | "Tabs": f"{dbc_url}tabs", 51 | "Toast": f"{dbc_url}toast", 52 | "Tooltip": f"{dbc_url}tooltip", 53 | } 54 | 55 | 56 | 57 | dbc_components1 = dbc.Card( 58 | [ 59 | dbc.CardHeader( 60 | [ 61 | html.H3("Dash Bootstrap Components"), 62 | html.Div("Card: Start-B"), 63 | make_link(dbc_home_url), 64 | ], 65 | className="hstack gap-4", 66 | ), 67 | dbc.ListGroup( 68 | [dbc.ListGroupItem(html.H5("Links to the docs:"), className="border-0"),] 69 | + [make_listgroup_link(title, url) for title, url in dbc_card1_urls.items()], 70 | flush=True, 71 | className="border-0", 72 | ), 73 | ], 74 | className="class-card-tall", 75 | ) 76 | 77 | 78 | dbc_components2 = dbc.Card( 79 | [ 80 | dbc.CardHeader( 81 | [ 82 | html.H3("Dash Bootstrap Components"), 83 | html.Div("Card: C-L"), 84 | make_link(dbc_home_url), 85 | ], 86 | className="hstack gap-4", 87 | ), 88 | dbc.ListGroup( 89 | [dbc.ListGroupItem(html.H5("Links to the docs:"), className="border-0"),] 90 | + [make_listgroup_link(title, url) for title, url in dbc_card2_urls.items()], 91 | flush=True, 92 | className="border-0", 93 | ), 94 | ], 95 | className="class-card-tall", 96 | ) 97 | 98 | 99 | dbc_components3 = dbc.Card( 100 | [ 101 | dbc.CardHeader( 102 | [ 103 | html.H3("Dash Bootstrap Components"), 104 | html.Div("Card: M-Z"), 105 | make_link(dbc_home_url), 106 | ], 107 | className="hstack gap-4", 108 | ), 109 | dbc.ListGroup( 110 | [dbc.ListGroupItem(html.H5("Links to the docs:"), className="border-0"),] 111 | + [make_listgroup_link(title, url) for title, url in dbc_card3_urls.items()], 112 | flush=True, 113 | className="border-0", 114 | ), 115 | ], 116 | className="class-card-tall", 117 | ) 118 | 119 | -------------------------------------------------------------------------------- /content/misc_helpers.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Misc & Helpers 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | user_select_code = """ 13 | ``` 14 | html.P("This paragraph will be entirely selected when clicked by the user", className="user-select-all") 15 | html.P("This paragraph has default select behaviour") 16 | html.P("This paragraph will not be selectable when clicked by the user", className="user-select-none") 17 | ```""" 18 | 19 | user_select_preview = html.Div( 20 | [ 21 | html.P( 22 | "This paragraph will be entirely selected when clicked by the user", 23 | className="user-select-all", 24 | ), 25 | html.P("This paragraph has default select behaviour"), 26 | html.P( 27 | "This paragraph will not be selectable when clicked by the user", 28 | className="user-select-none", 29 | ), 30 | ] 31 | ) 32 | 33 | pointer_code = """ 34 | ``` 35 | html.P([html.A("This link ", href="#", className="pe-none"), "can not be clicked"]) 36 | 37 | html.P( 38 | [ 39 | html.A("This link ", href="#", className="pe-auto"), 40 | "can be clicked (default behavior)", 41 | ] 42 | ) 43 | html.P( 44 | [ 45 | html.A("This link ", href="#"), 46 | "can not be clicked because the", 47 | html.Code(" pointer-events "), 48 | "property is inherited from it's parent. However, ", 49 | html.A("This link ", href="#", className="pe-auto"), 50 | "has a", 51 | html.Code(" pe-auto "), 52 | "class and can be clicked", 53 | ], 54 | className="pe-none", 55 | ) 56 | 57 | 58 | ```""" 59 | 60 | pointer_preview = html.Div( 61 | [ 62 | html.P( 63 | [html.A("This link ", href="#", className="pe-none"), "can not be clicked"] 64 | ), 65 | html.P( 66 | [ 67 | html.A("This link ", href="#", className="pe-auto"), 68 | "can be clicked (default behavior)", 69 | ] 70 | ), 71 | html.P( 72 | [ 73 | html.A("This link ", href="#"), 74 | "can not be clicked because the", 75 | html.Code(" pointer-events "), 76 | "property is inherited from it's parent. However, ", 77 | html.A("This link ", href="#", className="pe-auto"), 78 | "has a", 79 | html.Code(" pe-auto "), 80 | "class and can be clicked", 81 | ], 82 | className="pe-none", 83 | ), 84 | ] 85 | ) 86 | 87 | shadow_code = """ 88 | ``` 89 | html.Div("No shadow", className="shadow-none p-3 mb-5 bg-light rounded") 90 | html.Div("Small shadow", className="shadow-sm p-3 mb-5 bg-white rounded") 91 | html.Div("Regular shadow", className="shadow p-3 mb-5 bg-white rounded") 92 | html.Div("Larger shadow", className="shadow-lg p-3 mb-5 bg-white rounded") 93 | 94 | ```""" 95 | 96 | shadow_preview = html.Div( 97 | [ 98 | html.Div("No shadow", className="shadow-none p-3 mb-5 bg-light rounded"), 99 | html.Div("Small shadow", className="shadow-sm p-3 mb-5 bg-white rounded"), 100 | html.Div("Regular shadow", className="shadow p-3 mb-5 bg-white rounded"), 101 | html.Div("Larger shadow", className="shadow-lg p-3 mb-5 bg-white rounded"), 102 | ] 103 | ) 104 | 105 | overflow_code = """ 106 | 107 | overflow-{auto|hidden|visible|scroll} 108 | ``` 109 | html.Div( 110 | [ 111 | html.Div( 112 | 'This is an example of using "overflow-auto" on an element with set width and height dimensions. By design, this content will vertically scroll.', 113 | className="overflow-auto p-3 mb-3 me-sm-3 bg-light", 114 | style={"maxWidth": 260, "maxHeight": 100}, 115 | ), 116 | html.Div( 117 | 'This is an example of using "overflow-hidden" on an element with set width and height dimensions. ', 118 | className="overflow-hidden p-3 mb-3 me-sm-3 bg-light", 119 | style={"maxWidth": 260, "maxHeight": 100}, 120 | ), 121 | html.Div( 122 | 'This is an example of using "overflow-visible" on an element with set width and height dimensions. ', 123 | className="overflow-visible p-3 mb-3 me-sm-3 bg-light", 124 | style={"maxWidth": 260, "maxHeight": 100}, 125 | ), 126 | html.Div( 127 | 'This is an example of using "overflow-scroll" on an element with set width and height dimensions. ', 128 | className="overflow-scroll p-3 mb-3 me-sm-3 bg-light", 129 | style={"maxWidth": 260, "maxHeight": 100}, 130 | ), 131 | ], 132 | className="d-sm-flex d-md-block d-xxl-flex" 133 | ) 134 | ```""" 135 | 136 | overflow_preview = html.Div( 137 | [ 138 | html.Div( 139 | 'This is an example of using "overflow-auto" on an element with set width and height dimensions. By design, this content will vertically scroll.', 140 | className="overflow-auto p-3 mb-3 me-sm-3 bg-light", 141 | style={"maxWidth": 260, "maxHeight": 100}, 142 | ), 143 | html.Div( 144 | 'This is an example of using "overflow-hidden" on an element with set width and height dimensions. ', 145 | className="overflow-hidden p-3 mb-3 me-sm-3 bg-light", 146 | style={"maxWidth": 260, "maxHeight": 100}, 147 | ), 148 | html.Div( 149 | 'This is an example of using "overflow-visible" on an element with set width and height dimensions. ', 150 | className="overflow-visible p-3 mb-3 me-sm-3 bg-light", 151 | style={"maxWidth": 260, "maxHeight": 100}, 152 | ), 153 | html.Div( 154 | 'This is an example of using "overflow-scroll" on an element with set width and height dimensions. ', 155 | className="overflow-scroll p-3 bg-light", 156 | style={"maxWidth": 260, "maxHeight": 100}, 157 | ), 158 | ], 159 | className="d-sm-flex d-md-block d-xxl-flex", 160 | ) 161 | 162 | 163 | visible_code = """ 164 | ``` 165 | html.Div("...", className="visible") 166 | html.Div("...", className="invisible") 167 | ```""" 168 | 169 | visible_preview = html.Div( 170 | [html.Div("...", className="visible"), html.Div("...", className="invisible")] 171 | ) 172 | 173 | fixed_bottom_code = """ 174 | ``` 175 | html.Div("fixed bottom", className="fixed-bottom bg-primary text-white") 176 | ```""" 177 | 178 | fixed_bottom_preview = html.Div( 179 | [ 180 | "See bottom of the screen", 181 | html.Div("fixed bottom", className="fixed-bottom bg-primary text-white"), 182 | ] 183 | ) 184 | 185 | 186 | fixed_top_code = """ 187 | ``` 188 | html.Div("fixed top", className="fixed-top bg-primary text-white") 189 | ```""" 190 | 191 | fixed_top_preview = html.Div( 192 | [ 193 | "Look at top of screen", 194 | html.Div("fixed top", className="fixed-top bg-primary text-white"), 195 | ] 196 | ) 197 | 198 | 199 | sticky_top_code = """ 200 | Position an element at the top of the viewport, but only after you scroll past it. 201 | Not supported in all browsers 202 | Make responsive layouts by setting different gutters at breakpoints for device or viewport sizes: 203 | sticky-{sm|md|lg|xl|xxl}-top 204 | 205 | ``` 206 | html.Div("sticky top", className="sticky-top bg-primary text-white") 207 | ```""" 208 | 209 | sticky_top_preview = html.Div( 210 | "sticky top", className="sticky-top bg-primary text-white" 211 | ) 212 | 213 | 214 | img_fluid_code = """ 215 | ``` 216 | html.Img(src=..., className="img-fluid" 217 | ```""" 218 | 219 | img = "https://user-images.githubusercontent.com/72614349/133930947-1c95d44e-a6a5-44fd-a66d-258baddb44a4.png" 220 | 221 | img_fluid_preview = html.Div( 222 | [ 223 | "Change the screen size to see that the image scales in parent container", 224 | html.Img(src=img, className="img-fluid"), 225 | ] 226 | ) 227 | 228 | img_thumbnail_code = """ 229 | ``` 230 | html.Div(html.Img(src=..., className="img-thumbnail" 231 | ```""" 232 | img_thumbnail_preview = html.Img(src=img, className="img-thumbnail img-fluid") 233 | 234 | 235 | # ---------------------------------------------------------- 236 | 237 | misc_helpers = dbc.Card( 238 | [ 239 | dbc.CardHeader( 240 | [ 241 | html.H3("Misc & Helpers"), 242 | make_link("https://getbootstrap.com/docs/5.1/utilities/interactions/"), 243 | ], 244 | className="hstack gap-4", 245 | ), 246 | dbc.ListGroup( 247 | [ 248 | make_listgroup_item( 249 | "user-select-{option}", "how content is selected {all|auto|none}" 250 | ), 251 | make_listgroup_item( 252 | "pe-{option} (pointer)", "whether links can be clicked" 253 | ), 254 | make_listgroup_item( 255 | "overflow-{option}", 256 | "how content overflows an element {auto|hidden|visible|scroll}", 257 | ), 258 | make_listgroup_item("shadow-{option}", "box shadows {none|sm|lg}"), 259 | make_listgroup_item("visible/invisible"), 260 | make_listgroup_item("fixed-top", "element fixed to top of viewport",), 261 | make_listgroup_item( 262 | "fixed-bottom", "element fixed to bottom of viewport", 263 | ), 264 | make_listgroup_item( 265 | "sticky-*-top", 266 | "fixed to top of viewport but only after scrolling past it", 267 | ), 268 | make_listgroup_item("img-fluid", "scale image with screen size"), 269 | make_listgroup_item("img-thumbnail", "Add frame to image"), 270 | # make_listgroup_item("ratio", "set aspect ratio") 271 | ], 272 | flush=True, 273 | className="border-0", 274 | ), 275 | ], 276 | className="class-card", 277 | ) 278 | -------------------------------------------------------------------------------- /content/plotly_components.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card for the Dash Boostrap Components links 3 | """ 4 | 5 | from dash import html 6 | import dash_bootstrap_components as dbc 7 | from utilities import make_link, make_listgroup_link, dbc_url, dbc_home_url 8 | 9 | plotly_urls = { 10 | "Dash Community Forum": "https://community.plotly.com/", 11 | "Dash Example Index": "https://dash-example-index.herokuapp.com/", 12 | "Dash Tutorial": "https://dash.plotly.com/", 13 | "Dash Core Components": "https://dash.plotly.com/dash-core-components", 14 | "Dash HTML Components": "https://dash.plotly.com/dash-html-components", 15 | "DataTable": "https://dash.plotly.com/datatable", 16 | "Dash DAQ components": "https://dash.plotly.com/dash-daq", 17 | "Plotly Graphs": "https://plotly.com/python/", 18 | "Plotly Github": "https://github.com/plotly", 19 | } 20 | 21 | 22 | plotly_links = dbc.Card( 23 | [ 24 | dbc.CardHeader( 25 | [html.H3("Plotly Dash"), make_link("https://dash.plotly.com/"),], 26 | className="hstack gap-4", 27 | ), 28 | dbc.ListGroup( 29 | [dbc.ListGroupItem(html.H5("Links to the docs:"), className="border-0"),] 30 | + [make_listgroup_link(title, url) for title, url in plotly_urls.items()], 31 | flush=True, 32 | className="border-0", 33 | ), 34 | ], 35 | className="class-card-tall", 36 | ) 37 | -------------------------------------------------------------------------------- /content/typography.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Typography 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | h1h6_code = """ 13 | Note - See also dcc.Markdown() to format text 14 | ``` 15 | h1h6_html_preview = html.Div( 16 | [ 17 | html.H1("Heading 1"), 18 | html.H2("Heading 2"), 19 | html.H3("Heading 3"), 20 | html.H4("Heading 4"), 21 | html.H5("Heading 5"), 22 | html.H6("Heading 6"), 23 | ] 24 | ) 25 | 26 | h1h6_class_preview = html.Div( 27 | [ 28 | html.Div("Heading 1", className="h1"), 29 | html.Div("Heading 2", className="h2"), 30 | html.Div("Heading 3", className="h3"), 31 | html.Div("Heading 4", className="h4"), 32 | html.Div("Heading 5", className="h5"), 33 | html.Div("Heading 6", className="h6"), 34 | ] 35 | ) 36 | ```""" 37 | 38 | h1h6_html_preview = html.Div( 39 | [ 40 | html.H1("Heading 1"), 41 | html.H2("Heading 2"), 42 | html.H3("Heading 3"), 43 | html.H4("Heading 4"), 44 | html.H5("Heading 5"), 45 | html.H6("Heading 6"), 46 | ] 47 | ) 48 | h1h6_class_preview = html.Div( 49 | [ 50 | html.Div("Heading 1", className="h1"), 51 | html.Div("Heading 2", className="h2"), 52 | html.Div("Heading 3", className="h3"), 53 | html.Div("Heading 4", className="h4"), 54 | html.Div("Heading 5", className="h5"), 55 | html.Div("Heading 6", className="h6"), 56 | ] 57 | ) 58 | h1h6_preview = html.Div( 59 | [ 60 | h1h6_html_preview, 61 | html.Div( 62 | "Or apply heading styles to other components with className:", 63 | className="my-4", 64 | ), 65 | h1h6_class_preview, 66 | ] 67 | ) 68 | 69 | # ------ Display -------------------------------------------------------------- 70 | 71 | 72 | display_code = """ 73 | Note - See also dcc.Markdown() to format text 74 | ``` 75 | 76 | display_preview = html.Div( 77 | [ 78 | html.Div("Display 1", className="display-1"), 79 | html.Div("Display 2", className="display-2"), 80 | html.Div("Display 3", className="display-3"), 81 | html.Div("Display 4", className="display-4"), 82 | html.Div("Display 5", className="display-5"), 83 | html.Div("Display 6", className="display-6"), 84 | ] 85 | ) 86 | ```""" 87 | display_preview = html.Div( 88 | [ 89 | html.Div("Display 1", className="display-1"), 90 | html.Div("Display 2", className="display-2"), 91 | html.Div("Display 3", className="display-3"), 92 | html.Div("Display 4", className="display-4"), 93 | html.Div("Display 5", className="display-5"), 94 | html.Div("Display 6", className="display-6"), 95 | ] 96 | ) 97 | 98 | 99 | # ---- lead ---------------------------------------------------------------- 100 | 101 | lead_code = """ 102 | Note - See also dcc.Markdown() to format text 103 | ``` 104 | 105 | lead_preview = html.Div( 106 | [ 107 | html.P("This is a lead paragraph. It stands out from regular paragraphs.", className="lead"), 108 | html.P("This is a regular paragraph."), 109 | 110 | ] 111 | ) 112 | ```""" 113 | 114 | lead_preview = html.Div( 115 | [ 116 | html.P( 117 | "This is a lead paragraph. It stands out from regular paragraphs.", 118 | className="lead", 119 | ), 120 | html.P("This is a regular paragraph."), 121 | ] 122 | ) 123 | 124 | # ---- mark ---------------------------------------------------------------- 125 | 126 | mark_code = """ 127 | Note - See also dcc.Markdown() to format text 128 | ``` 129 | 130 | mark_preview = html.Div( 131 | [ 132 | html.P(["You can use html.Mark to ", html.Mark("highlight"), " text"]), 133 | 134 | ] 135 | ) 136 | ```""" 137 | 138 | mark_preview = html.Div( 139 | [html.P(["You can use html.Mark to ", html.Mark("highlight"), " text"]),] 140 | ) 141 | 142 | # ---- small ---------------------------------------------------------------- 143 | 144 | small_code = """ 145 | Note - See also dcc.Markdown() to format text 146 | ``` 147 | 148 | small_preview = html.Div( 149 | [ 150 | html.Small("This line of text is meant to be treated as fine print"), 151 | html.P("This is a regular print."), 152 | 153 | ] 154 | ) 155 | 156 | ```""" 157 | 158 | small_preview = html.Div( 159 | [ 160 | html.Small("This line of text is meant to be treated as fine print"), 161 | html.P("This is a regular print."), 162 | ] 163 | ) 164 | 165 | 166 | # ---- abbr & initialism ---------------------------------------------------------------- 167 | 168 | abbr_code = """ 169 | Note - See also dcc.Markdown() to format text 170 | ``` 171 | 172 | abbr_preview = html.Div( 173 | [ 174 | html.P(html.Abbr("attr", title="attribute")), 175 | html.P( 176 | html.Abbr("HTML", title="HyperText Markup Language"), className="initialism" 177 | ), 178 | html.P( 179 | [ 180 | html.Abbr("HTML", title="HyperText Markup Language"), 181 | "without initialism class", 182 | ] 183 | ), 184 | ] 185 | ) 186 | 187 | 188 | ```""" 189 | 190 | abbr_preview = html.Div( 191 | [ 192 | html.P(html.Abbr("attr", title="attribute")), 193 | html.P( 194 | html.Abbr("HTML", title="HyperText Markup Language"), className="initialism" 195 | ), 196 | html.P( 197 | [ 198 | html.Abbr("HTML", title="HyperText Markup Language"), 199 | "without initialism class", 200 | ] 201 | ), 202 | ] 203 | ) 204 | 205 | 206 | # ---- blockquote ---------------------------------------------------------------- 207 | 208 | blockquote_code = """ 209 | Note - See also dcc.Markdown() to format text 210 | ``` 211 | blockquote_preview = html.Div( 212 | [ 213 | html.Blockquote( 214 | html.P( 215 | "There are only two industries that refer to their customers as ‘users’." 216 | ), 217 | className="blockquote", 218 | ), 219 | html.Footer("Edward Tufte ", className="blockquote-footer"), 220 | ], 221 | ) 222 | 223 | ```""" 224 | 225 | blockquote_preview = html.Div( 226 | [ 227 | html.Blockquote( 228 | html.P( 229 | "There are only two industries that refer to their customers as ‘users’." 230 | ), 231 | className="blockquote", 232 | ), 233 | html.Footer("Edward Tufte ", className="blockquote-footer"), 234 | ], 235 | ) 236 | 237 | 238 | # ---- cite ---------------------------------------------------------------- 239 | 240 | cite_code = """ 241 | Note - See also dcc.Markdown() to format text 242 | ``` 243 | cite_preview = html.Div( 244 | [ 245 | html.Blockquote(html.P("Where is the ‘any’ key?"), className="blockquote",), 246 | html.Footer( 247 | ["Homer Simpson ", html.Cite("The Simpsons", title="The Simpsons TV show")], 248 | className="blockquote-footer", 249 | ), 250 | ], 251 | ) 252 | 253 | ```""" 254 | 255 | cite_preview = html.Div( 256 | [ 257 | html.Blockquote(html.P("Where is the ‘any’ key?"), className="blockquote",), 258 | html.Footer( 259 | ["Homer Simpson ", html.Cite("The Simpsons", title="The Simpsons TV show")], 260 | className="blockquote-footer", 261 | ), 262 | ], 263 | ) 264 | 265 | 266 | 267 | 268 | # -------------------------------------------------------------------- 269 | # Cheatsheet Card - Header name, item name and hover info 270 | # -------------------------------------------------------------------- 271 | typography = dbc.Card( 272 | [ 273 | dbc.CardHeader( 274 | [ 275 | html.H3("Typography"), 276 | make_link("https://getbootstrap.com/docs/5.1/content/typography/"), 277 | ], 278 | className="hstack gap-4", 279 | ), 280 | dbc.ListGroup( 281 | [ 282 | make_listgroup_item("h1-h6", "headings"), 283 | make_listgroup_item( 284 | "display-{size}", "larger more opinionated heading style" 285 | ), 286 | make_listgroup_item("lead", "make paragraphs stand out"), 287 | make_listgroup_item("mark", "highlight text"), 288 | make_listgroup_item( 289 | "small", "small print, like copyright and legal text" 290 | ), 291 | make_listgroup_item("abbr", "abbreviations"), 292 | make_listgroup_item( 293 | "initialism", "slightly smaller font - use with html.Abbr" 294 | ), 295 | make_listgroup_item( 296 | "blockquote", "for quoting content from another source" 297 | ), 298 | make_listgroup_item("blockquote-footer", "blockquote small print"), 299 | make_listgroup_item("cite", "name of source work"), 300 | ], 301 | flush=True, 302 | className="border-0", 303 | ), 304 | ], 305 | className="class-card", 306 | ) 307 | -------------------------------------------------------------------------------- /content/utility_background.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Background 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | bg_color_code = """ 13 | ``` 14 | html.P("bg-primary", className="bg-primary") 15 | html.P("bg-secondary", className="bg-secondary") 16 | html.P("bg-success", className="bg-success") 17 | html.P("bg-danger", className="bg-danger") 18 | html.P("bg-warning", className="bg-warning") 19 | html.P("bg-info", className="bg-info") 20 | html.P("bg-light", className="bg-light") 21 | html.P("bg-dark", className="bg-dark") 22 | 23 | ```""" 24 | 25 | 26 | bg_color_preview = html.Div( 27 | [ 28 | html.P("bg-primary", className="bg-primary"), 29 | html.P("bg-secondary", className="bg-secondary"), 30 | html.P("bg-success", className="bg-success"), 31 | html.P("bg-danger", className="bg-danger"), 32 | html.P("bg-warning", className="bg-warning"), 33 | html.P("bg-info", className="bg-info"), 34 | html.P("bg-light", className="bg-light"), 35 | html.P("bg-dark", className="bg-dark text-white"), 36 | ] 37 | ) 38 | 39 | 40 | bg_transparent_code = """ 41 | ``` 42 | html.P("bg-transparent", className="bg-transparent") 43 | ```""" 44 | 45 | 46 | bg_transparent_preview = html.Div( 47 | [html.P("bg-transparent", className="bg-transparent"),] 48 | ) 49 | 50 | 51 | bg_gradient_code = """ 52 | ``` 53 | html.P("bg-primary", className="bg-primary text-white"), 54 | html.P("bg-primary bg-gradient", className="bg-primary bg-gradient text-white") 55 | ```""" 56 | 57 | 58 | bg_gradient_preview = html.Div( 59 | [ 60 | html.P("bg-primary", className="bg-primary text-white", style={"height": 100}), 61 | html.P( 62 | "bg-primary bg-gradient", 63 | className="bg-primary bg-gradient text-white", 64 | style={"height": 100}, 65 | ), 66 | ] 67 | ) 68 | 69 | 70 | bg_opacity_code = """ 71 | ``` 72 | html.Div("default", className="p-2 m-1 bg-primary text-light fw-bold rounded") 73 | html.Div("75%", className="bg-opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded") 74 | html.Div("50%", className="bg-opacity-50 p-2 m-1 bg-primary text-dark fw-bold rounded") 75 | html.Div("25%", className="bg-opacity-25 p-2 m-1 bg-primary text-dark fw-bold rounded") 76 | html.Div("10%", className="bg-opacity-10 p-2 m-1 bg-primary text-dark fw-bold rounded") 77 | 78 | ```""" 79 | 80 | bg_opacity_preview = html.Div( 81 | [ 82 | html.Div("default", className="p-2 m-1 bg-primary text-light fw-bold rounded"), 83 | html.Div( 84 | "75%", 85 | className="bg-opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded", 86 | ), 87 | html.Div( 88 | "50%", 89 | className="bg-opacity-50 p-2 m-1 bg-primary text-dark fw-bold rounded", 90 | ), 91 | html.Div( 92 | "25%", 93 | className="bg-opacity-25 p-2 m-1 bg-primary text-dark fw-bold rounded", 94 | ), 95 | html.Div( 96 | "10%", 97 | className="bg-opacity-10 p-2 m-1 bg-primary text-dark fw-bold rounded", 98 | ), 99 | ] 100 | ) 101 | 102 | 103 | 104 | # -------------------------------------------------------------------- 105 | # Cheatsheet Card - Header name, item name and hover info 106 | # -------------------------------------------------------------------- 107 | utility_background = dbc.Card( 108 | [ 109 | dbc.CardHeader( 110 | [ 111 | html.H3("Utility: Background"), 112 | make_link("https://getbootstrap.com/docs/5.1/utilities/background/"), 113 | ], 114 | className="hstack gap-4", 115 | ), 116 | dbc.ListGroup( 117 | [ 118 | make_listgroup_item( 119 | "bg-{color}", 120 | "background {primary|secondary|success|danger|warning|info|light|dark|white}", 121 | ), 122 | make_listgroup_item("bg-transparent", "background transparent"), 123 | make_listgroup_item("bg-gradient", "background gradient"), 124 | ], 125 | flush=True, 126 | className="border-0", 127 | ), 128 | make_listgroup_item( 129 | "bg-opacity-{val}", "background opacity {100|75|50|25|0}" 130 | ), 131 | ], 132 | className="class-card", 133 | ) 134 | -------------------------------------------------------------------------------- /content/utility_border.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Border Card 5 | """ 6 | 7 | 8 | from dash import html 9 | import dash_bootstrap_components as dbc 10 | 11 | from utilities import make_link, make_listgroup_item 12 | 13 | border_code = """ 14 | ``` 15 | html.Span(className="border") 16 | ```""" 17 | border_preview = html.Div(html.Span(className="border"), className="border-utils") 18 | 19 | 20 | border_direction_code = """ 21 | ```python 22 | html.Span(className="border-top") 23 | html.Span(className="border-end") 24 | html.Span(className="border-bottom") 25 | html.Span(className="border-start") 26 | ```""" 27 | 28 | 29 | border_direction_preview = html.Div( 30 | [ 31 | html.Span(className="border-top"), 32 | html.Span(className="border-end"), 33 | html.Span(className="border-bottom"), 34 | html.Span(className="border-start"), 35 | ], 36 | className="border-utils", 37 | ) 38 | 39 | 40 | border_0_code = """ 41 | ``` 42 | html.Span(className="border-0") 43 | ```""" 44 | border_0_preview = html.Div(html.Span(className="border-0"), className="border-utils") 45 | 46 | 47 | border_direction_0_code = """ 48 | ```python 49 | html.Span(className=" border border-top-0 ") 50 | html.Span(className="border border-end-0") 51 | html.Span(className="border border-bottom-0") 52 | html.Span(className="border border-start-0") 53 | """ 54 | 55 | 56 | border_direction_0_preview = html.Div( 57 | [ 58 | html.Span(className="border border-top-0"), 59 | html.Span(className="border border-end-0"), 60 | html.Span(className="border border-bottom-0"), 61 | html.Span(className="border border-start-0"), 62 | ], 63 | className="border-utils", 64 | ) 65 | 66 | border_color_code = """ 67 | ``` 68 | html.Span(className="border border-primary") 69 | html.Span(className="border border-secondary") 70 | html.Span(className="border border-success") 71 | html.Span(className="border border-danger") 72 | html.Span(className="border border-warning") 73 | html.Span(className="border border-info") 74 | html.Span(className="border border-light") 75 | html.Span(className="border border-dark") 76 | html.Span(className="border border-white") 77 | ```""" 78 | border_color_preview = html.Div( 79 | [ 80 | html.Span(className="border border-primary"), 81 | html.Span(className="border border-secondary"), 82 | html.Span(className="border border-success"), 83 | html.Span(className="border border-danger"), 84 | html.Span(className="border border-warning"), 85 | html.Span(className="border border-info"), 86 | html.Span(className="border border-light"), 87 | html.Span(className="border border-dark"), 88 | html.Span(className="border border-white"), 89 | ], 90 | className="border-utils", 91 | ) 92 | 93 | border_size_code = """ 94 | ``` 95 | html.Span(className="border border-1") 96 | html.Span(className="border border-2") 97 | html.Span(className="border border-3") 98 | html.Span(className="border border-4") 99 | html.Span(className="border border-5") 100 | ```""" 101 | border_size_preview = html.Div( 102 | [ 103 | html.Span(className="border border-1"), 104 | html.Span(className="border border-2"), 105 | html.Span(className="border border-3"), 106 | html.Span(className="border border-4"), 107 | html.Span(className="border border-5"), 108 | ], 109 | className="border-utils", 110 | ) 111 | 112 | border_rounded_code = """ 113 | ``` 114 | html.Span(className="border rounded") 115 | ```""" 116 | border_rounded_preview = html.Div( 117 | [html.Span(className="border rounded"),], className="border-utils" 118 | ) 119 | 120 | 121 | border_rounded_corner_code = """ 122 | ``` 123 | html.Span(className="border rounded-top") 124 | html.Span(className="border rounded-end") 125 | html.Span(className="border rounded-bottom") 126 | html.Span(className="border rounded-start") 127 | html.Span(className="border rounded-circle") 128 | html.Span(className="border rounded-pill") 129 | ```""" 130 | border_rounded_corner_preview = html.Div( 131 | [ 132 | html.Span(className="border rounded-top"), 133 | html.Span(className="border rounded-end"), 134 | html.Span(className="border rounded-bottom"), 135 | html.Span(className="border rounded-start"), 136 | html.Span(className="border rounded-circle"), 137 | html.Span(className="pill border rounded-pill"), 138 | ], 139 | className="border-utils", 140 | ) 141 | 142 | 143 | border_rounded_size_code = """ 144 | ``` 145 | html.Span(className="border rounded-0") 146 | html.Span(className="border rounded-1") 147 | html.Span(className="border rounded-2") 148 | html.Span(className="border rounded-3") 149 | ```""" 150 | border_rounded_size_preview = html.Div( 151 | [ 152 | html.Span(className="border rounded-0"), 153 | html.Span(className="border rounded-1"), 154 | html.Span(className="border rounded-2"), 155 | html.Span(className="border rounded-3"), 156 | ], 157 | className="border-utils", 158 | ) 159 | 160 | # -------------------------------------------------------------------- 161 | # Cheatsheet Card - Header name, item name and hover info 162 | # -------------------------------------------------------------------- 163 | utility_border = dbc.Card( 164 | [ 165 | dbc.CardHeader( 166 | [ 167 | html.H3("Utility: Border"), 168 | make_link("https://getbootstrap.com/docs/5.1/utilities/borders/"), 169 | ], 170 | className="hstack gap-4", 171 | ), 172 | dbc.ListGroup( 173 | [ 174 | make_listgroup_item("border", "border all sides"), 175 | make_listgroup_item( 176 | "border-{direction}", "border on {top|end|bottom|start}" 177 | ), 178 | make_listgroup_item("border-0", "no border"), 179 | make_listgroup_item( 180 | "border-{direction}-0", "no border {top|end|bottom|start} " 181 | ), 182 | make_listgroup_item( 183 | "border-{color}", 184 | "{primary|secondary|success|danger|warning|info|light|dark|white}", 185 | ), 186 | make_listgroup_item("border-{size}", "border width {1|2|3|4|5}"), 187 | make_listgroup_item("rounded", "border radius all corners"), 188 | make_listgroup_item( 189 | "rounded-{corner}", " radius at {top|end|bottom|start|circle|pill}" 190 | ), 191 | make_listgroup_item("rounded-{size}", "border radius size {0|1|2|3}"), 192 | ], 193 | flush=True, 194 | className="border-0", 195 | ), 196 | ], 197 | className="class-card", 198 | ) 199 | -------------------------------------------------------------------------------- /content/utility_color.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Color 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | text_color_code = """ 13 | ``` 14 | html.P("text-primary", className="text-primary") 15 | html.P("text-secondary", className="text-secondary") 16 | html.P("text-success", className="text-success") 17 | html.P("text-danger", className="text-danger") 18 | html.P("text-warning", className="text-warning") 19 | html.P("text-info", className="text-info") 20 | html.P("text-light", className="text-light") 21 | html.P("text-dark", className="text-dark") 22 | ```""" 23 | 24 | text_color_preview = html.Div( 25 | [ 26 | html.P("text-primary", className="text-primary"), 27 | html.P("text-secondary", className="text-secondary"), 28 | html.P("text-success", className="text-success"), 29 | html.P("text-danger", className="text-danger"), 30 | html.P("text-warning", className="text-warning"), 31 | html.P("text-info", className="text-info"), 32 | html.P("text-light", className="text-light bg-dark"), 33 | html.P("text-dark", className="text-dark"), 34 | html.P("text-white", className="text-white bg-dark"), 35 | html.P("text-black", className="text-black"), 36 | html.P("text-body", className="text-body"), 37 | html.P("text-muted", className="text-muted"), 38 | ] 39 | ) 40 | 41 | text_body_code = """ 42 | ``` 43 | html.P("text-body", className="text-body") 44 | ```""" 45 | 46 | 47 | text_body_preview = html.Div([html.P("text-body", className="text-body"),]) 48 | 49 | text_muted_code = """ 50 | ``` 51 | html.P("text-muted", className="text-muted") 52 | html.P("default text color") 53 | ```""" 54 | 55 | 56 | text_muted_preview = html.Div( 57 | [html.P("text-muted", className="text-muted"), html.P("default text color")] 58 | ) 59 | 60 | 61 | text_white_50_code = """ 62 | Note: Deprecated use "opacity-*" instead 63 | ``` 64 | html.P("text-white-50", className="text-white-50") 65 | ```""" 66 | 67 | 68 | text_white_50_preview = html.Div( 69 | [ 70 | html.P("text-white", className="text-white bg-dark"), 71 | html.P("text-white-50", className="text-white-50 bg-dark"), 72 | ] 73 | ) 74 | 75 | text_black_50_code = """ 76 | 77 | Note: Deprecated use "opacity-*" instead 78 | ``` 79 | html.P("text-black-50", className="text-black-50") 80 | ```""" 81 | 82 | 83 | text_black_50_preview = html.Div( 84 | [ 85 | html.P("text-black", className="text-black bg-white"), 86 | html.P("text-black-50", className="text-black-50 bg-white"), 87 | ] 88 | ) 89 | 90 | 91 | # -------------------------------------------------------------------- 92 | # Cheatsheet Card - Header name, item name and hover info 93 | # -------------------------------------------------------------------- 94 | utility_color = dbc.Card( 95 | [ 96 | dbc.CardHeader( 97 | [ 98 | html.H3("Utility: Color"), 99 | make_link("https://getbootstrap.com/docs/5.1/utilities/colors/"), 100 | ], 101 | className="hstack gap-4", 102 | ), 103 | dbc.ListGroup( 104 | [ 105 | make_listgroup_item( 106 | "text-{color}", 107 | "{primary|secondary|success|danger|warning|info|light|dark|white}", 108 | ), 109 | make_listgroup_item("text-body", "Text color used in the body"), 110 | make_listgroup_item("text-muted", "Text color muted"), 111 | make_listgroup_item("text-black-50", "deprecated - use opacity"), 112 | make_listgroup_item("text-white-50", "deprecated - use opacity"), 113 | 114 | ], 115 | flush=True, 116 | className="border-0", 117 | ), 118 | ], 119 | className="class-card", 120 | ) 121 | -------------------------------------------------------------------------------- /content/utility_display.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Display 5 | """ 6 | 7 | 8 | from dash import html 9 | import dash_bootstrap_components as dbc 10 | 11 | from utilities import make_link, make_listgroup_item 12 | 13 | 14 | d_none_code = """ 15 | 16 | d-{xs|sm|md|lg|xl|xxl}-none 17 | Change screen size to see responsive content 18 | ``` 19 | html.Div("d-none", className="d-none") 20 | html.Div("d-sm-none", className="d-sm-none") 21 | html.Div("d-md-none", className="d-md-none") 22 | html.Div("d-lg-none", className="d-lg-none") 23 | html.Div("d-xl-none", className="d-xl-none") 24 | html.Div("d-xxl-none", className="d-xxl-none") 25 | ```""" 26 | 27 | 28 | d_none_preview = html.Div( 29 | [ 30 | html.P("Change screen size to see responsive content"), 31 | html.Div("d-none", className="d-none border bg-light m-1"), 32 | html.Div("d-sm-none", className="d-sm-none border bg-light m-1"), 33 | html.Div("d-md-none", className="d-md-none border bg-light m-1"), 34 | html.Div("d-lg-none", className="d-lg-none border bg-light m-1"), 35 | html.Div("d-xl-none", className="d-xl-none border bg-light m-1"), 36 | html.Div("d-xxl-none", className="d-xxl-none border bg-light m-1"), 37 | ] 38 | ) 39 | 40 | 41 | d_inline_code = """ 42 | 43 | d-{xs|sm|md|lg|xl|xxl}-inline 44 | Change screen size to see responsive content 45 | ``` 46 | html.Div("d-inline", className="d-inline") 47 | html.Div("d-sm-inline", className="d-sm-inline") 48 | html.Div("d-md-inline", className="d-md-inline") 49 | html.Div("d-lg-inline", className="d-lg-inline") 50 | html.Div("d-xl-inline", className="d-xl-inline") 51 | html.Div("d-xxl-inline", className="d-xxl-inline") 52 | ```""" 53 | 54 | 55 | d_inline_preview = html.Div( 56 | [ 57 | html.P("Change screen size to see responsive content"), 58 | html.Div("d-inline", className="d-inline border bg-light m-1"), 59 | html.Div("d-sm-inline", className="d-sm-inline border bg-light m-1"), 60 | html.Div("d-md-inline", className="d-md-inline border bg-light m-1"), 61 | html.Div("d-lg-inline", className="d-lg-inline border bg-light m-1"), 62 | html.Div("d-xl-inline", className="d-xl-inline border bg-light m-1"), 63 | html.Div("d-xxl-inline", className="d-xxl-inline border bg-light m-1"), 64 | ] 65 | ) 66 | 67 | 68 | d_inline_block_code = """ 69 | 70 | d-{xs|sm|md|lg|xl|xxl}-inline-block 71 | Change screen size to see responsive content 72 | ``` 73 | html.Div("d-inline-block", className="d-inline-block") 74 | html.Div("d-sm-inline-block", className="d-sm-inline-block") 75 | html.Div("d-md-inline-block", className="d-md-inline-block") 76 | html.Div("d-lg-inline-block", className="d-lg-inline-block") 77 | html.Div("d-xl-inline-block", className="d-xl-inline-block") 78 | html.Div("d-xxl-inline-block", className="d-xxl-inline-block") 79 | ```""" 80 | 81 | 82 | d_inline_block_preview = html.Div( 83 | [ 84 | html.P("Change screen size to see responsive content"), 85 | html.Div("d-inline-block", className="d-inline-block border bg-light m-1"), 86 | html.Div( 87 | "d-sm-inline-block", className="d-sm-inline-block border bg-light m-1" 88 | ), 89 | html.Div( 90 | "d-md-inline-block", className="d-md-inline-block border bg-light m-1" 91 | ), 92 | html.Div( 93 | "d-lg-inline-block", className="d-lg-inline-block border bg-light m-1" 94 | ), 95 | html.Div( 96 | "d-xl-inline-block", className="d-xl-inline-block border bg-light m-1" 97 | ), 98 | html.Div( 99 | "d-xxl-inline-block", className="d-xxl-inline-block border bg-light m-1" 100 | ), 101 | ] 102 | ) 103 | 104 | 105 | d_block_code = """ 106 | 107 | d-{xs|sm|md|lg|xl|xxl}-block 108 | Change screen size to see responsive content 109 | ``` 110 | html.Span("d-block", className="d-block") 111 | html.Span("d-sm-block", className="d-sm-block") 112 | html.Span("d-md-block", className="d-md-block") 113 | html.Span("d-lg-block", className="d-lg-block") 114 | html.Span("d-xl-block", className="d-xl-block") 115 | html.Span("d-xxl-block", className="d-xxl-block") 116 | ```""" 117 | 118 | 119 | d_block_preview = html.Div( 120 | [ 121 | html.P("Change screen size to see responsive content"), 122 | html.Span("d-block", className="d-block border bg-light m-1"), 123 | html.Span("d-sm-block", className="d-sm-block border bg-light m-1"), 124 | html.Span("d-md-block", className="d-md-block border bg-light m-1"), 125 | html.Span("d-lg-block", className="d-lg-block border bg-light m-1"), 126 | html.Span("d-xl-block", className="d-xl-block border bg-light m-1"), 127 | html.Span("d-xxl-block", className="d-xxl-block border bg-light m-1"), 128 | ] 129 | ) 130 | 131 | 132 | d_grid_code = """ 133 | 134 | d-{xs|sm|md|lg|xl|xxl}-grid 135 | Change screen size to see responsive content 136 | ``` 137 | html.Span("d-grid", className="d-grid") 138 | html.Span("d-sm-grid", className="d-sm-grid") 139 | html.Span("d-md-grid", className="d-md-grid") 140 | html.Span("d-lg-grid", className="d-lg-grid") 141 | html.Span("d-xl-grid", className="d-xl-grid") 142 | html.Span("d-xxl-grid", className="d-xxl-grid") 143 | ```""" 144 | 145 | 146 | d_grid_preview = html.Div( 147 | [ 148 | html.P("Change screen size to see responsive content"), 149 | html.Span("d-grid", className="d-grid border bg-light m-1"), 150 | html.Span("d-sm-grid", className="d-sm-grid border bg-light m-1"), 151 | html.Span("d-md-grid", className="d-md-grid border bg-light m-1"), 152 | html.Span("d-lg-grid", className="d-lg-grid border bg-light m-1"), 153 | html.Span("d-xl-grid", className="d-xl-grid border bg-light m-1"), 154 | html.Span("d-xxl-grid", className="d-xxl-grid border bg-light m-1"), 155 | ] 156 | ) 157 | 158 | 159 | d_flex_code = """ 160 | 161 | d-{xs|sm|md|lg|xl|xxl}-flex 162 | Change screen size to see responsive content 163 | ``` 164 | html.Span("d-flex", className="d-flex") 165 | html.Span("d-sm-flex", className="d-sm-flex") 166 | html.Span("d-md-flex", className="d-md-flex") 167 | html.Span("d-lg-flex", className="d-lg-flex") 168 | html.Span("d-xl-flex", className="d-xl-flex") 169 | html.Span("d-xxl-flex", className="d-xxl-flex") 170 | ```""" 171 | 172 | 173 | d_flex_preview = html.Div( 174 | [ 175 | html.P("Change screen size to see responsive content"), 176 | html.Span("d-flex", className="d-flex border bg-light m-1"), 177 | html.Span("d-sm-flex", className="d-sm-flex border bg-light m-1"), 178 | html.Span("d-md-flex", className="d-md-flex border bg-light m-1"), 179 | html.Span("d-lg-flex", className="d-lg-flex border bg-light m-1"), 180 | html.Span("d-xl-flex", className="d-xl-flex border bg-light m-1"), 181 | html.Span("d-xxl-flex", className="d-xxl-flex border bg-light m-1"), 182 | ] 183 | ) 184 | 185 | 186 | d_inline_flex_code = """ 187 | 188 | d-{xs|sm|md|lg|xl|xxl}-inline-flex 189 | Change screen size to see responsive content 190 | ``` 191 | html.Div("d-inline-flex", className="d-inline-flex") 192 | html.Div("d-sm-inline-flex", className="d-sm-inline-flex") 193 | html.Div("d-md-inline-flex", className="d-md-inline-flex") 194 | html.Div("d-lg-inline-flex", className="d-lg-inline-flex") 195 | html.Div("d-xl-inline-flex", className="d-xl-inline-flex") 196 | html.Div("d-xxl-inline-flex", className="d-xxl-inline-flex") 197 | ```""" 198 | 199 | 200 | d_inline_flex_preview = html.Div( 201 | [ 202 | html.P("Change screen size to see responsive content"), 203 | html.Div("d-inline-flex", className="d-inline-flex border bg-light m-1"), 204 | html.Div("d-sm-inline-flex", className="d-sm-inline-flex border bg-light m-1"), 205 | html.Div("d-md-inline-flex", className="d-md-inline-flex border bg-light m-1"), 206 | html.Div("d-lg-inline-flex", className="d-lg-inline-flex border bg-light m-1"), 207 | html.Div("d-xl-inline-flex", className="d-xl-inline-flex border bg-light m-1"), 208 | html.Div( 209 | "d-xxl-inline-flex", className="d-xxl-inline-flex border bg-light m-1" 210 | ), 211 | ] 212 | ) 213 | 214 | 215 | d_print_display_code = """ 216 | 217 | d-print-{none|inline|inline-block|grid|flex|inline-flex} 218 | Change screen size to see responsive content 219 | ``` 220 | html.Div("d-print-none", className="d-print-none") 221 | html.Div("d-print-inline", className="d-print-inline") 222 | html.Div("d-print-inline-block", className="d-print-inline-block") 223 | html.Div("d-print-block", className="d-print-block") 224 | html.Div("d-print-grid", className="d-print-grid") 225 | html.Div("d-print-flex", className="d-print-flex") 226 | html.Div("d-print-inline-flex", className="d-print-inline-flex") 227 | ```""" 228 | 229 | 230 | d_print_display_preview = html.Div( 231 | [ 232 | html.P("Change screen size to see responsive content"), 233 | html.Div("d-print-none", className="d-print-none border bg-light m-1"), 234 | html.Div("d-print-inline", className="d-print-inline border bg-light m-1"), 235 | html.Div( 236 | "d-print-inline-block", className="d-print-inline-block border bg-light m-1" 237 | ), 238 | html.Div("d-print-block", className="d-print-block border bg-light m-1"), 239 | html.Div("d-print-grid", className="d-print-grid border bg-light m-1"), 240 | html.Div("d-print-flex", className="d-print-flex border bg-light m-1"), 241 | html.Div( 242 | "d-print-inline-flex", className="d-print-inline-flex border bg-light m-1" 243 | ), 244 | ] 245 | ) 246 | 247 | 248 | # -------------------------------------------------------------------- 249 | # Cheatsheet Card - Header name, item name and hover info 250 | # -------------------------------------------------------------------- 251 | 252 | utility_display = dbc.Card( 253 | [ 254 | dbc.CardHeader( 255 | [ 256 | html.H3("Utility: Display"), 257 | make_link("https://getbootstrap.com/docs/5.1/utilities/display/"), 258 | ], 259 | className="hstack gap-4", 260 | ), 261 | dbc.ListGroup( 262 | [ 263 | make_listgroup_item("d-*-none", "display none w breakpoints"), 264 | make_listgroup_item("d-*-inline", "display inline w breakpoints"), 265 | make_listgroup_item( 266 | "d-*-inline-block", "display inline-block w breakpoints" 267 | ), 268 | make_listgroup_item("d-*-block", "display block w breakpoints"), 269 | make_listgroup_item("d-*-grid", "display grid w breakpoints"), 270 | make_listgroup_item("d-*-flex", "display flex w breakpoints"), 271 | make_listgroup_item( 272 | "d-*-inline-flex", "display inline-flix w breakpoints" 273 | ), 274 | make_listgroup_item("d-print-{display}", "display in print"), 275 | ], 276 | flush=True, 277 | className="border-0", 278 | ), 279 | ], 280 | className="class-card", 281 | ) 282 | -------------------------------------------------------------------------------- /content/utility_flex.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Flex 5 | """ 6 | 7 | from dash import html, dcc 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item, dbc_url 10 | 11 | 12 | flex_row_code = """ 13 | 14 | Make responsive layouts with breakpoints at device or viewport sizes: 15 | flex-{sm|md|lg|xl|xxl}-row 16 | example: "flex-sm-row" 17 | ``` 18 | html.Div( 19 | [ 20 | html.Div("Flex item 1", className="p-2 bg-secondary"), 21 | html.Div("Flex item 2", className="p-2 bg-secondary"), 22 | html.Div("Flex item 3", className="p-2 bg-secondary"), 23 | 24 | ], 25 | className="d-flex flex-row border bg-light" 26 | ) 27 | ```""" 28 | 29 | flex_row_preview = html.Div( 30 | [ 31 | html.Div("Flex item 1", className="p-2 bg-secondary"), 32 | html.Div("Flex item 2", className="p-2 bg-secondary"), 33 | html.Div("Flex item 3", className="p-2 bg-secondary"), 34 | ], 35 | className="d-flex flex-row border bg-light", 36 | ) 37 | 38 | 39 | flex_row_reverse_code = """ 40 | 41 | Make responsive layouts with breakpoints at device or viewport sizes: 42 | flex-{sm|md|lg|xl|xxl}-row-reverse 43 | example: "flex-sm-row-reverse" 44 | ``` 45 | html.Div( 46 | [ 47 | html.Div("Flex item 1", className="p-2 bg-secondary"), 48 | html.Div("Flex item 2", className="p-2 bg-secondary"), 49 | html.Div("Flex item 3", className="p-2 bg-secondary"), 50 | 51 | ], 52 | className="d-flex flex-row-reverse border bg-light" 53 | ) 54 | ```""" 55 | 56 | flex_row_reverse_preview = html.Div( 57 | [ 58 | html.Div("Flex item 1", className="p-2 bg-secondary"), 59 | html.Div("Flex item 2", className="p-2 bg-secondary"), 60 | html.Div("Flex item 3", className="p-2 bg-secondary"), 61 | ], 62 | className="d-flex flex-row-reverse border bg-light", 63 | ) 64 | 65 | 66 | flex_column_code = """ 67 | 68 | Make responsive layouts with breakpoints at device or viewport sizes: 69 | flex-{sm|md|lg|xl|xxl}-column 70 | example: "flex-sm-column" 71 | ``` 72 | html.Div( 73 | [ 74 | html.Div("Flex item 1", className="p-2 bg-secondary"), 75 | html.Div("Flex item 2", className="p-2 bg-secondary"), 76 | html.Div("Flex item 3", className="p-2 bg-secondary"), 77 | 78 | ], 79 | className="d-flex flex-column border bg-light" 80 | ) 81 | ```""" 82 | 83 | flex_column_preview = html.Div( 84 | [ 85 | html.Div("Flex item 1", className="p-2 bg-secondary"), 86 | html.Div("Flex item 2", className="p-2 bg-secondary"), 87 | html.Div("Flex item 3", className="p-2 bg-secondary"), 88 | ], 89 | className="d-flex flex-column border bg-light", 90 | ) 91 | 92 | flex_column_reverse_code = """ 93 | 94 | Make responsive layouts with breakpoints at device or viewport sizes: 95 | flex-{sm|md|lg|xl|xxl}-column-reverse 96 | example: "flex-sm-column-reverse" 97 | ``` 98 | html.Div( 99 | [ 100 | html.Div("Flex item 1", className="p-2 bg-secondary"), 101 | html.Div("Flex item 2", className="p-2 bg-secondary"), 102 | html.Div("Flex item 3", className="p-2 bg-secondary"), 103 | 104 | ], 105 | className="d-flex flex-column-reverse border bg-light" 106 | ) 107 | ```""" 108 | 109 | flex_column_reverse_preview = html.Div( 110 | [ 111 | html.Div("Flex item 1", className="p-2 bg-secondary"), 112 | html.Div("Flex item 2", className="p-2 bg-secondary"), 113 | html.Div("Flex item 3", className="p-2 bg-secondary"), 114 | ], 115 | className="d-flex flex-column-reverse border bg-light", 116 | ) 117 | 118 | 119 | justify_content_code = """ 120 | 121 | Make responsive layouts with breakpoints at device or viewport sizes: 122 | justify-content-{sm|md|lg|xl|xxl}-{start|end|center|between|around|evenly} 123 | example: "justify-content-sm-start" 124 | ``` 125 | flex_items = [ 126 | html.Div("Flex item 1", className="p-2 bg-secondary"), 127 | html.Div("Flex item 2", className="p-2 bg-secondary"), 128 | html.Div("Flex item 3", className="p-2 bg-secondary") 129 | ] 130 | 131 | justify_content_preview = html.Div( 132 | [ 133 | html.Div(flex_items, className="d-flex justify-content-start bg-light border mb-2"), 134 | html.Div(flex_items, className="d-flex justify-content-end bg-light border mb-2"), 135 | html.Div(flex_items, className="d-flex justify-content-center bg-light border mb-2"), 136 | html.Div(flex_items, className="d-flex justify-content-between bg-light border mb-2"), 137 | html.Div(flex_items, className="d-flex justify-content-around bg-light border mb-2"), 138 | html.Div(flex_items, className="d-flex justify-content-evenly bg-light border mb-2"), 139 | ] 140 | ) 141 | ```""" 142 | 143 | flex_items = [ 144 | html.Div("Flex item 1", className="p-2 bg-secondary"), 145 | html.Div("Flex item 2", className="p-2 bg-secondary"), 146 | html.Div("Flex item 3", className="p-2 bg-secondary"), 147 | ] 148 | 149 | justify_content_preview = html.Div( 150 | [ 151 | html.Div( 152 | flex_items, className="d-flex justify-content-start bg-light border mb-2" 153 | ), 154 | html.Div( 155 | flex_items, className="d-flex justify-content-end bg-light border mb-2" 156 | ), 157 | html.Div( 158 | flex_items, className="d-flex justify-content-center bg-light border mb-2" 159 | ), 160 | html.Div( 161 | flex_items, className="d-flex justify-content-between bg-light border mb-2" 162 | ), 163 | html.Div( 164 | flex_items, className="d-flex justify-content-around bg-light border mb-2" 165 | ), 166 | html.Div( 167 | flex_items, className="d-flex justify-content-evenly bg-light border mb-2" 168 | ), 169 | ] 170 | ) 171 | 172 | 173 | align_items_code = """ 174 | 175 | Make responsive layouts with breakpoints at device or viewport sizes: 176 | align-items-{sm|md|lg|xl|xxl}-{start|end|center|baseline|stretch} 177 | example: "align-items-sm-start" 178 | ``` 179 | flex_items = [ 180 | html.Div("Flex item 1", className="p-2 bg-secondary"), 181 | html.Div("Flex item 2", className="p-2 bg-secondary"), 182 | html.Div("Flex item 3", className="p-2 bg-secondary"), 183 | ] 184 | 185 | align_items_preview = html.Div( 186 | [ 187 | html.Div(flex_items, className="d-flex align-items-start bg-light border mb-2", style={"height": 100}), 188 | html.Div(flex_items, className="d-flex align-items-end bg-light border mb-2", style={"height": 100}), 189 | html.Div(flex_items, className="d-flex align-items-center bg-light border mb-2", style={"height": 100}), 190 | html.Div(flex_items, className="d-flex align-items-baseline bg-light border mb-2", style={"height": 100}), 191 | html.Div(flex_items, className="d-flex align-items-stretch bg-light border mb-2", style={"height": 100}), 192 | ] 193 | ) 194 | 195 | ```""" 196 | 197 | align_items_preview = html.Div( 198 | [ 199 | html.Div( 200 | flex_items, 201 | className="d-flex align-items-start bg-light border mb-2", 202 | style={"height": 100}, 203 | ), 204 | html.Div( 205 | flex_items, 206 | className="d-flex align-items-end bg-light border mb-2", 207 | style={"height": 100}, 208 | ), 209 | html.Div( 210 | flex_items, 211 | className="d-flex align-items-center bg-light border mb-2", 212 | style={"height": 100}, 213 | ), 214 | html.Div( 215 | flex_items, 216 | className="d-flex align-items-baseline bg-light border mb-2", 217 | style={"height": 100}, 218 | ), 219 | html.Div( 220 | flex_items, 221 | className="d-flex align-items-stretch bg-light border mb-2", 222 | style={"height": 100}, 223 | ), 224 | ] 225 | ) 226 | 227 | align_self_code = """ 228 | 229 | Make responsive layouts with breakpoints at device or viewport sizes: 230 | align-self-{sm|md|lg|xl|xxl}-{start|end|center|baseline|stretch} 231 | ``` 232 | def make_flex_align_items(example_class_name): 233 | return html.Div( 234 | [ 235 | html.Div("Flex item", className="p-2 bg-secondary"), 236 | html.Div("Aligned Flex item", className=example_class_name + " p2 bg-secondary"), 237 | html.Div("Flex item", className="p-2 bg-secondary"), 238 | ], 239 | className="d-flex bg-light border mb-2", 240 | style={"height":100} 241 | ) 242 | 243 | 244 | align_self_preview = html.Div( 245 | [ 246 | make_flex_align_items("align-self-start"), 247 | make_flex_align_items("align-self-end"), 248 | make_flex_align_items("align-self-center"), 249 | make_flex_align_items("align-self-baseline"), 250 | make_flex_align_items("align-self-stretch"), 251 | ] 252 | ) 253 | 254 | ```""" 255 | 256 | 257 | def make_flex_align_items(example_class_name): 258 | return html.Div( 259 | [ 260 | html.Div("Flex item", className="p-2 bg-secondary border"), 261 | html.Div( 262 | "Aligned Flex item", 263 | className=example_class_name + " p2 bg-secondary border", 264 | ), 265 | html.Div("Flex item", className="p-2 bg-secondary border"), 266 | ], 267 | className="d-flex bg-light border mb-2", 268 | style={"height": 100}, 269 | ) 270 | 271 | 272 | align_self_preview = html.Div( 273 | [ 274 | make_flex_align_items("align-self-start"), 275 | make_flex_align_items("align-self-end"), 276 | make_flex_align_items("align-self-center"), 277 | make_flex_align_items("align-self-baseline"), 278 | make_flex_align_items("align-self-stretch"), 279 | ] 280 | ) 281 | 282 | flex_fill_code = """ 283 | 284 | Make responsive layouts with breakpoints at device or viewport sizes: 285 | flex-{sm|md|lg|xl|xxl}-fill 286 | ``` 287 | flex_fill_preview = html.Div( 288 | [ 289 | html.Div("Flex item with a lot of content", className="flex-fill p-2 bg-secondary"), 290 | html.Div("Flex item", className="flex-fill p-2 bg-secondary"), 291 | html.Div("Flex item", className="flex-fill p-2 bg-secondary"), 292 | ], 293 | className="d-flex bg-light border", 294 | ) 295 | 296 | 297 | ```""" 298 | 299 | flex_fill_preview = html.Div( 300 | [ 301 | html.Div( 302 | "Flex item with a lot of content", className="flex-fill p-2 bg-secondary" 303 | ), 304 | html.Div("Flex item", className="flex-fill p-2 bg-secondary"), 305 | html.Div("Flex item", className="flex-fill p-2 bg-secondary"), 306 | ], 307 | className="d-flex bg-light border", 308 | ) 309 | flex_grow_code = """ 310 | 311 | Make responsive layouts with breakpoints at device or viewport sizes: 312 | flex-{sm|md|lg|xl|xxl}-grow-{0|1} 313 | ``` 314 | flex_grow_preview = html.Div( 315 | [ 316 | html.Div("Flex item 1", className="flex-grow-1 p-2 bg-secondary"), 317 | html.Div("Flex item 2", className="p-2 bg-secondary"), 318 | html.Div("Flex item 3", className="p-2 bg-secondary"), 319 | ], 320 | className="d-flex bg-light border", 321 | ) 322 | ```""" 323 | 324 | flex_grow_preview = html.Div( 325 | [ 326 | html.Div("Flex item 1", className="flex-grow-1 p-2 bg-secondary"), 327 | html.Div("Flex item 2", className="p-2 bg-secondary"), 328 | html.Div("Flex item 3", className="p-2 bg-secondary"), 329 | ], 330 | className="d-flex bg-light border", 331 | ) 332 | 333 | flex_shrink_code = """ 334 | 335 | Make responsive layouts with breakpoints at device or viewport sizes: 336 | flex-{sm|md|lg|xl|xxl}-shrink-{0|1} 337 | ``` 338 | flex_shrink_preview = html.Div( 339 | [ 340 | html.Div("Flex item 1", className="w-100 p-2 bg-secondary"), 341 | html.Div("Flex item 2", className="flex-shrink-1 p-2 bg-secondary"), 342 | ], 343 | className="d-flex bg-light border", 344 | ) 345 | ```""" 346 | 347 | flex_shrink_preview = html.Div( 348 | [ 349 | html.Div("Flex item 1", className="w-100 p-2 bg-secondary"), 350 | html.Div("Flex item 2", className="flex-shrink-1 p-2 bg-secondary"), 351 | ], 352 | className="d-flex bg-light border", 353 | ) 354 | 355 | flex_nowrap_code = """ 356 | 357 | Make responsive layouts with breakpoints at device or viewport sizes: 358 | flex-{sm|md|lg|xl|xxl}-nowrap 359 | ``` 360 | html.Div( 361 | [ 362 | html.Div("Flex item 1", className="p-2 bg-secondary"), 363 | html.Div("Flex item 2", className="p-2 bg-secondary"), 364 | html.Div("Flex item 3", className="p-2 bg-secondary"), 365 | html.Div("Flex item 5", className="p-2 bg-secondary"), 366 | html.Div("Flex item 5", className="p-2 bg-secondary"), 367 | ], 368 | className="d-flex flex-nowrap bg-light border", style={"width": "8rem"} 369 | ) 370 | 371 | ```""" 372 | flex_nowrap_preview = html.Div( 373 | [ 374 | html.Div("Flex item 1", className="p-2 bg-secondary"), 375 | html.Div("Flex item 2", className="p-2 bg-secondary"), 376 | html.Div("Flex item 3", className="p-2 bg-secondary"), 377 | html.Div("Flex item 5", className="p-2 bg-secondary"), 378 | html.Div("Flex item 5", className="p-2 bg-secondary"), 379 | ], 380 | className="d-flex flex-nowrap bg-light border", 381 | style={"width": "8rem"}, 382 | ) 383 | 384 | flex_wrap_code = """ 385 | 386 | Make responsive layouts with breakpoints at device or viewport sizes: 387 | flex-{sm|md|lg|xl|xxl}-wrap 388 | 389 | ``` 390 | html.Div( 391 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 392 | className="d-flex flex-wrap border bg-light", 393 | ) 394 | ```""" 395 | 396 | flex_wrap_preview = html.Div( 397 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 398 | className="d-flex flex-wrap border bg-light", 399 | ) 400 | 401 | 402 | flex_wrap_reverse_code = """ 403 | 404 | Make responsive layouts with breakpoints at device or viewport sizes: 405 | flex-reverse-{sm|md|lg|xl|xxl}-wrap 406 | ``` 407 | html.Div( 408 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 409 | className="d-flex flex-wrap-reverse border bg-light", 410 | ) 411 | ```""" 412 | 413 | flex_wrap_reverse_preview = html.Div( 414 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 415 | className="d-flex flex-wrap-reverse border bg-light", 416 | ) 417 | 418 | order_number_code = """ 419 | 420 | Make responsive layouts with breakpoints at device or viewport sizes: 421 | order-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} 422 | ``` 423 | order_number_preview = html.Div( 424 | [ 425 | html.Div("flex item 1", className="order-3 p-2 bg-secondary" ), 426 | html.Div("flex item 2", className="order-2 p-2 bg-secondary" ), 427 | html.Div("flex item 3", className="order-5 p-2 bg-secondary" ) 428 | ], 429 | className="d-flex flex-nowrap border bg-light" 430 | ) 431 | ```""" 432 | order_number_preview = html.Div( 433 | [ 434 | html.Div("flex item 1", className="order-3 p-2 bg-secondary"), 435 | html.Div("flex item 2", className="order-2 p-2 bg-secondary"), 436 | html.Div("flex item 3", className="order-5 p-2 bg-secondary"), 437 | ], 438 | className="d-flex flex-nowrap border bg-light", 439 | ) 440 | 441 | order_name_code = """ 442 | 443 | Make responsive layouts with breakpoints at device or viewport sizes: 444 | order-{sm|md|lg|xl|xxl}-{first|last} 445 | ``` 446 | html.Div( 447 | [ 448 | html.Div("flex item 1", className="order-3 p-2 bg-secondary"), 449 | html.Div("flex item 2", className="order-last p-2 bg-secondary"), 450 | html.Div("flex item 3", className="order-first p-2 bg-secondary"), 451 | html.Div("flex item 4", className="order-1 p-2 bg-secondary") 452 | ], 453 | className="d-flex flex-nowrap border bg-light" 454 | ) 455 | ```""" 456 | order_name_preview = html.Div( 457 | [ 458 | html.Div("flex item 1", className="order-3 p-2 bg-secondary"), 459 | html.Div("flex item 2", className="order-last p-2 bg-secondary"), 460 | html.Div("flex item 3", className="order-first p-2 bg-secondary"), 461 | html.Div("flex item 4", className="order-1 p-2 bg-secondary"), 462 | ], 463 | className="d-flex flex-nowrap border bg-light", 464 | ) 465 | 466 | 467 | align_content_code = """ 468 | 469 | Make responsive layouts with breakpoints at device or viewport sizes: 470 | align-content-{sm|md|lg|xl|xxl}-{start|end|center|around|stretch} 471 | ``` 472 | html.Div( 473 | [ 474 | html.Div( 475 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 476 | className="d-flex align-content-start flex-wrap border bg-light mb-2", 477 | style={"height": 200}, 478 | ), 479 | html.Div( 480 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 481 | className="d-flex align-content-end flex-wrap border bg-light mb-2", 482 | style={"height": 200}, 483 | ), 484 | html.Div( 485 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 486 | className="d-flex align-content-center flex-wrap border bg-light mb-2", 487 | style={"height": 200}, 488 | ), 489 | html.Div( 490 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 491 | className="d-flex align-content-around flex-wrap border bg-light mb-2", 492 | style={"height": 200}, 493 | ), 494 | html.Div( 495 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 496 | className="d-flex align-content-stretch flex-wrap border bg-light mb-2", 497 | style={"height": 200}, 498 | ), 499 | ] 500 | ) 501 | ```""" 502 | align_content_preview = html.Div( 503 | [ 504 | html.Div( 505 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 506 | className="d-flex align-content-start flex-wrap border bg-light mb-2", 507 | style={"height": 200}, 508 | ), 509 | html.Div( 510 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 511 | className="d-flex align-content-end flex-wrap border bg-light mb-2", 512 | style={"height": 200}, 513 | ), 514 | html.Div( 515 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 516 | className="d-flex align-content-center flex-wrap border bg-light mb-2", 517 | style={"height": 200}, 518 | ), 519 | html.Div( 520 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 521 | className="d-flex align-content-around flex-wrap border bg-light mb-2", 522 | style={"height": 200}, 523 | ), 524 | html.Div( 525 | [html.Div("Flex item", className="p-2 bg-secondary")] * 15, 526 | className="d-flex align-content-stretch flex-wrap border bg-light mb-2", 527 | style={"height": 200}, 528 | ), 529 | ] 530 | ) 531 | 532 | 533 | # -------------------------------------------------------------------- 534 | # Cheatsheet Card - Header name, item name and hover info 535 | # -------------------------------------------------------------------- 536 | utility_flex = dbc.Card( 537 | [ 538 | dbc.CardHeader( 539 | [ 540 | html.H3("Utility: Flex"), 541 | make_link("https://getbootstrap.com/docs/5.1/utilities/flex/"), 542 | ], 543 | className="hstack gap-4", 544 | ), 545 | dbc.ListGroup( 546 | [ 547 | dcc.Markdown( 548 | f"See also the *dash-bootstrap-components* [Layout section]({dbc_url}/layout/)", 549 | className="p-2", 550 | ), 551 | # make_listgroup_item("flex-*-row"), 552 | # make_listgroup_item("flex-*-row-reverse"), 553 | # make_listgroup_item("flex-*-column"), 554 | # make_listgroup_item("flex-*-column-reverse"), 555 | make_listgroup_item("justify-content-*-{option}"), 556 | make_listgroup_item("align-items-*-{option}"), 557 | make_listgroup_item("align-self-*-{option}"), 558 | make_listgroup_item("flex-*-fill"), 559 | make_listgroup_item("flex-grow-{option}"), 560 | make_listgroup_item("flex-shrink-{option}"), 561 | make_listgroup_item("flex-*-nowrap"), 562 | make_listgroup_item("flex-*-wrap"), 563 | make_listgroup_item("flex-*-wrap-reverse"), 564 | make_listgroup_item("order-*-{number}"), 565 | make_listgroup_item("order-*-{name}"), 566 | make_listgroup_item("align-content-*-{option}"), 567 | ], 568 | flush=True, 569 | className="border-0", 570 | ), 571 | ], 572 | className="class-card-tall", 573 | ) 574 | -------------------------------------------------------------------------------- /content/utility_gutter.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Grid 5 | """ 6 | 7 | from dash import html, dcc 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | def make_row(example_class_name): 13 | return dbc.Row( 14 | [ 15 | dbc.Col(html.Div(example_class_name, className="bg-light")), 16 | dbc.Col(html.Div(example_class_name, className="bg-light")), 17 | dbc.Col(html.Div(example_class_name, className="bg-light")), 18 | ], 19 | className=example_class_name + " my-2 border border-danger", 20 | ) 21 | 22 | 23 | gx_size_code = """ 24 | 25 | Gutters are the padding between columns. 26 | 27 | Note: To help show the spacing: 28 | - The `Container` has `className="bg-secondary"` 29 | - Each `Row` also has `className=" my-2 border border-danger"` 30 | - The `Col` content has `className="bg-light"` 31 | 32 | ``` 33 | def make_row(example_class_name): 34 | return dbc.Row( 35 | [ 36 | dbc.Col(html.Div(example_class_name, className="bg-light")), 37 | dbc.Col(html.Div(example_class_name, className="bg-light")), 38 | dbc.Col(html.Div(example_class_name, className="bg-light")), 39 | ], 40 | className=example_class_name + " my-2 border border-danger", 41 | ) 42 | 43 | gx_size_preview = dbc.Container( 44 | [ 45 | make_row("default"), 46 | make_row("gx-0"), 47 | make_row("gx-1"), 48 | make_row("gx-2"), 49 | make_row("gx-3"), 50 | make_row("gx-4"), 51 | make_row("gx-5"), 52 | ], 53 | fluid=True, 54 | className="bg-secondary", 55 | ) 56 | ```""" 57 | 58 | gx_size_preview = dbc.Container( 59 | [ 60 | make_row("default"), 61 | make_row("gx-0"), 62 | make_row("gx-1"), 63 | make_row("gx-2"), 64 | make_row("gx-3"), 65 | make_row("gx-4"), 66 | make_row("gx-5"), 67 | ], 68 | fluid=True, 69 | className="bg-secondary", 70 | ) 71 | 72 | gy_size_code = """ 73 | 74 | Gutters are the padding between columns. 75 | Note: To help show the spacing: 76 | - The `Container` has `className="bg-secondary"` 77 | - Each `Row` also has `className=" my-2 border border-danger"` 78 | - The `Col` content has `className="bg-light"` 79 | 80 | ``` 81 | def make_row(example_class_name): 82 | return dbc.Row( 83 | [ 84 | dbc.Col(html.Div(example_class_name, className="bg-light")), 85 | dbc.Col(html.Div(example_class_name, className="bg-light")), 86 | dbc.Col(html.Div(example_class_name, className="bg-light")), 87 | ], 88 | className=example_class_name + " my-2 border border-danger", 89 | ) 90 | 91 | gy_size_preview = dbc.Container( 92 | [ 93 | make_row("default"), 94 | make_row("gy-0"), 95 | make_row("gy-1"), 96 | make_row("gy-2"), 97 | make_row("gy-3"), 98 | make_row("gy-4"), 99 | make_row("gy-5"), 100 | ], 101 | fluid=True, 102 | className="bg-secondary", 103 | ) 104 | ```""" 105 | 106 | gy_size_preview = dbc.Container( 107 | [ 108 | make_row("default"), 109 | make_row("gy-0"), 110 | make_row("gy-1"), 111 | make_row("gy-2"), 112 | make_row("gy-3"), 113 | make_row("gy-4"), 114 | make_row("gy-5"), 115 | ], 116 | fluid=True, 117 | className="bg-secondary", 118 | ) 119 | 120 | g_size_code = """ 121 | 122 | Gutters are the padding between columns. 123 | Note: To help show the spacing: 124 | - The `Container` has `className="bg-secondary"` 125 | - Each `Row` also has `className=" my-2 border border-danger"` 126 | - The `Col` content has `className="bg-light"` 127 | 128 | ``` 129 | 130 | def make_row(example_class_name): 131 | return dbc.Row( 132 | [ 133 | dbc.Col(html.Div(example_class_name, className="bg-light")), 134 | dbc.Col(html.Div(example_class_name, className="bg-light")), 135 | dbc.Col(html.Div(example_class_name, className="bg-light")), 136 | ], 137 | className=example_class_name + " my-2 border border-danger", 138 | ) 139 | 140 | g_size_preview = dbc.Container( 141 | [ 142 | make_row("default"), 143 | make_row("g-0"), 144 | make_row("g-1"), 145 | make_row("g-2"), 146 | make_row("g-3"), 147 | make_row("g-4"), 148 | make_row("g-5"), 149 | ], 150 | fluid=True, 151 | className="bg-secondary", 152 | ) 153 | ```""" 154 | 155 | g_size_preview = dbc.Container( 156 | [ 157 | make_row("default"), 158 | make_row("g-0"), 159 | make_row("g-1"), 160 | make_row("g-2"), 161 | make_row("g-3"), 162 | make_row("g-4"), 163 | make_row("g-5"), 164 | ], 165 | fluid=True, 166 | className="bg-secondary", 167 | ) 168 | 169 | gx_dev_size_code = """ 170 | 171 | Gutters are the padding between columns. 172 | Make responsive layouts by setting different gutters at breakpoints for device or viewport sizes: 173 | gx-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} 174 | ``` 175 | gx_dev_size_preview = dbc.Container( 176 | [ 177 | html.H5("Change the screen size to see how the gutters change"), 178 | dbc.Row( 179 | [ 180 | dbc.Col(html.Div("col1", className="border bg-light")), 181 | dbc.Col(html.Div("col2", className=" border bg-light")), 182 | ], 183 | className="gx-2 gx-xl-5 m-2 border border-danger" 184 | ), 185 | ], 186 | fluid=True 187 | ) 188 | ```""" 189 | 190 | gx_dev_size_preview = dbc.Container( 191 | [ 192 | html.H5("Change the screen size to see how the gutters change"), 193 | dbc.Row( 194 | [ 195 | dbc.Col(html.Div("col1", className="border bg-light")), 196 | dbc.Col(html.Div("col2", className=" border bg-light")), 197 | ], 198 | className="gx-2 gx-xl-5 m-2 border border-danger", 199 | ), 200 | ], 201 | fluid=True, 202 | ) 203 | 204 | 205 | gy_dev_size_code = """ 206 | 207 | Gutters are the padding between columns. 208 | Make responsive layouts by setting different gutters at breakpoints for device or viewport sizes: 209 | gy-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} 210 | ``` 211 | gy_dev_size_preview = dbc.Container( 212 | [ 213 | html.H5("Change the screen size to see how the gutters change"), 214 | dbc.Row( 215 | [ 216 | dbc.Col(html.Div("col1", className="border bg-light")), 217 | dbc.Col(html.Div("col2", className=" border bg-light")), 218 | ], 219 | className="gy-2 gy-xl-5 m-2 border border-danger" 220 | ), 221 | ], 222 | fluid=True 223 | ) 224 | ```""" 225 | 226 | gy_dev_size_preview = dbc.Container( 227 | [ 228 | html.H5("Change the screen size to see how the gutters change"), 229 | dbc.Row( 230 | [ 231 | dbc.Col(html.Div("col1", className="border bg-light")), 232 | dbc.Col(html.Div("col2", className=" border bg-light")), 233 | ], 234 | className="gy-2 gy-xl-5 m-2 border border-danger", 235 | ), 236 | ], 237 | fluid=True, 238 | ) 239 | 240 | 241 | g_dev_size_code = """ 242 | 243 | Gutters are the padding between columns. 244 | Make responsive layouts by setting different gutters at breakpoints for device or viewport sizes: 245 | g-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} 246 | ``` 247 | g_dev_size_preview = dbc.Container( 248 | [ 249 | html.H5("Change the screen size to see how the gutters change"), 250 | dbc.Row( 251 | [ 252 | dbc.Col(html.Div("col1", className="border bg-light")), 253 | dbc.Col(html.Div("col2", className=" border bg-light")), 254 | ], 255 | className="g-2 g-xl-5 m-2 border border-danger" 256 | ), 257 | ], 258 | fluid=True 259 | ) 260 | ```""" 261 | 262 | g_dev_size_preview = dbc.Container( 263 | [ 264 | html.H5("Change the screen size to see how the gutters change"), 265 | dbc.Row( 266 | [ 267 | dbc.Col(html.Div("col1", className="border bg-light")), 268 | dbc.Col(html.Div("col2", className=" border bg-light")), 269 | ], 270 | className="g-2 g-xl-5 m-2 border border-danger", 271 | ), 272 | ], 273 | fluid=True, 274 | ) 275 | 276 | 277 | # -------------------------------------------------------------------- 278 | # Cheatsheet Card - Header name, item name and hover info 279 | # -------------------------------------------------------------------- 280 | utility_gutter = dbc.Card( 281 | [ 282 | dbc.CardHeader( 283 | [ 284 | html.H3("Utility: Gutter"), 285 | make_link("https://getbootstrap.com/docs/5.1/layout/gutters/"), 286 | ], 287 | className="hstack gap-4", 288 | ), 289 | dbc.ListGroup( 290 | [ 291 | make_listgroup_item("gx-{size}", "Gutter horizontal"), 292 | make_listgroup_item("gx-*-{size}", "Gutter horizontal w breakpoints"), 293 | make_listgroup_item("gy-{size}", "Gutter vertical"), 294 | make_listgroup_item("gy-*-{size}", "Gutter vertical w breakpoints"), 295 | make_listgroup_item("g-{size}", "Gutter horizontal & vertical"), 296 | make_listgroup_item( 297 | "g-*-{size}", "Gutter horizontal & vertical w breakpoints" 298 | ), 299 | ], 300 | flush=True, 301 | className="border-0", 302 | ), 303 | ], 304 | className="class-card", 305 | ) 306 | -------------------------------------------------------------------------------- /content/utility_opacity.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Opacity 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | opacity_code = """ 13 | ``` 14 | html.Div("100%", className="opacity-100 p-2 m-1 bg-primary text-light fw-bold rounded") 15 | html.Div("75%", className="opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded") 16 | html.Div("50%", className="opacity-50 p-2 m-1 bg-primary text-light fw-bold rounded") 17 | html.Div("25%", className="opacity-25 p-2 m-1 bg-primary text-light fw-bold rounded") 18 | 19 | ```""" 20 | 21 | opacity_preview = html.Div( 22 | [ 23 | html.Div( 24 | "100%", 25 | className="opacity-100 p-2 m-1 bg-primary text-light fw-bold rounded", 26 | ), 27 | html.Div( 28 | "75%", className="opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded" 29 | ), 30 | html.Div( 31 | "50%", className="opacity-50 p-2 m-1 bg-primary text-light fw-bold rounded" 32 | ), 33 | html.Div( 34 | "25%", className="opacity-25 p-2 m-1 bg-primary text-light fw-bold rounded" 35 | ), 36 | ] 37 | ) 38 | 39 | 40 | bg_opacity_code = """ 41 | ``` 42 | html.Div("default", className="p-2 m-1 bg-primary text-light fw-bold rounded") 43 | html.Div("75%", className="bg-opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded") 44 | html.Div("50%", className="bg-opacity-50 p-2 m-1 bg-primary text-dark fw-bold rounded") 45 | html.Div("25%", className="bg-opacity-25 p-2 m-1 bg-primary text-dark fw-bold rounded") 46 | html.Div("10%", className="bg-opacity-10 p-2 m-1 bg-primary text-dark fw-bold rounded") 47 | 48 | ```""" 49 | 50 | bg_opacity_preview = html.Div( 51 | [ 52 | html.Div("default", className="p-2 m-1 bg-primary text-light fw-bold rounded"), 53 | html.Div( 54 | "75%", 55 | className="bg-opacity-75 p-2 m-1 bg-primary text-light fw-bold rounded", 56 | ), 57 | html.Div( 58 | "50%", 59 | className="bg-opacity-50 p-2 m-1 bg-primary text-dark fw-bold rounded", 60 | ), 61 | html.Div( 62 | "25%", 63 | className="bg-opacity-25 p-2 m-1 bg-primary text-dark fw-bold rounded", 64 | ), 65 | html.Div( 66 | "10%", 67 | className="bg-opacity-10 p-2 m-1 bg-primary text-dark fw-bold rounded", 68 | ), 69 | ] 70 | ) 71 | 72 | 73 | text_opacity_code = """ 74 | ``` 75 | html.Div("default", className="text-primary p-2") 76 | html.Div("75% opacity", className="opacity-75 text-primary p-2") 77 | html.Div("50% opacity", className="opacity-50 text-primary p-2") 78 | html.Div("25% opacity", className="opacity-25 text-primary p-2") 79 | 80 | ```""" 81 | 82 | text_opacity_preview = html.Div( 83 | [ 84 | html.Div("default", className="text-primary p-2"), 85 | html.Div("75% opacity", className="opacity-75 text-primary p-2"), 86 | html.Div("50% opacity", className="opacity-50 text-primary p-2"), 87 | html.Div("25% opacity", className="opacity-25 text-primary p-2"), 88 | ] 89 | ) 90 | 91 | 92 | # -------------------------------------------------------------------- 93 | # Cheatsheet Card - Header name, item name and hover info 94 | # -------------------------------------------------------------------- 95 | utility_opacity = dbc.Card( 96 | [ 97 | dbc.CardHeader( 98 | [ 99 | html.H3("Utility: Opacity"), 100 | make_link("https://getbootstrap.com/docs/5.1/utilities/opacity/"), 101 | ], 102 | className="hstack gap-4", 103 | ), 104 | dbc.ListGroup( 105 | [ 106 | make_listgroup_item("opacity-{value}", "opacity of elements"), 107 | make_listgroup_item( 108 | "bg-opacity-{value}", "background opacity {100|75|50|25|0}" 109 | ), 110 | make_listgroup_item( 111 | "text-opacity-{value}", "text opacity {100|75|50|25|0}" 112 | ), 113 | ], 114 | flush=True, 115 | className="border-0", 116 | ), 117 | ], 118 | className="class-card", 119 | ) 120 | -------------------------------------------------------------------------------- /content/utility_position.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Position 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | float_code = """ 13 | 14 | Make responsive layouts with breakpoints at device or viewport sizes: 15 | float-{sm|md|lg|xl|xxl}-{start|end|none} 16 | For example float-sm-start 17 | ``` 18 | html.Div("Float start on all viewport sizes", className="float-start") 19 | html.Br() 20 | html.Div("Float end on all viewport sizes", className="float-end") 21 | html.Br() 22 | html.Div("Don't float on all viewport sizes", className="float-none") 23 | 24 | ```""" 25 | 26 | float_preview = html.Div( 27 | [ 28 | html.Div("Float start on all viewport sizes", className="float-start"), 29 | html.Br(), 30 | html.Div("Float end on all viewport sizes", className="float-end"), 31 | html.Br(), 32 | html.Div("Don't float on all viewport sizes", className="float-none"), 33 | ] 34 | ) 35 | 36 | 37 | position_code = """ 38 | 39 | These positioning classes are not responsive. 40 | ``` 41 | html.Div("position-static", className="position-static") 42 | html.Div("position-relative", className="position-relative") 43 | html.Div("position-absolute", className="position-absolute") 44 | html.Div("position-fixed", className="position-fixed") 45 | html.Div("position-sticky", className="position-sticky") 46 | ```""" 47 | 48 | position_preview = html.Div( 49 | [ 50 | html.Div("position-static", className="position-static"), 51 | html.Div("position-relative", className="position-relative"), 52 | html.Div("position-absolute", className="position-absolute"), 53 | html.Div("position-fixed", className="position-fixed"), 54 | html.Div("position-sticky", className="position-sticky"), 55 | ] 56 | ) 57 | 58 | 59 | direction_position_code = """ 60 | ``` 61 | html.Div( 62 | [ 63 | html.Div(className="position-absolute top-0 start-0"), 64 | html.Div(className="position-absolute top-0 end-0"), 65 | html.Div(className="position-absolute top-50 start-50"), 66 | html.Div(className="position-absolute bottom-50 end-50"), 67 | html.Div(className="position-absolute bottom-0 start-0"), 68 | html.Div(className="position-absolute bottom-0 end-0"), 69 | ], 70 | className="position-relative" 71 | ) 72 | ```""" 73 | 74 | direction_position_preview = html.Div( 75 | [ 76 | html.Div(className="position-absolute top-0 start-0 sm-square"), 77 | html.Div(className="position-absolute top-0 end-0 sm-square"), 78 | html.Div(className="position-absolute top-50 start-50 sm-square"), 79 | html.Div(className="position-absolute bottom-50 end-50 sm-square"), 80 | html.Div(className="position-absolute bottom-0 start-0 sm-square"), 81 | html.Div(className="position-absolute bottom-0 end-0 sm-square"), 82 | ], 83 | className="position-relative border", 84 | style={"height": 175}, 85 | ) 86 | 87 | 88 | translate_middle_code = """ 89 | ``` 90 | demo = html.Div( 91 | [ 92 | html.Div(className="position-absolute top-0 start-0 translate-middle"), 93 | html.Div(className="position-absolute top-0 start-50 translate-middle"), 94 | html.Div(className="position-absolute top-0 start-100 translate-middle"), 95 | html.Div(className="position-absolute top-50 start-0 translate-middle"), 96 | html.Div(className="position-absolute top-50 start-50 translate-middle"), 97 | html.Div(className="position-absolute top-50 start-100 translate-middle"), 98 | html.Div(className="position-absolute top-100 start-0 translate-middle"), 99 | html.Div(className="position-absolute top-100 start-50 translate-middle"), 100 | html.Div(className="position-absolute top-100 start-100 translate-middle"), 101 | ], 102 | className="position-relative" 103 | ) 104 | 105 | badge = dbc.Button( 106 | [ 107 | "Notifications", 108 | dbc.Badge( 109 | "99+", 110 | color="danger", 111 | pill=True, 112 | text_color="white", 113 | className="position-absolute top-0 start-100 translate-middle", 114 | ), 115 | ], 116 | color="primary", 117 | className="position-relative", 118 | ) 119 | ```""" 120 | 121 | demo = html.Div( 122 | [ 123 | html.Div( 124 | className="position-absolute top-0 start-0 translate-middle sm-square" 125 | ), 126 | html.Div( 127 | className="position-absolute top-0 start-50 translate-middle sm-square" 128 | ), 129 | html.Div( 130 | className="position-absolute top-0 start-100 translate-middle sm-square" 131 | ), 132 | html.Div( 133 | className="position-absolute top-50 start-0 translate-middle sm-square" 134 | ), 135 | html.Div( 136 | className="position-absolute top-50 start-50 translate-middle sm-square" 137 | ), 138 | html.Div( 139 | className="position-absolute top-50 start-100 translate-middle sm-square" 140 | ), 141 | html.Div( 142 | className="position-absolute top-100 start-0 translate-middle sm-square" 143 | ), 144 | html.Div( 145 | className="position-absolute top-100 start-50 translate-middle sm-square" 146 | ), 147 | html.Div( 148 | className="position-absolute top-100 start-100 translate-middle sm-square" 149 | ), 150 | ], 151 | className="position-relative border", 152 | style={"height": 175}, 153 | ) 154 | 155 | badge = html.Div( 156 | dbc.Button( 157 | [ 158 | "Notifications", 159 | dbc.Badge( 160 | "99+", 161 | color="danger", 162 | pill=True, 163 | text_color="white", 164 | className="position-absolute top-0 start-100 translate-middle", 165 | ), 166 | ], 167 | color="primary", 168 | className="position-relative mt-5", 169 | ) 170 | ) 171 | 172 | translate_middle_preview = html.Div([demo, badge]) 173 | 174 | translate_middle_direction_code = """ 175 | ``` 176 | html.Div( 177 | [ 178 | html.Div(className="position-absolute top-0 start-0"), 179 | html.Div(className="position-absolute top-0 start-50 translate-middle-x"), 180 | html.Div(className="position-absolute top-0 end-0"), 181 | html.Div(className="position-absolute top-50 start-0 translate-middle-y"), 182 | html.Div(className="position-absolute top-50 start-50 translate-middle"), 183 | html.Div(className="position-absolute top-50 end-0 translate-middle-y"), 184 | html.Div(className="position-absolute bottom-0 start-0"), 185 | html.Div(className="position-absolute bottom-0 start-50 translate-middle-x"), 186 | html.Div(className="position-absolute bottom-0 end-0"), 187 | ], 188 | className="position-relative" 189 | ) 190 | ```""" 191 | 192 | translate_middle_direction_preview = html.Div( 193 | [ 194 | html.Div(className="position-absolute top-0 start-0 sm-square"), 195 | html.Div( 196 | className="position-absolute top-0 start-50 translate-middle-x sm-square" 197 | ), 198 | html.Div(className="position-absolute top-0 end-0 sm-square"), 199 | html.Div( 200 | className="position-absolute top-50 start-0 translate-middle-y sm-square" 201 | ), 202 | html.Div( 203 | className="position-absolute top-50 start-50 translate-middle sm-square" 204 | ), 205 | html.Div( 206 | className="position-absolute top-50 end-0 translate-middle-y sm-square" 207 | ), 208 | html.Div(className="position-absolute bottom-0 start-0 sm-square"), 209 | html.Div( 210 | className="position-absolute bottom-0 start-50 translate-middle-x sm-square" 211 | ), 212 | html.Div(className="position-absolute bottom-0 end-0 sm-square"), 213 | ], 214 | className="position-relative border", 215 | style={"height": 175}, 216 | ) 217 | 218 | 219 | align_code = """ 220 | ``` 221 | html.Span("baseline", className="align-baseline") 222 | html.Span("top", className="align-top") 223 | html.Span("middle", className="align-middle") 224 | html.Span("bottom", className="align-bottom") 225 | html.Span("text-top", className="align-text-top") 226 | html.Span("text-bottom", className="align-text-bottom") 227 | 228 | ```""" 229 | 230 | align_preview = html.Div( 231 | [ 232 | html.Span("baseline", className="align-baseline"), 233 | html.Span("top", className="align-top"), 234 | html.Span("middle", className="align-middle"), 235 | html.Span("bottom", className="align-bottom"), 236 | html.Span("text-top", className="align-text-top"), 237 | html.Span("text-bottom", className="align-text-bottom"), 238 | ] 239 | ) 240 | 241 | vstack_code = """ 242 | 243 | See more on Stacks in the Bootstrap docs: 244 | https://getbootstrap.com/docs/5.1/helpers/stacks/ 245 | ``` 246 | vstack_preview = html.Div( 247 | [ 248 | html.Div("First Item", className="bg-light border"), 249 | html.Div("Second Item", className="bg-light border"), 250 | html.Div("Third Item", className="bg-light border"), 251 | ], 252 | className="vstack gap-3", 253 | ) 254 | 255 | ```""" 256 | 257 | vstack_preview = html.Div( 258 | [ 259 | html.Div("First Item", className="bg-light border"), 260 | html.Div("Second Item", className="bg-light border"), 261 | html.Div("Third Item", className="bg-light border"), 262 | ], 263 | className="vstack gap-3", 264 | ) 265 | 266 | 267 | hstack_code = """ 268 | 269 | See more on Stacks in the Bootstrap docs: 270 | https://getbootstrap.com/docs/5.1/helpers/stacks/ 271 | ``` 272 | hstack_preview = html.Div( 273 | [ 274 | html.Div("First Item", className="bg-light border"), 275 | html.Div("Second Item", className="bg-light border"), 276 | html.Div("Third Item", className="bg-light border"), 277 | ], 278 | className="hstack gap-3", 279 | ) 280 | 281 | ```""" 282 | 283 | hstack_preview = html.Div( 284 | [ 285 | html.Div("First Item", className="bg-light border"), 286 | html.Div("Second Item", className="bg-light border"), 287 | html.Div("Third Item", className="bg-light border"), 288 | ], 289 | className="hstack gap-3", 290 | ) 291 | 292 | 293 | vr_code = """ 294 | 295 | See more on Vertical Rule in Official Bootstrap docs: 296 | https://getbootstrap.com/docs/5.1/helpers/vertical-rule/ 297 | ``` 298 | vr_preview = html.Div( 299 | [ 300 | html.Span("Second Item", className="bg-light border"), 301 | html.Div(className="vr"), 302 | html.Span("Third Item", className="bg-light border"), 303 | ], 304 | className="hstack gap-3", 305 | ) 306 | 307 | ```""" 308 | 309 | vr_preview = html.Div( 310 | [ 311 | html.Span("Second Item", className="bg-light border"), 312 | html.Div(className="vr"), 313 | html.Span("Third Item", className="bg-light border"), 314 | ], 315 | className="hstack gap-3", 316 | ) 317 | 318 | 319 | # -------------------------------------------------------------------- 320 | # Cheatsheet Card - Header name, item name and hover info 321 | # -------------------------------------------------------------------- 322 | utility_position = dbc.Card( 323 | [ 324 | dbc.CardHeader( 325 | [ 326 | html.H3("Utility: Position"), 327 | make_link("https://getbootstrap.com/docs/5.1/utilities/position/"), 328 | ], 329 | className="hstack gap-4", 330 | ), 331 | dbc.ListGroup( 332 | [ 333 | make_listgroup_item( 334 | "float-*-{option}", 335 | "float with breakpoints {sm|md|lg|xl|xxl} to {start|end|none}", 336 | ), 337 | make_listgroup_item("position-{option}",), 338 | make_listgroup_item( 339 | "{direction}-{position}", 340 | "arrange elements {top|start|bottom|end} and edge position {0|50|100}", 341 | ), 342 | make_listgroup_item( 343 | "translate-middle", 344 | "centers elements - use with position and direction", 345 | ), 346 | make_listgroup_item( 347 | "translate-middle-{direction}", 348 | "centers element only in horizontal or vertical direction {x|y}", 349 | ), 350 | make_listgroup_item( 351 | "align-{option}", 352 | "align inline elements {baseline|top|middle|bottom|text-bottom|text-top}", 353 | ), 354 | make_listgroup_item("vstack", "stack items vertically"), 355 | make_listgroup_item("hstack", "stack items horizontally"), 356 | make_listgroup_item("vr (vertical rule)", "creates a vertical divider"), 357 | ], 358 | flush=True, 359 | className="border-0", 360 | ), 361 | ], 362 | className="class-card", 363 | ) 364 | -------------------------------------------------------------------------------- /content/utility_sizing.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility Sizing 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | 12 | 13 | w_option_code = """ 14 | ``` 15 | html.Div("Width 25%", className="w-25 p-3 bg-light border") 16 | html.Div("Width 50%", className="w-50 p-3 bg-light border") 17 | html.Div("Width 75%", className="w-75 p-3 bg-light border") 18 | html.Div("Width 100%", className="w-100 p-3 bg-light border") 19 | html.Div("Width auto", className="w-auto p-3 bg-light border") 20 | ```""" 21 | 22 | w_option_preview = html.Div( 23 | [ 24 | html.Div("Width 25%", className="w-25 p-3 bg-light border"), 25 | html.Div("Width 50%", className="w-50 p-3 bg-light border"), 26 | html.Div("Width 75%", className="w-75 p-3 bg-light border"), 27 | html.Div("Width 100%", className="w-100 p-3 bg-light border"), 28 | html.Div("Width auto", className="w-auto p-3 bg-light border"), 29 | ] 30 | ) 31 | 32 | 33 | h_option_code = """ 34 | ``` 35 | html.Div( 36 | [ 37 | html.Div("Height 25%", className="h-25 d-inline-block bg-light border", style={"width":120}), 38 | html.Div("Height 50%", className="h-50 d-inline-block bg-light border", style={"width":120}), 39 | html.Div("Height 75%", className="h-75 d-inline-block bg-light border", style={"width":120}), 40 | html.Div("Height 100%", className="h-100 d-inline-block bg-light border", style={"width":120}), 41 | html.Div("Height auto", className="h-auto d-inline-block bg-light border", style={"width":120}), 42 | ],className="border", style={"height":100} 43 | ) 44 | ```""" 45 | 46 | h_option_preview = html.Div( 47 | [ 48 | html.Div( 49 | "Height 25%", 50 | className="h-25 d-inline-block bg-light border", 51 | style={"width": 120}, 52 | ), 53 | html.Div( 54 | "Height 50%", 55 | className="h-50 d-inline-block bg-light border", 56 | style={"width": 120}, 57 | ), 58 | html.Div( 59 | "Height 75%", 60 | className="h-75 d-inline-block bg-light border", 61 | style={"width": 120}, 62 | ), 63 | html.Div( 64 | "Height 100%", 65 | className="h-100 d-inline-block bg-light border", 66 | style={"width": 120}, 67 | ), 68 | html.Div( 69 | "Height auto", 70 | className="h-auto d-inline-block bg-light border", 71 | style={"width": 120}, 72 | ), 73 | ], 74 | className="border", 75 | style={"height": 100}, 76 | ) 77 | 78 | 79 | mw_100_code = """ 80 | 81 | This is commonly used with images 82 | ``` 83 | html.Div( 84 | html.Div("max width 100%", className="mh-100 bg-info", style={"height": 100}), 85 | style={"height": 200}, 86 | className="bg-light border" 87 | ) 88 | 89 | ```""" 90 | 91 | mw_100_preview = html.Div( 92 | html.Div("max width 100%", className="mh-100 bg-info", style={"height": 100}), 93 | style={"height": 200}, 94 | className="bg-light border", 95 | ) 96 | 97 | 98 | mh_100_code = """ 99 | 100 | This is commonly used with images 101 | ``` 102 | html.Div( 103 | html.Div("max height 100%", className="mh-100 bg-info", style={"width": 100, "height": 200}), 104 | style={"height": 100}, 105 | className="bg-light border" 106 | ) 107 | 108 | ```""" 109 | 110 | mh_100_preview = html.Div( 111 | html.Div( 112 | "max height 100%", 113 | className="mh-100 bg-info", 114 | style={"width": 100, "height": 200}, 115 | ), 116 | style={"height": 100}, 117 | className="bg-light border", 118 | ) 119 | 120 | viewport_code = """ 121 | 122 | Click full screen button or scroll down to see preview 123 | ``` 124 | html.Div("Min-width 100vw", className="min-vw-100 bg-light mb-3 border") 125 | html.Div("Min-height 100vh", className="min-vh-100 bg-light mb-3 border") 126 | html.Div("Width 100vw", className="vw-100 bg-light mb-3 border") 127 | html.Div("Height 100vh", className="vh-100 bg-light border") 128 | ```""" 129 | 130 | viewport_preview = html.Div( 131 | [ 132 | html.Div("Min-width 100vw", className="min-vw-100 bg-light mb-3 border"), 133 | html.Div("Min-height 100vh", className="min-vh-100 bg-light mb-3 border"), 134 | html.Div("Width 100vw", className="vw-100 bg-light mb-3 border"), 135 | html.Div("Height 100vh", className="vh-100 bg-light border"), 136 | ] 137 | ) 138 | 139 | 140 | # ---------------------------------------------------------- 141 | 142 | utility_sizing = dbc.Card( 143 | [ 144 | dbc.CardHeader( 145 | [ 146 | html.H3("Utility Sizing"), 147 | make_link("https://getbootstrap.com/docs/5.1/utilities/sizing/"), 148 | ], 149 | className="hstack gap-4", 150 | ), 151 | dbc.ListGroup( 152 | [ 153 | make_listgroup_item( 154 | "w-{option}", "width relative to parent {25|50|75|100|auto}" 155 | ), 156 | make_listgroup_item( 157 | "h-{option}", "height relative to parent {25|50|75|100|auto}" 158 | ), 159 | make_listgroup_item( 160 | "mw-100", "max width relative to parent {25|50|75|100|auto}" 161 | ), 162 | make_listgroup_item( 163 | "mh-100", "max height relative to parent {25|50|75|100|auto}" 164 | ), 165 | make_listgroup_item( 166 | "viewport", 167 | "relative to the viewport {min-vw-100|min-vh-100|vw-100|vh-100}", 168 | ), 169 | ], 170 | flush=True, 171 | className="border-0", 172 | ), 173 | ], 174 | className="class-card", 175 | ) 176 | -------------------------------------------------------------------------------- /content/utility_spacing.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Display 5 | """ 6 | 7 | 8 | from dash import html 9 | import dash_bootstrap_components as dbc 10 | 11 | from utilities import make_link, make_listgroup_item 12 | 13 | 14 | m_code = """ 15 | 16 | Make responsive layouts with breakpoints at device or viewport sizes: 17 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 18 | for example: "m-sm-2" 19 | ``` 20 | html.Div( 21 | [ 22 | html.Div("m-0", className="m-0 bg-light border"), 23 | html.Div("m-1", className="m-1 bg-light border"), 24 | html.Div("m-2", className="m-2 bg-light border"), 25 | html.Div("m-3", className="m-3 bg-light border"), 26 | html.Div("m-4", className="m-4 bg-light border"), 27 | html.Div("m-5", className="m-5 bg-light border"), 28 | html.Div("m-auto", className="m-auto bg-light border"), 29 | ], className="d-flex flex-wrap align-items-start" 30 | ) 31 | ```""" 32 | 33 | 34 | m_preview = html.Div( 35 | [ 36 | html.Div("m-0", className="m-0 bg-light border"), 37 | html.Div("m-1", className="m-1 bg-light border"), 38 | html.Div("m-2", className="m-2 bg-light border"), 39 | html.Div("m-3", className="m-3 bg-light border"), 40 | html.Div("m-4", className="m-4 bg-light border"), 41 | html.Div("m-5", className="m-5 bg-light border"), 42 | html.Div("m-auto", className="m-auto bg-light border"), 43 | ], 44 | className="d-flex flex-wrap align-items-start", 45 | ) 46 | 47 | 48 | mt_code = """ 49 | 50 | Make responsive layouts with breakpoints at device or viewport sizes: 51 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 52 | for example: "m-sm-2" 53 | ``` 54 | html.Div( 55 | [ 56 | html.Div("mt-0", className="mt-0 bg-light border"), 57 | html.Div("mt-1", className="mt-1 bg-light border"), 58 | html.Div("mt-2", className="mt-2 bg-light border"), 59 | html.Div("mt-3", className="mt-3 bg-light border"), 60 | html.Div("mt-4", className="mt-4 bg-light border"), 61 | html.Div("mt-5", className="mt-5 bg-light border"), 62 | html.Div("mt-auto", className="mt-auto bg-light border"), 63 | ], className="d-flex flex-wrap align-items-start" 64 | ) 65 | ```""" 66 | 67 | 68 | mt_preview = html.Div( 69 | [ 70 | html.Div("mt-0", className="mt-0 bg-light border"), 71 | html.Div("mt-1", className="mt-1 bg-light border"), 72 | html.Div("mt-2", className="mt-2 bg-light border"), 73 | html.Div("mt-3", className="mt-3 bg-light border"), 74 | html.Div("mt-4", className="mt-4 bg-light border"), 75 | html.Div("mt-5", className="mt-5 bg-light border"), 76 | html.Div("mt-auto", className="mt-auto bg-light border"), 77 | ], 78 | className="d-flex flex-wrap align-items-start", 79 | ) 80 | 81 | 82 | me_code = """ 83 | 84 | Make responsive layouts with breakpoints at device or viewport sizes: 85 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 86 | for example: "m-sm-2" 87 | ``` 88 | html.Div( 89 | [ 90 | html.Div("me-0", className="me-0 bg-light border"), 91 | html.Div("me-1", className="me-1 bg-light border"), 92 | html.Div("me-2", className="me-2 bg-light border"), 93 | html.Div("me-3", className="me-3 bg-light border"), 94 | html.Div("me-4", className="me-4 bg-light border"), 95 | html.Div("me-5", className="me-5 bg-light border"), 96 | html.Div("me-auto", className="me-auto bg-light border"), 97 | ], className="d-flex flex-wrap align-items-start" 98 | ) 99 | ```""" 100 | 101 | 102 | me_preview = html.Div( 103 | [ 104 | html.Div("me-0", className="me-0 bg-light border"), 105 | html.Div("me-1", className="me-1 bg-light border"), 106 | html.Div("me-2", className="me-2 bg-light border"), 107 | html.Div("me-3", className="me-3 bg-light border"), 108 | html.Div("me-4", className="me-4 bg-light border"), 109 | html.Div("me-5", className="me-5 bg-light border"), 110 | html.Div("me-auto", className="me-auto bg-light border"), 111 | ], 112 | className="d-flex flex-wrap align-items-start", 113 | ) 114 | 115 | 116 | mb_code = """ 117 | 118 | Make responsive layouts with breakpoints at device or viewport sizes: 119 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 120 | for example: "m-sm-2" 121 | ``` 122 | html.Div( 123 | [ 124 | html.Div("mb-0", className="mb-0 bg-light border"), 125 | html.Div("mb-1", className="mb-1 bg-light border"), 126 | html.Div("mb-2", className="mb-2 bg-light border"), 127 | html.Div("mb-3", className="mb-3 bg-light border"), 128 | html.Div("mb-4", className="mb-4 bg-light border"), 129 | html.Div("mb-5", className="mb-5 bg-light border"), 130 | html.Div("mb-auto", className="mb-auto bg-light border"), 131 | ] 132 | ) 133 | ```""" 134 | 135 | 136 | mb_preview = html.Div( 137 | [ 138 | html.Div("mb-0", className="mb-0 bg-light border"), 139 | html.Div("mb-1", className="mb-1 bg-light border"), 140 | html.Div("mb-2", className="mb-2 bg-light border"), 141 | html.Div("mb-3", className="mb-3 bg-light border"), 142 | html.Div("mb-4", className="mb-4 bg-light border"), 143 | html.Div("mb-5", className="mb-5 bg-light border"), 144 | html.Div("mb-auto", className="mb-auto bg-light border"), 145 | ] 146 | ) 147 | 148 | 149 | ms_code = """ 150 | 151 | Make responsive layouts with breakpoints at device or viewport sizes: 152 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 153 | for example: "m-sm-2" 154 | ``` 155 | html.Div( 156 | [ 157 | html.Div("ms-0", className="ms-0 bg-light border"), 158 | html.Div("ms-1", className="ms-1 bg-light border"), 159 | html.Div("ms-2", className="ms-2 bg-light border"), 160 | html.Div("ms-3", className="ms-3 bg-light border"), 161 | html.Div("ms-4", className="ms-4 bg-light border"), 162 | html.Div("ms-5", className="ms-5 bg-light border"), 163 | html.Div("ms-auto", className="ms-auto bg-light border"), 164 | ], className="d-flex flex-wrap align-items-start" 165 | ) 166 | ```""" 167 | 168 | 169 | ms_preview = html.Div( 170 | [ 171 | html.Div("ms-0", className="ms-0 bg-light border"), 172 | html.Div("ms-1", className="ms-1 bg-light border"), 173 | html.Div("ms-2", className="ms-2 bg-light border"), 174 | html.Div("ms-3", className="ms-3 bg-light border"), 175 | html.Div("ms-4", className="ms-4 bg-light border"), 176 | html.Div("ms-5", className="ms-5 bg-light border"), 177 | html.Div("ms-auto", className="ms-auto bg-light border"), 178 | ], 179 | className="d-flex flex-wrap align-items-start", 180 | ) 181 | 182 | 183 | mx_code = """ 184 | 185 | Make responsive layouts with breakpoints at device or viewport sizes: 186 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 187 | for example: "m-sm-2" 188 | ``` 189 | html.Div( 190 | [ 191 | html.Div("mx-0", className="mx-0 bg-light border"), 192 | html.Div("mx-1", className="mx-1 bg-light border"), 193 | html.Div("mx-2", className="mx-2 bg-light border"), 194 | html.Div("mx-3", className="mx-3 bg-light border"), 195 | html.Div("mx-4", className="mx-4 bg-light border"), 196 | html.Div("mx-5", className="mx-5 bg-light border"), 197 | html.Div("mx-auto", className="mx-auto bg-light border"), 198 | ], className="d-flex flex-wrap align-items-start" 199 | ) 200 | ```""" 201 | 202 | 203 | mx_preview = html.Div( 204 | [ 205 | html.Div("mx-0", className="mx-0 bg-light border"), 206 | html.Div("mx-1", className="mx-1 bg-light border"), 207 | html.Div("mx-2", className="mx-2 bg-light border"), 208 | html.Div("mx-3", className="mx-3 bg-light border"), 209 | html.Div("mx-4", className="mx-4 bg-light border"), 210 | html.Div("mx-5", className="mx-5 bg-light border"), 211 | html.Div("mx-auto", className="mx-auto bg-light border"), 212 | ], 213 | className="d-flex flex-wrap align-items-start", 214 | ) 215 | 216 | 217 | my_code = """ 218 | 219 | Make responsive layouts with breakpoints at device or viewport sizes: 220 | m-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 221 | for example: "m-sm-2" 222 | ``` 223 | html.Div( 224 | [ 225 | html.Div("my-0", className="my-0 bg-light border"), 226 | html.Div("my-1", className="my-1 bg-light border"), 227 | html.Div("my-2", className="my-2 bg-light border"), 228 | html.Div("my-3", className="my-3 bg-light border"), 229 | html.Div("my-4", className="my-4 bg-light border"), 230 | html.Div("my-5", className="my-5 bg-light border"), 231 | html.Div("my-auto", className="my-auto bg-light border"), 232 | ], className="d-flex flex-wrap align-items-start" 233 | ) 234 | ```""" 235 | 236 | 237 | my_preview = html.Div( 238 | [ 239 | html.Div("my-0", className="my-0 bg-light border"), 240 | html.Div("my-1", className="my-1 bg-light border"), 241 | html.Div("my-2", className="my-2 bg-light border"), 242 | html.Div("my-3", className="my-3 bg-light border"), 243 | html.Div("my-4", className="my-4 bg-light border"), 244 | html.Div("my-5", className="my-5 bg-light border"), 245 | html.Div("my-auto", className="my-auto bg-light border"), 246 | ], 247 | className="d-flex flex-wrap align-items-start", 248 | ) 249 | 250 | 251 | p_code = """ 252 | 253 | Make responsive layouts with breakpoints at device or viewport sizes: 254 | p-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 255 | for example: "p-sm-2" 256 | ``` 257 | html.Div( 258 | [ 259 | html.Div("p-0", className="p-0 bg-light border"), 260 | html.Div("p-1", className="p-1 bg-light border"), 261 | html.Div("p-2", className="p-2 bg-light border"), 262 | html.Div("p-3", className="p-3 bg-light border"), 263 | html.Div("p-4", className="p-4 bg-light border"), 264 | html.Div("p-5", className="p-5 bg-light border"), 265 | html.Div("p-auto", className="p-auto bg-light border"), 266 | ], className="d-flex flex-wrap align-items-start" 267 | ) 268 | ```""" 269 | 270 | 271 | p_preview = html.Div( 272 | [ 273 | html.Div("p-0", className="p-0 bg-light border"), 274 | html.Div("p-1", className="p-1 bg-light border"), 275 | html.Div("p-2", className="p-2 bg-light border"), 276 | html.Div("p-3", className="p-3 bg-light border"), 277 | html.Div("p-4", className="p-4 bg-light border"), 278 | html.Div("p-5", className="p-5 bg-light border"), 279 | html.Div("p-auto", className="p-auto bg-light border"), 280 | ], 281 | className="d-flex flex-wrap align-items-start", 282 | ) 283 | 284 | 285 | pt_code = """ 286 | 287 | Make responsive layouts with breakpoints at device or viewport sizes: 288 | pt-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 289 | for example: "pt-sm-2" 290 | ``` 291 | html.Div( 292 | [ 293 | html.Div("p-0", className="pt-0 bg-light border"), 294 | html.Div("pt-1", className="pt-1 bg-light border"), 295 | html.Div("pt-2", className="pt-2 bg-light border"), 296 | html.Div("pt-3", className="pt-3 bg-light border"), 297 | html.Div("pt-4", className="pt-4 bg-light border"), 298 | html.Div("pt-5", className="pt-5 bg-light border"), 299 | html.Div("pt-auto", className="pt-auto bg-light border"), 300 | ], className="d-flex flex-wrap align-items-start" 301 | ) 302 | ```""" 303 | 304 | 305 | pt_preview = html.Div( 306 | [ 307 | html.Div("pt-0", className="pt-0 bg-light border"), 308 | html.Div("pt-1", className="pt-1 bg-light border"), 309 | html.Div("pt-2", className="pt-2 bg-light border"), 310 | html.Div("pt-3", className="pt-3 bg-light border"), 311 | html.Div("pt-4", className="pt-4 bg-light border"), 312 | html.Div("pt-5", className="pt-5 bg-light border"), 313 | html.Div("pt-auto", className="pt-auto bg-light border"), 314 | ], 315 | className="d-flex flex-wrap align-items-start", 316 | ) 317 | 318 | 319 | pe_code = """ 320 | 321 | Make responsive layouts with breakpoints at device or viewport sizes: 322 | pe-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 323 | for example: "pe-sm-2" 324 | ``` 325 | html.Div( 326 | [ 327 | html.Div("pe-0", className="pe-0 bg-light border"), 328 | html.Div("pe-1", className="pe-1 bg-light border"), 329 | html.Div("pe-2", className="pe-2 bg-light border"), 330 | html.Div("pe-3", className="pe-3 bg-light border"), 331 | html.Div("pe-4", className="pe-4 bg-light border"), 332 | html.Div("pe-5", className="pe-5 bg-light border"), 333 | html.Div("pe-auto", className="pe-auto bg-light border"), 334 | ], className="d-flex flex-wrap align-items-start" 335 | ) 336 | ```""" 337 | 338 | 339 | pe_preview = html.Div( 340 | [ 341 | html.Div("pe-0", className="pe-0 bg-light border"), 342 | html.Div("pe-1", className="pe-1 bg-light border"), 343 | html.Div("pe-2", className="pe-2 bg-light border"), 344 | html.Div("pe-3", className="pe-3 bg-light border"), 345 | html.Div("pe-4", className="pe-4 bg-light border"), 346 | html.Div("pe-5", className="pe-5 bg-light border"), 347 | html.Div("pe-auto", className="pe-auto bg-light border"), 348 | ], 349 | className="d-flex flex-wrap align-items-start", 350 | ) 351 | 352 | 353 | pb_code = """ 354 | 355 | Make responsive layouts with breakpoints at device or viewport sizes: 356 | pb-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 357 | for example: "pb-sm-2" 358 | ``` 359 | html.Div( 360 | [ 361 | html.Div("pb-0", className="pb-0 bg-light border"), 362 | html.Div("pb-1", className="pb-1 bg-light border"), 363 | html.Div("pb-2", className="pb-2 bg-light border"), 364 | html.Div("pb-3", className="pb-3 bg-light border"), 365 | html.Div("pb-4", className="pb-4 bg-light border"), 366 | html.Div("pb-5", className="pb-5 bg-light border"), 367 | html.Div("pb-auto", className="pb-auto bg-light border"), 368 | ], 369 | ) 370 | ```""" 371 | 372 | 373 | pb_preview = html.Div( 374 | [ 375 | html.Div("pb-0", className="pb-0 bg-light border"), 376 | html.Div("pb-1", className="pb-1 bg-light border"), 377 | html.Div("pb-2", className="pb-2 bg-light border"), 378 | html.Div("pb-3", className="pb-3 bg-light border"), 379 | html.Div("pb-4", className="pb-4 bg-light border"), 380 | html.Div("pb-5", className="pb-5 bg-light border"), 381 | html.Div("pb-auto", className="pb-auto bg-light border"), 382 | ] 383 | ) 384 | 385 | 386 | ps_code = """ 387 | 388 | Make responsive layouts with breakpoints at device or viewport sizes: 389 | ps-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 390 | for example: "ps-sm-2" 391 | ``` 392 | html.Div( 393 | [ 394 | html.Div("ps-0", className="ps-0 bg-light border"), 395 | html.Div("ps-1", className="ps-1 bg-light border"), 396 | html.Div("ps-2", className="ps-2 bg-light border"), 397 | html.Div("ps-3", className="ps-3 bg-light border"), 398 | html.Div("ps-4", className="ps-4 bg-light border"), 399 | html.Div("ps-5", className="ps-5 bg-light border"), 400 | html.Div("ps-auto", className="ps-auto bg-light border"), 401 | ],className="d-flex flex-wrap align-items-start" 402 | ) 403 | ```""" 404 | 405 | 406 | ps_preview = html.Div( 407 | [ 408 | html.Div("ps-0", className="ps-0 bg-light border"), 409 | html.Div("ps-1", className="ps-1 bg-light border"), 410 | html.Div("ps-2", className="ps-2 bg-light border"), 411 | html.Div("ps-3", className="ps-3 bg-light border"), 412 | html.Div("ps-4", className="ps-4 bg-light border"), 413 | html.Div("ps-5", className="ps-5 bg-light border"), 414 | html.Div("ps-auto", className="ps-auto bg-light border"), 415 | ], 416 | className="d-flex flex-wrap align-items-start", 417 | ) 418 | 419 | 420 | px_code = """ 421 | 422 | Make responsive layouts with breakpoints at device or viewport sizes: 423 | px-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 424 | for example: "px-sm-2" 425 | ``` 426 | 427 | html.Div( 428 | [ 429 | html.Div("px-0", className="px-0 bg-light border"), 430 | html.Div("px-1", className="px-1 bg-light border"), 431 | html.Div("px-2", className="px-2 bg-light border"), 432 | html.Div("px-3", className="px-3 bg-light border"), 433 | html.Div("px-4", className="px-4 bg-light border"), 434 | html.Div("px-5", className="px-5 bg-light border"), 435 | html.Div("px-auto", className="px-auto bg-light border"), 436 | ], className="d-flex flex-wrap align-items-start" 437 | ) 438 | ```""" 439 | 440 | 441 | px_preview = html.Div( 442 | [ 443 | html.Div("px-0", className="px-0 bg-light border"), 444 | html.Div("px-1", className="px-1 bg-light border"), 445 | html.Div("px-2", className="px-2 bg-light border"), 446 | html.Div("px-3", className="px-3 bg-light border"), 447 | html.Div("px-4", className="px-4 bg-light border"), 448 | html.Div("px-5", className="px-5 bg-light border"), 449 | html.Div("px-auto", className="px-auto bg-light border"), 450 | ], 451 | className="d-flex flex-wrap align-items-start", 452 | ) 453 | 454 | 455 | py_code = """ 456 | 457 | Make responsive layouts with breakpoints at device or viewport sizes: 458 | py-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto} 459 | for example: "py-sm-2" 460 | ``` 461 | html.Div( 462 | [ 463 | html.Div("py-0", className="py-0 bg-light border"), 464 | html.Div("py-1", className="py-1 bg-light border"), 465 | html.Div("py-2", className="py-2 bg-light border"), 466 | html.Div("py-3", className="py-3 bg-light border"), 467 | html.Div("py-4", className="py-4 bg-light border"), 468 | html.Div("py-5", className="py-5 bg-light border"), 469 | html.Div("py-auto", className="py-auto bg-light border"), 470 | ], className="d-flex flex-wrap align-items-start" 471 | ) 472 | ```""" 473 | 474 | 475 | py_preview = html.Div( 476 | [ 477 | html.Div("py-0", className="py-0 bg-light border"), 478 | html.Div("py-1", className="py-1 bg-light border"), 479 | html.Div("py-2", className="py-2 bg-light border"), 480 | html.Div("py-3", className="py-3 bg-light border"), 481 | html.Div("py-4", className="py-4 bg-light border"), 482 | html.Div("py-5", className="py-5 bg-light border"), 483 | html.Div("py-auto", className="py-auto bg-light border"), 484 | ], 485 | className="d-flex flex-wrap align-items-start", 486 | ) 487 | 488 | 489 | gap_code = """ 490 | 491 | Make responsive layouts with breakpoints at device or viewport sizes: 492 | gap-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5} 493 | for example: "gap-sm-0" 494 | ``` 495 | html.Div( 496 | [ 497 | html.Div("Grid item 1", className="p-2 bg-light border"), 498 | html.Div("Grid item 2", className="p-2 bg-light border"), 499 | html.Div("Grid item 3", className="p-2 bg-light border"), 500 | 501 | ], className="d-grid gap-3" 502 | ) 503 | ```""" 504 | 505 | 506 | gap_preview = html.Div( 507 | [ 508 | html.Div("Grid item 1", className="p-2 bg-light border"), 509 | html.Div("Grid item 2", className="p-2 bg-light border"), 510 | html.Div("Grid item 3", className="p-2 bg-light border"), 511 | ], 512 | className="d-grid gap-3", 513 | ) 514 | 515 | 516 | # -------------------------------------------------------------------- 517 | # Cheatsheet Card - Header name, item name and hover info 518 | # -------------------------------------------------------------------- 519 | utility_spacing_margin = dbc.Card( 520 | [ 521 | dbc.CardHeader( 522 | [ 523 | html.H3("Utility: Spacing margin"), 524 | make_link("https://getbootstrap.com/docs/5.1/utilities/spacing/"), 525 | ], 526 | className="hstack gap-4", 527 | ), 528 | dbc.ListGroup( 529 | [ 530 | make_listgroup_item( 531 | "m-*-{option}", 532 | "margin all sides with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 533 | ), 534 | make_listgroup_item( 535 | "mt-*-{option}", 536 | "margin on top with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 537 | ), 538 | make_listgroup_item( 539 | "me-*-{option}", 540 | "margin at end with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 541 | ), 542 | make_listgroup_item( 543 | "mb-*-{option}", 544 | "margin bottom with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 545 | ), 546 | make_listgroup_item( 547 | "ms-*-{option}", 548 | "margin at start with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 549 | ), 550 | make_listgroup_item( 551 | "mx-*-{option}", 552 | "margin horizontal with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 553 | ), 554 | make_listgroup_item( 555 | "my-*-{option}", 556 | "margin vertical with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 557 | ), 558 | 559 | make_listgroup_item( 560 | "gap-*-{size}", 561 | "gap all sides with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5}", 562 | ), 563 | ], 564 | flush=True, 565 | className="border-0", 566 | ), 567 | ], 568 | className="class-card", 569 | ) 570 | 571 | utility_spacing_padding = dbc.Card( 572 | [ 573 | dbc.CardHeader( 574 | [ 575 | html.H3("Utility: Spacing padding"), 576 | make_link("https://getbootstrap.com/docs/5.1/utilities/spacing/"), 577 | ], 578 | className="hstack gap-4", 579 | ), 580 | dbc.ListGroup( 581 | [ 582 | 583 | make_listgroup_item( 584 | "p-*-{option}", 585 | "padding all sides with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 586 | ), 587 | make_listgroup_item( 588 | "pt-*-{option}", 589 | "padding on top with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 590 | ), 591 | make_listgroup_item( 592 | "pe-*-{option}", 593 | "padding at end with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 594 | ), 595 | make_listgroup_item( 596 | "pb-*-{option}", 597 | "padding on bottom with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 598 | ), 599 | make_listgroup_item( 600 | "ps-*-{option}", 601 | "padding at start with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 602 | ), 603 | make_listgroup_item( 604 | "px-*-{option}", 605 | "padding horizontal with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 606 | ), 607 | make_listgroup_item( 608 | "py-*-{option}", 609 | "padding vertical with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5|auto}", 610 | ), 611 | make_listgroup_item( 612 | "gap-*-{sz}", 613 | "gap all sides with breakpoints and size: m-{xs|sm|md|lg|xl|xxl}-{0|1|2|3|4|5}", 614 | ), 615 | ], 616 | flush=True, 617 | className="border-0", 618 | ), 619 | ], 620 | className="class-card", 621 | ) 622 | 623 | -------------------------------------------------------------------------------- /content/utility_text.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the card and content of the code snippets and preview content for 3 | 4 | Utility:Text 5 | """ 6 | 7 | from dash import html 8 | import dash_bootstrap_components as dbc 9 | from utilities import make_link, make_listgroup_item 10 | 11 | text_start_code = """ 12 | 13 | text-start can be used for responsive cases with the help of 14 | text-{sm|md|lg|xl|xxl}-start 15 | example "text-sm-start 16 | ``` 17 | html.P("Start aligned text on all viewport sizes", className="text-start") 18 | html.P("Start aligned text on all viewport sized small or wider", className="text-sm-start") 19 | html.P("Start aligned text on all viewport sized medium or wider", className="text-md-start") 20 | html.P("Start aligned text on all viewport sized large or wider", className="text-lg-start") 21 | html.P("Start aligned text on all viewport sized extra large or wider", className="text-xl-start") 22 | html.P("Start aligned text on all viewport sized extra extra large", className="text-xxl-start") 23 | ```""" 24 | 25 | text_start_preview = html.Div( 26 | [ 27 | html.P("Start aligned text on all viewport sizes", className="text-start"), 28 | html.P( 29 | "Start aligned text on all viewport sized small or wider", 30 | className="text-sm-start", 31 | ), 32 | html.P( 33 | "Start aligned text on all viewport sized medium or wider", 34 | className="text-md-start", 35 | ), 36 | html.P( 37 | "Start aligned text on all viewport sized large or wider", 38 | className="text-lg-start", 39 | ), 40 | html.P( 41 | "Start aligned text on all viewport sized extra large or wider", 42 | className="text-xl-start", 43 | ), 44 | html.P( 45 | "Start aligned text on all viewport sized extra extra large", 46 | className="text-xxl-start", 47 | ), 48 | ] 49 | ) 50 | 51 | 52 | text_center_code = """ 53 | 54 | text-center can be used for responsive cases with the help of 55 | text-{sm|md|lg|xl|xxl}-center 56 | example "text-sm-center 57 | ``` 58 | html.P("Center aligned text on all viewport sizes", className="text-center") 59 | html.P("Center aligned text on all viewport sized small or wider", className="text-sm-center") 60 | html.P("Center aligned text on all viewport sized medium or wider", className="text-md-center") 61 | html.P("Center aligned text on all viewport sized large or wider", className="text-lg-center") 62 | html.P("Center aligned text on all viewport sized extra large or wider", className="text-xl-center") 63 | html.P("Center aligned text on all viewport sized extra extra large", className="text-xxl-center") 64 | ```""" 65 | 66 | text_center_preview = html.Div( 67 | [ 68 | html.P("Center aligned text on all viewport sizes", className="text-center"), 69 | html.P( 70 | "Center aligned text on all viewport sized small or wider", 71 | className="text-sm-center", 72 | ), 73 | html.P( 74 | "Center aligned text on all viewport sized medium or wider", 75 | className="text-md-center", 76 | ), 77 | html.P( 78 | "Center aligned text on all viewport sized large or wider", 79 | className="text-lg-center", 80 | ), 81 | html.P( 82 | "Center aligned text on all viewport sized extra large or wider", 83 | className="text-xl-center", 84 | ), 85 | html.P( 86 | "Center aligned text on all viewport sized extra extra large", 87 | className="text-xxl-center", 88 | ), 89 | ] 90 | ) 91 | 92 | 93 | text_end_code = """ 94 | 95 | text-end can be used for responsive cases with the help of 96 | text-{sm|md|lg|xl|xxl}-end 97 | example "text-sm-end 98 | ``` 99 | html.P("End aligned text on all viewport sizes", className="text-end") 100 | html.P("End aligned text on all viewport sized small or wider", className="text-sm-end") 101 | html.P("End aligned text on all viewport sized medium or wider", className="text-md-end") 102 | html.P("End aligned text on all viewport sized large or wider", className="text-lg-end") 103 | html.P("End aligned text on all viewport sized extra large or wider", className="text-xl-end") 104 | html.P("End aligned text on all viewport sized extra extra large", className="text-xxl-end") 105 | ```""" 106 | 107 | text_end_preview = html.Div( 108 | [ 109 | html.P("End aligned text on all viewport sizes", className="text-end"), 110 | html.P( 111 | "End aligned text on all viewport sized small or wider", 112 | className="text-sm-end", 113 | ), 114 | html.P( 115 | "End aligned text on all viewport sized medium or wider", 116 | className="text-md-end", 117 | ), 118 | html.P( 119 | "End aligned text on all viewport sized large or wider", 120 | className="text-lg-end", 121 | ), 122 | html.P( 123 | "End aligned text on all viewport sized extra large or wider", 124 | className="text-xl-end", 125 | ), 126 | html.P( 127 | "End aligned text on all viewport sized extra extra large", 128 | className="text-xxl-end", 129 | ), 130 | ] 131 | ) 132 | 133 | text_wrap_code = """ 134 | ``` 135 | dbc.Badge("This text should wrap", className="text-wrap", style={"width":75}) 136 | ```""" 137 | 138 | text_wrap_preview = dbc.Container( 139 | dbc.Badge("This text should wrap", className="text-wrap", style={"width": 75}) 140 | ) 141 | 142 | 143 | text_nowrap_code = """ 144 | ``` 145 | dbc.Badge("This text does not wrap", className="text-nowrap", style={"width":50}) 146 | ```""" 147 | 148 | text_nowrap_preview = dbc.Container( 149 | dbc.Badge("This text does not wrap", className="text-nowrap", style={"width": 50}) 150 | ) 151 | 152 | text_break_code = """ 153 | ``` 154 | html.P(className="text-break", children="mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm") 155 | ```""" 156 | 157 | text_break_preview = dbc.Container( 158 | html.P( 159 | className="text-break", 160 | children="mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm", 161 | ) 162 | ) 163 | 164 | text_option_code = """ 165 | ``` 166 | html.P("Lowercased text", className="text-lowercase") 167 | html.P("Uppercased text", className="text-uppercase") 168 | html.P("CapiTaliZed text", className="text-capitalize") 169 | ```""" 170 | 171 | text_option_preview = dbc.Container( 172 | [ 173 | html.P("Lowercased text", className="text-lowercase"), 174 | html.P("Uppercased text", className="text-uppercase"), 175 | html.P("CapiTaliZed text", className="text-capitalize"), 176 | ] 177 | ) 178 | 179 | fs_size_code = """ 180 | ``` 181 | html.P("fs-1", className="fs-1 text") 182 | html.P("fs-2", className="fs-2 text") 183 | html.P("fs-3", className="fs-3 text") 184 | html.P("fs-4", className="fs-4 text") 185 | html.P("fs-5", className="fs-5 text") 186 | html.P("fs-6", className="fs-6 text") 187 | ```""" 188 | 189 | fs_size_preview = dbc.Container( 190 | [ 191 | html.P("fs-1", className="fs-1 text"), 192 | html.P("fs-2", className="fs-2 text"), 193 | html.P("fs-3", className="fs-3 text"), 194 | html.P("fs-4", className="fs-4 text"), 195 | html.P("fs-5", className="fs-5 text"), 196 | html.P("fs-6", className="fs-6 text"), 197 | ] 198 | ) 199 | 200 | fw_weight_code = """ 201 | ``` 202 | html.P("Bold text", className="fw-bold") 203 | html.P("Bolder weight text (relative to the parent element)", className="fw-bolder") 204 | html.P("Normal weight text") 205 | html.P("Light weight text", className="fw-light") 206 | html.P("Lighter weight text (relative to the parent container)", className="fw-lighter") 207 | ```""" 208 | 209 | fw_weight_preview = html.Div( 210 | [ 211 | html.P("Bold text", className="fw-bold"), 212 | html.P( 213 | "Bolder weight text (relative to the parent element)", className="fw-bolder" 214 | ), 215 | html.P("Normal weight text"), 216 | html.P("Light weight text", className="fw-light"), 217 | html.P( 218 | "Lighter weight text (relative to the parent container)", 219 | className="fw-lighter", 220 | ), 221 | ] 222 | ) 223 | 224 | fst_style_code = """ 225 | ``` 226 | html.P("Italic text", className="fst-italic") 227 | html.P("Text with normal font style", className="fst-normal") 228 | ```""" 229 | 230 | fst_style_preview = html.Div( 231 | [ 232 | html.P("Italic text", className="fst-italic"), 233 | html.P("Text with normal font style", className="fst-normal"), 234 | ] 235 | ) 236 | 237 | 238 | lh_style_code = """ 239 | ``` 240 | lorem_text = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum." 241 | html.P(lorem_text, className="lh-1") 242 | html.P(lorem_text, className="lh-sm") 243 | html.P(lorem_text, className="lh-base") 244 | html.P(lorem_text, className="lh-lg") 245 | ```""" 246 | 247 | lorem_text = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum." 248 | lh_style_preview = html.Div( 249 | [ 250 | html.P(lorem_text, className="lh-1"), 251 | html.P(lorem_text, className="lh-sm"), 252 | html.P(lorem_text, className="lh-base"), 253 | html.P(lorem_text, className="lh-lg"), 254 | ] 255 | ) 256 | 257 | font_monospace_code = """ 258 | ``` 259 | html.P("This is in monospace", className="font-monospace") 260 | ```""" 261 | font_monospace_preview = html.P("This is in monospace", className="font-monospace") 262 | 263 | 264 | text_reset_code = """ 265 | ``` 266 | html.P( 267 | [ 268 | "Muted text with a ", 269 | html.A("reset link", href="#", className="text-reset") 270 | ], 271 | className="text-muted" 272 | ) 273 | ```""" 274 | text_reset_preview = html.P( 275 | ["Muted text with a ", html.A("reset link", href="#", className="text-reset")], 276 | className="text-muted", 277 | ) 278 | 279 | text_decoration_code = """ 280 | ``` 281 | html.P("This text has a line underneath it", className="text-decoration-underline") 282 | html.P("This text has a line going through it", className="text-decoration-line-through") 283 | html.A("This link has text decoration removed", href="#",className="text-decoration-none") 284 | ```""" 285 | 286 | text_decoration_preview = html.Div( 287 | [ 288 | html.P( 289 | "This text has a line underneath it", className="text-decoration-underline" 290 | ), 291 | html.P( 292 | "This text has a line going through it", 293 | className="text-decoration-line-through", 294 | ), 295 | html.A( 296 | "This link has text decoration removed", 297 | href="#", 298 | className="text-decoration-none", 299 | ), 300 | ] 301 | ) 302 | 303 | 304 | # -------------------------------------------------------------------- 305 | # Cheatsheet Card - Header name, item name and hover info 306 | # -------------------------------------------------------------------- 307 | utility_text = dbc.Card( 308 | [ 309 | dbc.CardHeader( 310 | [ 311 | html.H3("Utility: Text"), 312 | make_link("https://getbootstrap.com/docs/5.1/utilities/text/"), 313 | ], 314 | className="hstack gap-4", 315 | ), 316 | dbc.ListGroup( 317 | [ 318 | make_listgroup_item( 319 | "text-*-start", 320 | "align text - start with breakpoings {xs|sm|md|lg|xl|xxl}", 321 | ), 322 | make_listgroup_item( 323 | "text-*-center", 324 | "align text - center with breakpoings {xs|sm|md|lg|xl|xxl}", 325 | ), 326 | make_listgroup_item( 327 | "text-*-end", 328 | "align text - end with breakpoings {xs|sm|md|lg|xl|xxl}", 329 | ), 330 | make_listgroup_item("text-wrap", "text wraps in parent"), 331 | make_listgroup_item("text-nowrap", "text may overflow parent"), 332 | make_listgroup_item( 333 | "text-break", "long words will break to stay in parent" 334 | ), 335 | make_listgroup_item( 336 | "text-{option}", 337 | "Transform text with text-{lowercase|uppercase|capitalize", 338 | ), 339 | make_listgroup_item( 340 | "fs-{size}", "font size {1|2|3|4|5|6} corresponds to heading sizes" 341 | ), 342 | make_listgroup_item( 343 | "fw-{weight}", "font wight {bold|bolder|normal|light|lighter" 344 | ), 345 | make_listgroup_item("fst-{style}", "font style {italic|normal}"), 346 | make_listgroup_item("lh-{style}", "line height {1|sm|base|lg"), 347 | make_listgroup_item("font-monospace", "font monospace"), 348 | make_listgroup_item( 349 | "text-reset", "reset text or link color so color is from parent" 350 | ), 351 | make_listgroup_item( 352 | "text-decoration-{option}", 353 | "text-decoration{underline|line-through|none", 354 | ), 355 | ], 356 | flush=True, 357 | className="border-0", 358 | ), 359 | ], 360 | className="class-card-tall", 361 | ) 362 | -------------------------------------------------------------------------------- /index_examples.py: -------------------------------------------------------------------------------- 1 | """ 2 | This is the index that links the name of the item in the cheatsheet cards 3 | with the code and preview content for the offcanvas component. 4 | See the content folder for the details. 5 | """ 6 | 7 | # I know this could be put in __init__.py but it's easier to remember to update it here when new cards are added. 8 | from content.utility_border import * 9 | from content.utility_background import * 10 | from content.utility_color import * 11 | from content.utility_display import * 12 | from content.utility_sizing import * 13 | from content.utility_spacing import * 14 | from content.utility_opacity import * 15 | from content.utility_position import * 16 | from content.utility_text import * 17 | from content.misc_helpers import * 18 | from content.utility_flex import * 19 | from content.utility_gutter import * 20 | from content.typography import * 21 | 22 | 23 | examples = { 24 | # Utility border examples 25 | "border": [border_code, border_preview], 26 | "border-{direction}": [border_direction_code, border_direction_preview], 27 | "border-0": [border_0_code, border_0_preview], 28 | "border-{direction}-0": [border_direction_0_code, border_direction_0_preview], 29 | "border-{color}": [border_color_code, border_color_preview], 30 | "border-{size}": [border_size_code, border_size_preview], 31 | "rounded": [border_rounded_code, border_rounded_preview], 32 | "rounded-{corner}": [border_rounded_corner_code, border_rounded_corner_preview], 33 | "rounded-{size}": [border_rounded_size_code, border_rounded_size_preview], 34 | # 35 | # Utility color examples 36 | "text-{color}": [text_color_code, text_color_preview], 37 | "text-body": [text_body_code, text_body_preview], 38 | "text-muted": [text_muted_code, text_muted_preview], 39 | "text-black-50": [text_black_50_code, text_black_50_preview], 40 | "text-white-50": [text_white_50_code, text_white_50_preview], 41 | 42 | # Utility background examples 43 | "bg-{color}": [bg_color_code, bg_color_preview], 44 | "bg-transparent": [bg_transparent_code, bg_transparent_preview], 45 | "bg-gradient": [bg_gradient_code, bg_gradient_preview], 46 | "bg-opacity-{val}": [bg_opacity_code, bg_opacity_preview], 47 | # 48 | # Utility display examples 49 | "d-*-none": [d_none_code, d_none_preview], 50 | "d-*-inline": [d_inline_code, d_inline_preview], 51 | "d-*-inline-block": [d_inline_block_code, d_inline_block_preview], 52 | "d-*-block": [d_block_code, d_block_preview], 53 | "d-*-grid": [d_grid_code, d_grid_preview], 54 | "d-*-flex": [d_flex_code, d_flex_preview], 55 | "d-*-inline-flex": [d_inline_flex_code, d_inline_flex_preview], 56 | "d-print-{display}": [d_print_display_code, d_print_display_preview], 57 | # 58 | # Utility Spacing examples 59 | "m-*-{option}": [m_code, m_preview], 60 | "mt-*-{option}": [mt_code, mt_preview], 61 | "me-*-{option}": [me_code, me_preview], 62 | "mb-*-{option}": [mb_code, mb_preview], 63 | "ms-*-{option}": [ms_code, ms_preview], 64 | "mx-*-{option}": [mx_code, mx_preview], 65 | "my-*-{option}": [my_code, my_preview], 66 | "p-*-{option}": [p_code, p_preview], 67 | "pt-*-{option}": [pt_code, pt_preview], 68 | "pe-*-{option}": [pe_code, pe_preview], 69 | "pb-*-{option}": [pb_code, pb_preview], 70 | "ps-*-{option}": [ps_code, ps_preview], 71 | "px-*-{option}": [px_code, px_preview], 72 | "py-*-{option}": [py_code, py_preview], 73 | "gap-*-{size}": [gap_code, gap_preview], 74 | "gap-*-{sz}": [gap_code, gap_preview], 75 | # 76 | # Utility opacity examples 77 | "text-opacity-{value}": [text_opacity_code, text_opacity_preview], 78 | "bg-opacity-{value}": [bg_opacity_code, bg_opacity_preview], 79 | "opacity-{value}": [opacity_code, opacity_preview], 80 | # 81 | # Utility position examples 82 | "float-*-{option}": [float_code, float_preview], 83 | "position-{option}": [position_code, position_preview], 84 | "{direction}-{position}": [direction_position_code, direction_position_preview], 85 | "translate-middle": [translate_middle_code, translate_middle_preview], 86 | "translate-middle-{direction}": [ 87 | translate_middle_direction_code, 88 | translate_middle_direction_preview, 89 | ], 90 | "align-{option}": [align_code, align_preview], 91 | "vstack": [vstack_code, vstack_preview], 92 | "hstack": [hstack_code, hstack_preview], 93 | "vr (vertical rule)": [vr_code, vr_preview], 94 | # 95 | # Utility text examples 96 | "text-*-start": [text_start_code, text_start_preview], 97 | "text-*-center": [text_center_code, text_center_preview], 98 | "text-*-end": [text_end_code, text_end_preview], 99 | "text-wrap": [text_wrap_code, text_wrap_preview], 100 | "text-nowrap": [text_nowrap_code, text_nowrap_preview], 101 | "text-break": [text_break_code, text_break_preview], 102 | "text-{option}": [text_option_code, text_option_preview], 103 | "fs-{size}": [fs_size_code, fs_size_preview], 104 | "fw-{weight}": [fw_weight_code, fw_weight_preview], 105 | "fst-{style}": [fst_style_code, fst_style_preview], 106 | "lh-{style}": [lh_style_code, lh_style_preview], 107 | "font-monospace": [font_monospace_code, font_monospace_preview], 108 | "text-reset": [text_reset_code, text_reset_preview], 109 | "text-decoration-{option}": [text_decoration_code, text_decoration_preview], 110 | 111 | # Utility sizing examples 112 | "w-{option}": [w_option_code, w_option_preview], 113 | "h-{option}": [h_option_code, h_option_preview], 114 | "mw-100": [mw_100_code, mw_100_preview], 115 | "mh-100": [mh_100_code, mh_100_preview], 116 | "viewport": [viewport_code, viewport_preview], 117 | 118 | # Utility misc examples 119 | "user-select-{option}": [user_select_code, user_select_preview], 120 | "pe-{option} (pointer)": [pointer_code, pointer_preview], 121 | "overflow-{option}": [overflow_code, overflow_preview], 122 | "shadow-{option}": [shadow_code, shadow_preview], 123 | 124 | "visible/invisible": [visible_code, visible_preview], 125 | "fixed-top": [fixed_top_code, fixed_top_preview], 126 | "fixed-bottom": [fixed_bottom_code, fixed_bottom_preview], 127 | "sticky-*-top": [sticky_top_code, sticky_top_preview], 128 | "img-fluid": [img_fluid_code, img_fluid_preview], 129 | "img-thumbnail": [img_thumbnail_code, img_thumbnail_preview], 130 | # "ratio": [ratio_code, ratio_preview], 131 | # 132 | # Utility flex examples 133 | # "flex-*-row": [flex_row_code, flex_row_preview], 134 | # "flex-*-row-reverse": [flex_row_reverse_code, flex_row_reverse_preview], 135 | # "flex-*-column": [flex_column_code, flex_column_preview], 136 | # "flex-*-column-reverse": [flex_column_reverse_code, flex_column_reverse_preview], 137 | "justify-content-*-{option}": [justify_content_code, justify_content_preview], 138 | "align-items-*-{option}": [align_items_code, align_items_preview], 139 | "align-self-*-{option}": [align_self_code, align_self_preview], 140 | "flex-*-fill": [flex_fill_code, flex_fill_preview], 141 | "flex-grow-{option}": [flex_grow_code, flex_grow_preview], 142 | "flex-shrink-{option}": [flex_shrink_code, flex_shrink_preview], 143 | "flex-*-nowrap": [flex_nowrap_code, flex_nowrap_preview], 144 | "flex-*-wrap": [flex_wrap_code, flex_wrap_preview], 145 | "flex-*-wrap-reverse": [flex_wrap_reverse_code, flex_wrap_reverse_preview], 146 | "order-*-{number}": [order_number_code, order_number_preview], 147 | "order-*-{name}": [order_name_code, order_name_preview], 148 | "align-content-*-{option}": [align_content_code, align_content_preview], 149 | # 150 | # Utilities Grid examples 151 | "gx-{size}": [gx_size_code, gx_size_preview], 152 | "gx-*-{size}": [gx_dev_size_code, gx_dev_size_preview], 153 | "gy-{size}": [gy_size_code, gy_size_preview], 154 | "gy-*-{size}": [gy_dev_size_code, gy_dev_size_preview], 155 | "g-{size}": [g_size_code, g_size_preview], 156 | "g-*-{size}": [g_dev_size_code, g_dev_size_preview], 157 | # 158 | # Typography examples 159 | "h1-h6": [h1h6_code, h1h6_preview], 160 | "display-{size}": [display_code, display_preview], 161 | "lead": [lead_code, lead_preview], 162 | "mark": [mark_code, mark_preview], 163 | "abbr": [abbr_code, abbr_preview], 164 | "initialism": [abbr_code, abbr_preview], 165 | "blockquote": [blockquote_code, blockquote_preview], 166 | "blockquote-footer": [blockquote_code, blockquote_preview], 167 | "cite": [cite_code, cite_preview], 168 | } 169 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | dash>=2.0.0 2 | dash-bootstrap-components>=1.2 3 | -------------------------------------------------------------------------------- /utilities.py: -------------------------------------------------------------------------------- 1 | """ 2 | 3 | """ 4 | from dash import html, dcc 5 | import dash_bootstrap_components as dbc 6 | # 7 | # dbc_home_url = "https://dbc-v1.herokuapp.com/" 8 | # dbc_url = "https://dbc-v1.herokuapp.com/docs/components/" 9 | 10 | 11 | dbc_home_url = "https://dash-bootstrap-components.opensource.faculty.ai/" 12 | dbc_url = "https://dash-bootstrap-components.opensource.faculty.ai/docs/components/" 13 | 14 | 15 | # These items are highlighted with the "highlight new" button 16 | new_items = [ 17 | "vstack", 18 | "hstack", 19 | "vr (vertical rule)", 20 | "gx-{size}", 21 | "gx-*-{size}", 22 | "gy-{size}", 23 | "gy-*-{size}", 24 | "g-{size}", 25 | "g-*-{size}", 26 | "justify-content-*-{option}", 27 | # "order-*-{order-name}", 28 | "gap-*-{size}", 29 | "gap-*-{sz}", 30 | "{direction}-{position}", 31 | "translate-middle-{direction}", 32 | "text-*-start", 33 | "text-*-center", 34 | "text-*-end", 35 | "fs-{size}", 36 | "fst-{style}", 37 | "lh-{style}", 38 | "text-decoration-{option}", 39 | "opacity-{value}", 40 | "bg-opacity-{value}", 41 | "text-opacity-{value}", 42 | "pe-{option} (pointer)", 43 | "overflow-{option}", 44 | # "Migration Guide", 45 | "Icons", 46 | "Accordion", 47 | "Breadcrumb", 48 | "Offcanvas", 49 | "Pagination", 50 | "display-{size}" 51 | ] 52 | 53 | 54 | def make_offcanvas(idx): 55 | return dbc.Offcanvas( 56 | [ 57 | dbc.Container( 58 | [ 59 | make_fullscreen_btn(idx), 60 | dbc.Row( 61 | [ 62 | dbc.Col( 63 | [ 64 | dbc.Card( 65 | [ 66 | dbc.CardHeader("Code Snippet"), 67 | dcc.Markdown( 68 | id={"type": "code", "index": idx,}, 69 | className="p-2", 70 | style={"minHeight": 250}, 71 | ), 72 | dcc.Clipboard( 73 | target_id={ 74 | "type": "code", 75 | "index": idx, 76 | }, 77 | title="copy snippet", 78 | className="position-absolute top-0 end-0 fs-3", 79 | ), 80 | ], 81 | className="position-relative", 82 | ), 83 | ], 84 | width=12, lg=6 85 | ), 86 | dbc.Col( 87 | [ 88 | dbc.Card( 89 | [ 90 | dbc.CardHeader("Preview"), 91 | dbc.CardBody( 92 | id={"type": "preview", "index": idx,}, 93 | # className="p-2", 94 | style={"minHeight": 250}, 95 | ), 96 | ] 97 | ) 98 | ], width=12, lg=6 99 | ), 100 | ] 101 | ), 102 | ], 103 | fluid=True, 104 | ), 105 | ], 106 | id={"type": "off-canvas", "index": idx}, 107 | title=idx, 108 | is_open=False, 109 | placement="top", 110 | scrollable=True, 111 | style={"position": "absolute", "height": 400}, 112 | ) 113 | 114 | 115 | def make_listgroup_item(idx, tooltip=None): 116 | listgroup_item = dbc.ListGroupItem( 117 | idx, 118 | id={"type": "list-item", "index": idx}, 119 | n_clicks=0, 120 | className="border-0 text-nowrap list-group-item-action", 121 | style={"cursor": "pointer"} 122 | ) 123 | add_tooltip = dbc.Tooltip( 124 | tooltip, 125 | id={"type": "tooltip", "index": idx}, 126 | target={"type": "list-item", "index": idx}, 127 | delay={"show":0, "hide":0} 128 | # placement="auto-end", 129 | ) 130 | if tooltip: 131 | return html.Div([listgroup_item, add_tooltip, make_offcanvas(idx)]) 132 | return html.Div([listgroup_item, make_offcanvas(idx)]) 133 | 134 | 135 | def make_listgroup_link(title, url): 136 | return dbc.ListGroupItem( 137 | title, 138 | id={"type": "list-item", "index": title}, 139 | href=url, 140 | target="_blank", 141 | className="border-0 ", 142 | 143 | ) 144 | 145 | 146 | def make_link(url): 147 | """ 148 | Makes the link with box arrow icon 149 | """ 150 | return html.Span( 151 | [ 152 | html.A( 153 | className="bi bi-book h4", 154 | href=url, 155 | target="_blank", 156 | title="Official Documentation", 157 | ) 158 | ] 159 | ) 160 | 161 | 162 | def make_fullscreen_btn(idx): 163 | return dbc.Button( 164 | "fullscreen", 165 | id={"type": "button", "index": idx,}, 166 | # outline=True, 167 | color="primary", 168 | style={"position": "absolute", "top": 15, "right": 50}, 169 | ) 170 | --------------------------------------------------------------------------------