Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
slot pattern for framer x
import * as React from "react";
import { Frame, PropertyControls, ControlType } from "framer";
import { MoleculeLeftContentText } from "./MoleculeLeftContentText"
import { MoleculeLeftContentTextTwoLines } from "./MoleculeLeftContentTextTwoLines";
const style: React.CSSProperties = {
height: 78,
marginLeft: 12,
marginRight: 12,
paddingLeft: 18,
//width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "left",
textAlign: "left",
color: "#000000",
background: "rgba(255, 255, 255, 1)",
overflow: "hidden",
boxShadow: "0 1px 2px rgba(0,0,0,0.09), 0 4px 15px rgba(0,0,0,0.05)",
borderRadius: 4,
};
// Define type of property
interface Props {
text: string;
leftSlot: string;
}
export class OrganismCard extends React.Component<Props> {
// Set default properties
static defaultProps = {
text: "Hello World!",
leftSlot: <MoleculeLeftContentText />, // TODO this works, but probably is not correct
}
// Items shown in property panel
static propertyControls: PropertyControls = {
text: { type: ControlType.String, title: "Text" },
// TODO how to make this work?
// leftSlot: {
// type: ControlType.Enum,
// options: [<MoleculeLeftContentText />, <MoleculeLeftContentTextTwoLines />],
// optionTitles: ["Text", "TextTwoLines"],
// title: "Left Content"
// }
}
render() {
return (
<Frame style={style} width={this.props.width-24}>
{this.props.leftSlot}
</Frame>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.