From 3d2c60249d7aff95fbdc39318742420e030f9170 Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 22:37:56 +0100 Subject: [PATCH 1/5] Add image overlay example --- docs/components_page/components/card.md | 6 +++++ .../components/card/image_overlay.R | 22 +++++++++++++++++++ .../components/card/image_overlay.jl | 21 ++++++++++++++++++ .../components/card/image_overlay.py | 22 +++++++++++++++++++ 4 files changed, 71 insertions(+) create mode 100644 docs/components_page/components/card/image_overlay.R create mode 100644 docs/components_page/components/card/image_overlay.jl create mode 100644 docs/components_page/components/card/image_overlay.py diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index 0eca4ae54..7302576ec 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -33,6 +33,12 @@ Use `CardImg` when adding images to cards. The `top` argument can be used when t {{example:components/card/image.py:cards}} +### Image Overlays + +Use `CardImgOverlay` to display the card content over the top of the card image. Depending on the image, you may or may not need additional styles or utilities. + +{{example:components/card/image_overlay.py:card}} + ### List groups Create lists of content in a card with a `ListGroup` component by setting `flush=True`. diff --git a/docs/components_page/components/card/image_overlay.R b/docs/components_page/components/card/image_overlay.R new file mode 100644 index 000000000..28139afed --- /dev/null +++ b/docs/components_page/components/card/image_overlay.R @@ -0,0 +1,22 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +card <- dbcCard( + list( + dbcCardImg(src="/static/images/placeholder286x180.png", top=TRUE), + dbcCardImgOverlay( + dbcCardBody( + list( + htmlH4("Card title", class_name="card-title"), + htmlP( + "An example of using an image in the background of " + "a card.", + class_name="card-text" + ), + dbcButton("Go somewhere", color="primary") + ) + ) + ) + ), + style=list("width" = "18rem") +) diff --git a/docs/components_page/components/card/image_overlay.jl b/docs/components_page/components/card/image_overlay.jl new file mode 100644 index 000000000..325f05888 --- /dev/null +++ b/docs/components_page/components/card/image_overlay.jl @@ -0,0 +1,21 @@ +using DashBootstrapComponents, DashHtmlComponents + +card <- dbc_card( + [ + dbc_cardimg(src="/static/images/placeholder286x180.png", top=true), + dbc_cardimgoverlay( + dbc_cardbody( + [ + html_h4("Card title", class_name="card-title"), + html_p( + "An example of using an image in the background of " + "a card.", + class_name="card-text", + ), + dbc_button("Go somewhere", color="primary"), + ], + ), + ), + ], + style=Dict("width" => "18rem"), +) diff --git a/docs/components_page/components/card/image_overlay.py b/docs/components_page/components/card/image_overlay.py new file mode 100644 index 000000000..c49805635 --- /dev/null +++ b/docs/components_page/components/card/image_overlay.py @@ -0,0 +1,22 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +card = dbc.Card( + [ + dbc.CardImg(src="/static/images/placeholder286x180.png", top=True), + dbc.CardImgOverlay( + dbc.CardBody( + [ + html.H4("Card title", class_name="card-title"), + html.P( + "An example of using an image in the background of " + "a card.", + class_name="card-text", + ), + dbc.Button("Go somewhere", color="primary"), + ], + ), + ), + ], + style={"width": "18rem"}, +) From 6c41e1af4676bc599484de2633944387b93bd767 Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 23:07:43 +0100 Subject: [PATCH 2/5] Add horizontal card example --- docs/components_page/components/card.md | 6 +++ .../components/card/sizing/horizontal.R | 40 +++++++++++++++++++ .../components/card/sizing/horizontal.jl | 38 ++++++++++++++++++ .../components/card/sizing/horizontal.py | 39 ++++++++++++++++++ 4 files changed, 123 insertions(+) create mode 100644 docs/components_page/components/card/sizing/horizontal.R create mode 100644 docs/components_page/components/card/sizing/horizontal.jl create mode 100644 docs/components_page/components/card/sizing/horizontal.py diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index 7302576ec..7bf6c5dfc 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -67,6 +67,12 @@ Bootstrap comes with several CSS utility classes built in, including some for si {{example:components/card/sizing/utility.py:cards}} +### Horizontal + +Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. + +{{example:components/card/sizing/horizontal.py:card}} + ### Using custom CSS Finally, you can use custom CSS to control the size of your cards. In this example we use the `style` argument of `Card` to set inline style arguments. You can also write your own CSS classes that specify `width`, `max-width` etc. and apply them to the card. diff --git a/docs/components_page/components/card/sizing/horizontal.R b/docs/components_page/components/card/sizing/horizontal.R new file mode 100644 index 000000000..5bacdd34d --- /dev/null +++ b/docs/components_page/components/card/sizing/horizontal.R @@ -0,0 +1,40 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +card <- dbcCard( + list( + dbcRow( + list( + dbcCol( + dbcCardImg( + src="/static/images/placeholder286x180.png", + class_name="img-fluid rounded-start" + ), + class_name="col-md-4" + ), + dbcCol( + dbcCardBody( + list( + htmlH4("Card title", class_name="card-title"), + htmlP( + paste( + "This is a wider card with supporting text" + "below as a natural lead-in to additional" + "content. This content is a bit longer."), + class_name="card-text" + ), + htmlSmall( + "Last updated 3 mins ago", + class_name="card-text text-muted" + ), + ) + ), + class_name="col-md-8" + ) + ), + class_name="g-0 d-flex align-items-center" + ) + ), + class_name="mb-3", + style=list("maxWidth" = "540px") +) diff --git a/docs/components_page/components/card/sizing/horizontal.jl b/docs/components_page/components/card/sizing/horizontal.jl new file mode 100644 index 000000000..069282d0b --- /dev/null +++ b/docs/components_page/components/card/sizing/horizontal.jl @@ -0,0 +1,38 @@ +using DashBootstrapComponents, DashHtmlComponents + +card = dbc_card( + [ + dbc_row( + [ + dbc_col( + dbc_cardimg( + src="/static/images/placeholder286x180.png", + class_name="img-fluid rounded-start", + ), + class_name="col-md-4", + ), + dbc_col( + dbc_cardbody( + [ + html_h4("Card title", class_name="card-title"), + html_p( + "This is a wider card with supporting text " * + "below as a natural lead-in to additional " * + "content. This content is a bit longer.", + class_name="card-text", + ), + html_small( + "Last updated 3 mins ago", + class_name="card-text text-muted", + ), + ] + ), + class_name="col-md-8", + ), + ], + class_name="g-0 d-flex align-items-center", + ) + ], + class_name="mb-3", + style=Dict("maxWidth" => "540px"), +) diff --git a/docs/components_page/components/card/sizing/horizontal.py b/docs/components_page/components/card/sizing/horizontal.py new file mode 100644 index 000000000..84549f80b --- /dev/null +++ b/docs/components_page/components/card/sizing/horizontal.py @@ -0,0 +1,39 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +card = dbc.Card( + [ + dbc.Row( + [ + dbc.Col( + dbc.CardImg( + src="/static/images/placeholder286x180.png", + class_name="img-fluid rounded-start", + ), + class_name="col-md-4", + ), + dbc.Col( + dbc.CardBody( + [ + html.H4("Card title", class_name="card-title"), + html.P( + "This is a wider card with supporting text " + "below as a natural lead-in to additional " + "content. This content is a bit longer.", + class_name="card-text", + ), + html.Small( + "Last updated 3 mins ago", + class_name="card-text text-muted", + ), + ] + ), + class_name="col-md-8", + ), + ], + class_name="g-0 d-flex align-items-center", + ) + ], + class_name="mb-3", + style={"maxWidth": "540px"}, +) From fbed6ae7d0a353b0757699b7a0bd10f991674170 Mon Sep 17 00:00:00 2001 From: glsdown Date: Tue, 31 Aug 2021 08:39:29 +0100 Subject: [PATCH 3/5] Fixed string formatting --- docs/components_page/components/card/image_overlay.R | 4 +++- docs/components_page/components/card/image_overlay.jl | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/components_page/components/card/image_overlay.R b/docs/components_page/components/card/image_overlay.R index 28139afed..970aa75c1 100644 --- a/docs/components_page/components/card/image_overlay.R +++ b/docs/components_page/components/card/image_overlay.R @@ -9,8 +9,10 @@ card <- dbcCard( list( htmlH4("Card title", class_name="card-title"), htmlP( - "An example of using an image in the background of " + paste( + "An example of using an image in the background of", "a card.", + ) class_name="card-text" ), dbcButton("Go somewhere", color="primary") diff --git a/docs/components_page/components/card/image_overlay.jl b/docs/components_page/components/card/image_overlay.jl index 325f05888..62f985f20 100644 --- a/docs/components_page/components/card/image_overlay.jl +++ b/docs/components_page/components/card/image_overlay.jl @@ -8,7 +8,7 @@ card <- dbc_card( [ html_h4("Card title", class_name="card-title"), html_p( - "An example of using an image in the background of " + "An example of using an image in the background of " * "a card.", class_name="card-text", ), From e9a2ef8d6232ab977922e9ea7a031c64f505843e Mon Sep 17 00:00:00 2001 From: tcbegley Date: Tue, 31 Aug 2021 18:46:11 +0100 Subject: [PATCH 4/5] Format & Fix jl R doc examples --- .../components/card/image_overlay.R | 36 +++++----- .../components/card/image_overlay.jl | 25 ++++--- .../components/card/sizing/horizontal.R | 65 ++++++++++--------- .../components/card/sizing/horizontal.jl | 44 ++++++------- 4 files changed, 83 insertions(+), 87 deletions(-) diff --git a/docs/components_page/components/card/image_overlay.R b/docs/components_page/components/card/image_overlay.R index 970aa75c1..a4150d321 100644 --- a/docs/components_page/components/card/image_overlay.R +++ b/docs/components_page/components/card/image_overlay.R @@ -2,23 +2,23 @@ library(dashBootstrapComponents) library(dashHtmlComponents) card <- dbcCard( - list( - dbcCardImg(src="/static/images/placeholder286x180.png", top=TRUE), - dbcCardImgOverlay( - dbcCardBody( - list( - htmlH4("Card title", class_name="card-title"), - htmlP( - paste( - "An example of using an image in the background of", - "a card.", - ) - class_name="card-text" - ), - dbcButton("Go somewhere", color="primary") - ) - ) + list( + dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE), + dbcCardImgOverlay( + dbcCardBody( + list( + htmlH4("Card title", class_name = "card-title"), + htmlP( + paste( + "An example of using an image in the background of", + "a card." + ), + class_name = "card-text" + ), + dbcButton("Go somewhere", color = "primary") ) - ), - style=list("width" = "18rem") + ) + ) + ), + style = list("width" = "18rem") ) diff --git a/docs/components_page/components/card/image_overlay.jl b/docs/components_page/components/card/image_overlay.jl index 62f985f20..2c4ecdce6 100644 --- a/docs/components_page/components/card/image_overlay.jl +++ b/docs/components_page/components/card/image_overlay.jl @@ -1,21 +1,18 @@ using DashBootstrapComponents, DashHtmlComponents -card <- dbc_card( +card = dbc_card( [ - dbc_cardimg(src="/static/images/placeholder286x180.png", top=true), + dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true), dbc_cardimgoverlay( - dbc_cardbody( - [ - html_h4("Card title", class_name="card-title"), - html_p( - "An example of using an image in the background of " * - "a card.", - class_name="card-text", - ), - dbc_button("Go somewhere", color="primary"), - ], - ), + dbc_cardbody([ + html_h4("Card title", class_name = "card-title"), + html_p( + "An example of using an image in the background of " * "a card.", + class_name = "card-text", + ), + dbc_button("Go somewhere", color = "primary"), + ],), ), ], - style=Dict("width" => "18rem"), + style = Dict("width" => "18rem"), ) diff --git a/docs/components_page/components/card/sizing/horizontal.R b/docs/components_page/components/card/sizing/horizontal.R index 5bacdd34d..491adc3bb 100644 --- a/docs/components_page/components/card/sizing/horizontal.R +++ b/docs/components_page/components/card/sizing/horizontal.R @@ -2,39 +2,40 @@ library(dashBootstrapComponents) library(dashHtmlComponents) card <- dbcCard( - list( - dbcRow( + list( + dbcRow( + list( + dbcCol( + dbcCardImg( + src = "/static/images/placeholder286x180.png", + class_name = "img-fluid rounded-start" + ), + class_name = "col-md-4" + ), + dbcCol( + dbcCardBody( list( - dbcCol( - dbcCardImg( - src="/static/images/placeholder286x180.png", - class_name="img-fluid rounded-start" - ), - class_name="col-md-4" + htmlH4("Card title", class_name = "card-title"), + htmlP( + paste( + "This is a wider card with supporting text", + "below as a natural lead-in to additional", + "content. This content is a bit longer." ), - dbcCol( - dbcCardBody( - list( - htmlH4("Card title", class_name="card-title"), - htmlP( - paste( - "This is a wider card with supporting text" - "below as a natural lead-in to additional" - "content. This content is a bit longer."), - class_name="card-text" - ), - htmlSmall( - "Last updated 3 mins ago", - class_name="card-text text-muted" - ), - ) - ), - class_name="col-md-8" - ) - ), - class_name="g-0 d-flex align-items-center" + class_name = "card-text" + ), + htmlSmall( + "Last updated 3 mins ago", + class_name = "card-text text-muted" + ) + ) + ), + class_name = "col-md-8" ) - ), - class_name="mb-3", - style=list("maxWidth" = "540px") + ), + class_name = "g-0 d-flex align-items-center" + ) + ), + class_name = "mb-3", + style = list("maxWidth" = "540px") ) diff --git a/docs/components_page/components/card/sizing/horizontal.jl b/docs/components_page/components/card/sizing/horizontal.jl index 069282d0b..96ddad294 100644 --- a/docs/components_page/components/card/sizing/horizontal.jl +++ b/docs/components_page/components/card/sizing/horizontal.jl @@ -6,33 +6,31 @@ card = dbc_card( [ dbc_col( dbc_cardimg( - src="/static/images/placeholder286x180.png", - class_name="img-fluid rounded-start", + src = "/static/images/placeholder286x180.png", + class_name = "img-fluid rounded-start", ), - class_name="col-md-4", + class_name = "col-md-4", ), dbc_col( - dbc_cardbody( - [ - html_h4("Card title", class_name="card-title"), - html_p( - "This is a wider card with supporting text " * - "below as a natural lead-in to additional " * - "content. This content is a bit longer.", - class_name="card-text", - ), - html_small( - "Last updated 3 mins ago", - class_name="card-text text-muted", - ), - ] - ), - class_name="col-md-8", + dbc_cardbody([ + html_h4("Card title", class_name = "card-title"), + html_p( + "This is a wider card with supporting text " * + "below as a natural lead-in to additional " * + "content. This content is a bit longer.", + class_name = "card-text", + ), + html_small( + "Last updated 3 mins ago", + class_name = "card-text text-muted", + ), + ]), + class_name = "col-md-8", ), ], - class_name="g-0 d-flex align-items-center", - ) + class_name = "g-0 d-flex align-items-center", + ), ], - class_name="mb-3", - style=Dict("maxWidth" => "540px"), + class_name = "mb-3", + style = Dict("maxWidth" => "540px"), ) From 2af8c6984de87a0fa9335ff6733eec16ec0e9f58 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Tue, 31 Aug 2021 22:18:05 +0100 Subject: [PATCH 5/5] Reorder card examples --- docs/components_page/components/card.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index 7bf6c5dfc..a9d40ae67 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -67,12 +67,6 @@ Bootstrap comes with several CSS utility classes built in, including some for si {{example:components/card/sizing/utility.py:cards}} -### Horizontal - -Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. - -{{example:components/card/sizing/horizontal.py:card}} - ### Using custom CSS Finally, you can use custom CSS to control the size of your cards. In this example we use the `style` argument of `Card` to set inline style arguments. You can also write your own CSS classes that specify `width`, `max-width` etc. and apply them to the card. @@ -81,6 +75,12 @@ Finally, you can use custom CSS to control the size of your cards. In this examp ## Card style +### Horizontal + +Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. + +{{example:components/card/sizing/horizontal.py:card}} + ### Background and color Use the `color` argument of `Card` to set the background and border colors of `Card` to one of Bootstrap's contextual colors. When setting a dark color, use `inverse=True` to invert the text colors for better contrast.