Skip to content

Card ripple #1203

Open
Open

Description

@gopalramadugu

Does the Card support the Card ripple effect ? The below link from Material io does support that. The ripple effect is on the Card it self. I am trying to create a pricing page. I would like offer the users to select with the ink ripple effect and show as selected once the user clicks the button.

https://material-components.github.io/material-components-web-catalog/#/component/card

Activity

  1. cromefire commented on Jan 6, 2019

    @cromefire
    Collaborator

    The ripple prop should do it.

  2. gopalramadugu commented on Jan 7, 2019

    @gopalramadugu
    Author

    Is that a property on Card or card.media ? I am using a card with card.media that has an image background. Once the user click the image he directed to a new page. I tried ripple on both card and card.media. I have set it ripple={true}. But it doesn't work.

  3. cromefire commented on Jan 7, 2019

    @cromefire
    Collaborator

    It should be on every component.
    In the demo the ripple is applied to the primary action:
    devtools

  4. changed the title [-]Card Selection[/-] [+]Card ripple[/+] on Jan 7, 2019
  5. gopalramadugu commented on Jan 8, 2019

    @gopalramadugu
    Author

    I created a codepen https://codesandbox.io/s/6lo565y03w. I added the ripple ={true} but it doesnt work. Am I missing something ?

  6. cromefire commented on Jan 8, 2019

    @cromefire
    Collaborator

    No I schedule this for 2.0

  7. added this to the 2.0 milestone on Jan 8, 2019
  8. gopalramadugu commented on Jan 9, 2019

    @gopalramadugu
    Author

    Thank you @cromefire . Do we know the release date or planned release date for 2.0 ?

  9. cromefire commented on Jan 9, 2019

    @cromefire
    Collaborator

    No sorry, it's very depending on our time, I think first components might be in alpha in a few weeks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions