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

What is Framer? Join the Community
Return to index
Anders Kavcic
Posted Jan 23 - Read on Facebook

Question: How to create custom properties in extended classes?

Hey everyone! I'm want to make a class for my nav buttons. And I'd like to create each button like this:

nav_a = new NavButton
on_image: "images/nav_a_on"
off_image: "images/nav_a_off"

This is what my class looks like:

# NAV button class
class NavButton extends Layer
constructor: (options) ->
# Get default layer functionality
super _.defaults options,
# Set default properties
width: 270
height: 234

@myState = false
@on_image = "images/nav_a_on.png"
@off_image = "images/nav_a_off.png"

# Deactivate by default
@deactivate()

# Add events handlers
@onTapStart ->
@myState = [email protected]
if @myState
@activate()
else
@deactivate()

activate: ->
@image = @on_image

deactivate: ->
@image = @off_image
# END NAV class

How do I write the class so that it accepts on_image and off_image as input properties when a button is created? I have been Googling for hours ;) Any input deeply appreciated! Thanks.

2 Comments

Anders Kavcic

Solved it!

This was a great help:
https://www.framercasts.com/videos/8

# NAV button class
class NavButton extends Layer
constructor: (options) ->
this.on_image = options.on_image || "images/nav_a_on.png"
this.off_image = options.off_image || "images/nav_a_off.png"
# Get default layer functionality
super _.defaults options,
width: 270
height: 234

@myState = false
# Deactivate by default
@deactivate()

# Add events handlers
@onTapStart ->
@myState = [email protected]
if @myState
@activate()
else
@deactivate()

activate: ->
@image = @on_image

deactivate: ->
@image = @off_image

JL Flores Mena

Congrats on finding the answer! Here's also another way to declare custom attributes with default values.

Read the entire post on Facebook