Trouble using Material Design Components Inside Hype

1

Is there a better way to implement a material design component inside hype without rebuilding them from the ground up?

If you place the code for a component into the HTML widget it works as expected but is an unrealistic and bad use of Hype.

The problem is that the code for a Material Design component (see below) has several divs with many Classes applied…nothing strange here, but is it possible to use the Class field in the Inspector within Hype to backwards engineer the Component using Hype rather than just a static HTML widget?

Here is the required code for the Card Component I would like to recreate in Hype (Currently inside an HTML widget). Sample Project attached.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-green.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
    width: 512px;
}

.demo-card-wide>.mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('${resourcesFolderName}/splashCard01.png') center / cover;
}

.demo-card-wide>.mdl-card__menu {
    color: #fff;
}
</style>
</head>
<body>
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
        </div>
    </div>

</body>
</html>

MaterialDesign-HypeTest.zip (173.4 KB)

2

You could create a rectangle element and give it the class of

demo-card-wide mdl-card mdl-shadow--2dp

but in order to get the other elements positioned and looking the way they do you would have to add the html inside the rectangle. You could add other elements yourself and add the class names that are needed but Hype’s css will override colours and perhaps other selectors.

46695797-0BA9-4E36-844A-3BF6D106AA3A
46695797-0BA9-4E36-844A-3BF6D106AA3A.jpg968×976 194 KB

77D13F4D-DD4A-45DF-ACA8-8BE7B6250A39
77D13F4D-DD4A-45DF-ACA8-8BE7B6250A39.jpg1120×846 426 KB

One thing to keep in mind is to uncheck “protect from external stylesheets” in the Document Inspector to get everything working 99% of the way. Hype scene editor will not show images etc. When previewing though everything should look fine.

B9BC5952-D82A-4AC1-AAFC-6B195C40528F
B9BC5952-D82A-4AC1-AAFC-6B195C40528F.jpg1192×1570 396 KB

2 Likes
3

Fantastic, all working well now on the styling side of things - many thanks @DBear!

I am trying to get the button to change scene with no luck. I am trying to add inline javascript but can’t find any Hype examples anywhere. Any suggestions?

My button code:

<a class="#" onclick="HYPE.documents['MaterialDesign-HypeTest'].showSceneNamed('Scene2',HYPE.documents['MaterialDesign-HypeTest'].kSceneTransitionPushRightToLeft)">
      Get Started
    </a>
4

Your syntax should be

<a
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
href="#"
onclick="HYPE.documents['NAME_OF_DOC'].showSceneNamed('SCENE_NAME',HYPE.documents['NAME_OF_DOC'].kSceneTransitionPushRightToLeft)">Get Started</a>

Note that in preview the name of the Doc will be 'index'. It will become the name of your project once exported.

Example (used in preview with your example doc)

onclick="HYPE.documents['index'].showSceneNamed('Scene 1',HYPE.documents['index'].kSceneTransitionPushRightToLeft)""

A682D6F7-1E99-4F08-80DF-36A7EC0DF7AE

The following is a link to a forum post on the topic of linking to scenes inside and outside Hype docs:

1 Like
5

Works like a charm - many thanks ! This was the final hurdle to get the card component into Hype in a usable way so I really appreciate the input.

I will repost the project for others to use once I have a few useful components in place.

Thanks again!
Stephen.

6

Material Design Web Components have continued to evolve since this thread. The Lite version of MD Web Components has been superseded. I recently investigated the current component set and evaluated its usefulness for crafting reusable UI elements in Hype.

I made a quick explainer video on what I learned. Check it out here. Enjoy!

MaterialDesignVideoThumbnail
MaterialDesignVideoThumbnail2560×1440 409 KB

8 Likes
7

Awesome explainer for the integration!

8

Nice.
Thank you

1 Like
9

Amazing work, thanks for sharing!!