I’m trying to register components and sub components in a Card. But don’t see anything in Plasmic. Does this code look correct?
registerComponent(Card, {
name: 'Card',
importPath: './styles/Card',
props: {
children: {
type: "slot",
defaultValue: {
type: "component",
name: "CardContent",
},
},
}
}
)
registerComponent(CardContent, {
name: 'CardContent',
importPath: './styles/CardContent',
parentComponentName: "Card",
props: {
imageSrc: 'string',
children: {
type: "slot",
defaultValue: {
type: "component",
name: "CardSubContent",
},
},
}
}
)
registerComponent(CardSubContent, {
name: 'CardSubContent',
importPath: './styles/CardSubContent',
parentComponentName: "CardContent",
props: {
title: 'string',
description: 'string',
ButtonText: 'string',
}
}
)
chungwu
November 10, 2022, 11:15pm
2
looks right; make sure this file is run when plasmic-host page is rendered (so is in the import path from your plasmic-host.tsx page)
plasmic-host.tsx
import CardFunLabTwo from "../styles/CardFunLabTwo";
import CardFunLabTwoContent from "../styles/CardFunLabTwoContent";
import CardFunLabTwoSubContent from "../styles/CardFunLabTwoSubContent";
This is what I see in Plasmic
Note the components names aren’t the same as I removed them on the code posted above.
The components being imported are:
CardFunLabTwo.tsx
import * as React from 'react'
import {Box, Container} from '@chakra-ui/react'
export default function CardFunLabTwo({Children, className}) {
return (
<div className={className} >
<Box padding="0px"margin="0px">
<Container padding="0px">
<Box bg="#F05933" borderRadius="32px" overflow='hidden'>
{Children}
</Box>
</Container>
</Box>
</div>
);
}
CardFunLabTwoContent.tsx
import * as React from 'react'
import {Stack,Image} from '@chakra-ui/react'
export default function CardFunLabTwoContent({Children, className, imageSrc }) {
//@ts-ignore
CardFunLabTwoContent.defaultProps = {
imageSrc: "Image.png"
}
return (
<div className={className} >
<Image alt="image" width="100%" height="192px" src={imageSrc}/>
<Stack spacing="6" p={{ base: '1', md: '6' }}>
{Children}
</Stack>
</div>
);
}
CardFunLabTwoSubContent.tsx
import * as React from 'react'
import {Button, Text} from '@chakra-ui/react'
export default function CardFunLabTwoSubContent({Children, title, description, ButtonText }) {
//@ts-ignore
CardFunLabTwoSubContent.defaultProps = {
title: "We do Parties and Functions",
description: "Get ready for the craziest round of mini golf you've ever played! Wind your way through a tantalising labyrinth inspired by your everyday everythings with a generous slathering of nostalgia.",
ButtonText: "Book online",
}
return (
<div>
{Children}
<Text fontFamily="SignPainter HouseSlant" fontSize="50px" fontWeight="medium" color="white" lineHeight="90%">
{title}
</Text>
<Text color="white" fontFamily="Albert Sans" fontSize="14px" lineHeight="140%">
{description}
</Text>
<Button width="136px" fontFamily="SignPainter HouseSlant" fontSize="20px" variant="primary">
{ButtonText}
</Button>
</div>
);
}
@chungwu Any more help on this one?