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.
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.
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.
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>
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!