Skip to content
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.

Sign up for GitHub

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

Jump to bottom

mwc-ripple: Ripple is not working since "0.14.0" version. #2139

Closed
nirmalbaldaniya-dream opened this issue Feb 3, 2021 · 2 comments
Closed

mwc-ripple: Ripple is not working since "0.14.0" version. #2139

nirmalbaldaniya-dream opened this issue Feb 3, 2021 · 2 comments
Labels
Type: Bug Something isn't working

Comments

@nirmalbaldaniya-dream
Copy link

nirmalbaldaniya-dream commented Feb 3, 2021 •
edited

I have tried to use "mwc-ripple" in simple html page for simplicity. It does not throw any error but ripple effect is not being shown.

Note: It's working properly in "0.13.0" version. From "0.14.0" it's not working.

index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .container {
        width: 100px;
        height: 100px;
        position: relative;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <noscript>
      Please enable JavaScript to view this website.
    </noscript>

    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script
      src="/node_modules/@material/mwc-ripple/mwc-ripple.js"
      type="module"
    ></script>
    <div class="container" tabindex="0">
      <mwc-ripple></mwc-ripple>
    </div>
  </body>
</html>

package.json

{
  "name": "@dreamworld/dw-ripple",
  "version": "0.0.0-development",
  "description": "Ripple element",
  "main": "dw-ripple.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DreamworldSolutions/dw-ripple.git"
  },
  "author": "Nirmal",
  "dependencies": {
    "@material/mwc-ripple": "^0.20.0",
    "@webcomponents/webcomponentsjs": "^2.2.10"
  }
}

It's usage pattern is as per https://www.npmjs.com/package/@material/mwc-ripple guideline.
If it's usage pattern is changed, please let me know.

Expected behavior
Ripple effect should be shown.

**Browser Version **

  • OS: [Windows 10]
  • Browser [Chrome]
  • Version [88.0.4324.104]
@taylor-vann
Copy link
Contributor

hey @nirmalbaldaniya-dream !

Thanks for submitting.

There's some javascript needed to implement mwc-ripple. Here is the javascript found in our demo.

Mainly, mwc-ripple needs help identifying the parent element to ripple across.

Definitely check out the javascript to see how you can more fully implement mwc-ripple.

Best of luck!

I will be closing this issue because it's not exactly a bug. It's more to do with implementation.

@nirmalbaldaniya-dream
Copy link
Author

nirmalbaldaniya-dream commented Feb 5, 2021 •
edited

@taylor-vann , Thank you very much.
Actually it's documentation was misleading me. It should be updated so any other person will not be mislead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@taylor-vann @nirmalbaldaniya-dream