-
-
Notifications
You must be signed in to change notification settings - Fork 65
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add active prop to carousel #354
add active prop to carousel #354
Conversation
Generated link: snehilvj/dash-mantine-components-354 |
Here is a sample app: from dash import Dash, _dash_renderer, html, Input, Output
import dash_mantine_components as dmc
_dash_renderer._set_react_version("18.2.0")
app = Dash(external_stylesheets=dmc.styles.ALL)
component = dmc.Carousel(
[
dmc.CarouselSlide(dmc.Center("Slide-0", bg="blue", c="white", p=60)),
dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)),
dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)),
],
id="carousel",
# initialSlide=1,
autoplay={"delay": 200, "stopOnMouseEnter": True, "stopOnInteraction":False},
)
app.layout = dmc.MantineProvider(
html.Div([
component,
dmc.Text(id="output")
])
)
@app.callback(
Output("output", "children"),
Input("carousel", "active")
)
def update(n):
return f"slide index {n}"
if __name__ == "__main__":
app.run(debug=True)
|
tests/test_carousel.py
Outdated
dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)), | ||
], | ||
id="carousel", | ||
autoplay={"delay": 500, "stopOnMouseEnter": True, "stopOnInteraction": False, "stopOnLastSnap": True}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe disable stopOnMouseEnter
just so people don't accidentally halt the test when running it locally?
@@ -3,12 +3,14 @@ import { MantineSpacing, StyleProp } from "@mantine/core"; | |||
import { BoxProps } from "props/box"; | |||
import { DashBaseProps } from "props/dash"; | |||
import { StylesApiProps } from "props/styles"; | |||
import React from "react"; | |||
import React, { useEffect, useState } from "react"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
did you use useState
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
did you use useState?
...only while messing around with things that didn't work haha
Need to add linting and formatting to this project in order to clean up stuff like this automatically,
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💃 Very nice - just two minor comments.
closes #292
To do:
Will update docs with new examples after release and doc PR #69