From dbd7e9ba2a872f66702cc71901f1dfbd16e4561c Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Fri, 29 Dec 2023 14:48:33 -0800 Subject: [PATCH 1/2] carousel with nodes for slide content and caption --- src/components/carousel/Carousel.js | 56 +++++------------------------ usage_carousel.py | 53 +++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 47 deletions(-) create mode 100644 usage_carousel.py diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js index 39fec3c2..9a10a204 100644 --- a/src/components/carousel/Carousel.js +++ b/src/components/carousel/Carousel.js @@ -45,17 +45,9 @@ const Carousel = props => { as={item.href ? Link : 'div'} {...additionalProps} > - {item.alt} - - {item.header &&
{item.header}
} - {item.caption &&

{item.caption}

} + {item.children} + + {item.caption} ); @@ -125,45 +117,15 @@ Carousel.propTypes = { */ key: PropTypes.string, /** - * The URL of the image + * The slide content */ - src: PropTypes.string, - /** - * The alternate text for an image, if the image cannot be displayed - */ - alt: PropTypes.string, - /** - * The className for the image. The default is 'd-block w-100' - */ - img_class_name: PropTypes.string, - /** - * **DEPRECATED** Use `img_class_name` instead. - * - * The className for the image. The default is 'd-block w-100' - */ - imgClassName: PropTypes.string, - /** - * The style for the image - */ - img_style: PropTypes.object, - /** - * The header of the text on the slide. It is displayed in a
element - */ - header: PropTypes.string, - /** - * The caption of the item. The text is displayed in a

element - */ - caption: PropTypes.string, - /** - * The class name for the header and caption container - */ - caption_class_name: PropTypes.string, + children: PropTypes.node, + /** - * **DEPRECATED** Use `caption_class_name` instead. - * - * The class name for the header and caption container + * The slide caption */ - captionClassName: PropTypes.string, + caption: PropTypes.node, + /** * Optional hyperlink to add to the item. Item will be rendered as a * HTML or as a Dash-style link depending on whether the link is diff --git a/usage_carousel.py b/usage_carousel.py new file mode 100644 index 00000000..56db75e7 --- /dev/null +++ b/usage_carousel.py @@ -0,0 +1,53 @@ +from dash import Dash, html, dcc, callback, Input, Output +import dash_bootstrap_components as dbc +import plotly.express as px + +df = px.data.tips() + +app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) + +slide1 = "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/static/images/slide1.svg" +slide2 = "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/static/images/slide2.svg" +slide3 = html.H1("HI! This is a random component", style={"height": 800, "padding":100}, className="text-center") +slide4 = html.Div( + [ + html.H4("Restaurant tips by day of week"), + dcc.Dropdown(["Fri", "Sat", "Sun"], "Fri", clearable=False, id="day"), + dcc.Graph(id="graph"), + ], + className="border", + style={"height": 800, "padding": 100}, +) + +carousel = dbc.Carousel( + items = [ + { + "key": "1", + "children": html.Img(src=slide1, width="100%"), + "caption": html.Div("Slide 1 caption"), + }, + {"key": "2", "children": html.Img(src=slide2, width="100%")}, + { + "key": "3", + "children": slide3, + "caption": html.H1("Hi Again", className="text-primary"), + }, + {"key": "4", "children": slide4, "caption": "Slide 4 caption"}, + ], + interval=2000, + ride="carousel", + variant="dark" +) + +app.layout = dbc.Container([carousel]) + + +@callback(Output("graph", "figure"), Input("day", "value")) +def update_bar_chart(day): + mask = df["day"] == day + return px.bar( + df[mask], x="sex", y="total_bill", color="smoker", barmode="group" + ) + + +app.run(debug=True) From 033198637f31f00eec0b7ce1808688145073555d Mon Sep 17 00:00:00 2001 From: AnnMarueW Date: Sun, 31 Dec 2023 08:45:12 -0800 Subject: [PATCH 2/2] simpler version - no need for link props --- src/components/carousel/Carousel.js | 38 ----------------------------- usage_carousel.py | 2 ++ 2 files changed, 2 insertions(+), 38 deletions(-) diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js index 9a10a204..388e9feb 100644 --- a/src/components/carousel/Carousel.js +++ b/src/components/carousel/Carousel.js @@ -24,26 +24,9 @@ const Carousel = props => { } = props; const slides = items.map(item => { - // note - the default 'd-block w-100' is from the examples in the Bootstrap docs. - item.imgClassName = - typeof item.imgClassName !== 'undefined' - ? item.imgClassName - : 'd-block w-100'; - - const useLink = item.href && true; - const additionalProps = useLink - ? { - href: item.href, - external_link: item.external_link, - target: item.target || '_self' - } - : {}; - return ( {item.children} @@ -125,27 +108,6 @@ Carousel.propTypes = { * The slide caption */ caption: PropTypes.node, - - /** - * Optional hyperlink to add to the item. Item will be rendered as a - * HTML or as a Dash-style link depending on whether the link is - * deemed to be internal or external. Override this automatic detection - * with the external_link argument. - */ - href: PropTypes.string, - /** - * Optional target attribute for the link. Only applies if `href` is set, default `_self`. - */ - target: PropTypes.string, - /** - * If true, the browser will treat this as an external link, - * forcing a page refresh at the new location. If false, - * this just changes the location without triggering a page - * refresh. Use this if you are observing dcc.Location, for - * instance. Defaults to true for absolute URLs and false - * otherwise. - */ - external_link: PropTypes.bool }) ).isRequired, diff --git a/usage_carousel.py b/usage_carousel.py index 56db75e7..d719e12c 100644 --- a/usage_carousel.py +++ b/usage_carousel.py @@ -18,6 +18,7 @@ className="border", style={"height": 800, "padding": 100}, ) +slide5= dbc.NavLink(html.Img(src=slide1, width="100%"), href="/home") carousel = dbc.Carousel( items = [ @@ -33,6 +34,7 @@ "caption": html.H1("Hi Again", className="text-primary"), }, {"key": "4", "children": slide4, "caption": "Slide 4 caption"}, + {"key": "5", "children": slide5, "caption": "Slide with link"}, ], interval=2000, ride="carousel",