#Clickcard component

7 messages · Page 1 of 1 (latest)

limber mason
#

Question: Is There a Clickable Card Component in Mantine?

Hi, I'm using Mantine with Dash to create a UI, and I need a component that behaves like a clickable card. Currently, I'm using the Chip component styled as a card to achieve this functionality. Here's my approach:

def chipcard(children, value, className='chip-card', variant='filled', style ={}):
    defaults = {"padding": "5px 10px", "borderRadius": "12px", "height": "100%", 'color':'black', 'backgroundColor':'transparent','border':'1px solid #f0ebeb'}
    style = {**defaults, **style}
    return dmc.Chip(
            children =children, 
            value=value,
            className = className,
            variant = variant,
            styles = {
                    "label": style,
                    "input": {"display": "none"},  # Prevents resizing
                    "checked": {"transform": "none"},  # Prevent transform effect
                    "iconWrapper": {"display": "none"},  # Hides the checkmark
                }
            )

I use this inside a ChipGroup to manage the state of selected cards. It works well, but I feel like I’m overcomplicating things.
see the attched video
My Question:

Does Mantine have a built-in Card component that supports click functionality directly?
If not, is my approach reasonable, or is there a simpler way to achieve this behavior using Mantine components?

Any advice or pointers would be greatly appreciated!

frozen basin
twin turtle
limber mason
#

This is awesome thank you

limber mason
# frozen basin Most Mantine components support `onClick` handler. It is better to ask about thi...

Thank you for your response! I understand that most Mantine components support the onClick handler, which is great. However, I believe a dedicated "clickable card" component that functions similarly to a radio button (with selection and state management out of the box) would provide additional simplicity and convenience for users.

For example, having built-in styling for active/selected states, managing mutually exclusive selection, and seamless integration with Card's existing design system would make it easier for developers to implement this common UI pattern without extra work.

Currently, I’m using Chip styled as a card, but it feels like a workaround. A specialized component could streamline this use case significantly. Moreover, once this component is part of Mantine, we could port it to Dash Mantine to extend this functionality to the Dash ecosystem as well, benefiting a wider range of developers.

twin turtle