Skip to content

Instantly share code, notes, and snippets.

@beachead
Created September 10, 2019 02:37
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save beachead/857845f01c088602247af0c654b8f9c1 to your computer and use it in GitHub Desktop.
Retool Component: Attempting to have text overlayed over an image.
// BEGIN MODEL TEXT
// { "displayText": "My headline", "SwiftTipImage": "https://cf.swifttips.co/st-17.jpg" }
// END MODEL TEXT
// BEGIN RETOOL CUSTOM COMPONENT
// REMOVE COMMENTS WHEN LOADING
<style>
body {
position:absolute;
margin: 0;
}
.jam {
position:absolute;
color: red !important;
font-size:28pt;
text-align:center;
z-index:10;
top:100px;
}
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>
<div id="react"></div>
<script type="text/babel">
const { Button, Card, CardContent } = window["material-ui"];
const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
<Card>
<CardContent>
<div>{model.displayText}</div>
<img class="jam" width="368px" height="452px" src={model.SwiftTipImage}/>
</CardContent>
</Card>
);
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment