This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Luis Escobar
Posted Aug 08 - Read on Facebook

Hi all! Just starting to get into classes and I have a question...Is there any way to create a card with a class and have the height equal to the sum of it's parts?
Say I had a full screen width box that is 120px tall by default. Within the class, I'd add padding layers above and below it 20px tall each. I'd like to be able to set those padding layers as options so that I can set them to true or false (at the item level) and the card's height would adjust.
So at the item level (card1 = new card), if I set paddingTop to true and paddingBottom to false and then checked the height of card1, it would say 140. Make sense?

4 Comments

Radek Kyselý

Sure this is possible. There are few ways you can do that, but simple conditionals should do the work, too :)

Luis Escobar

Any chance you can explain a bit more? 😊
This is what I currently have:

class BagItem extends Layer
constructor: (options={}) ->

options.width = Screen.width
options.backgroundColor = null

super options

prodCard = new Layer
parent: @
x: 0
y: 0
backgroundColor: "transparent"
width: 375
height: 139

prodBottomPad = new Layer
height: options.prodBottomPad
visible: false

@.height = 139 + prodBottomPad.height

But when I set the height of prodBottomPad, it doesn't update and just uses the default height of a new layer.

test = new BagItem
prodBottomPad: 10

Any idea how I can have it update when I create a new BagItem?

Aalok Trivedi

kinda hacky but here's a simple one I did. Like Radek Kyselý said, use conditionals https://framer.cloud/zOpQR

Ray Alexander

so the conditionals created within a class are evaluated when the class is invoked. not when the prototype loads up. good to know.

Read the entire post on Facebook