Skip to content

Latest commit

 

History

History
104 lines (61 loc) · 2.47 KB

README.md

File metadata and controls

104 lines (61 loc) · 2.47 KB

TextLayer for Framer.js

Framer.js module that simplifies the process of adding text to your prototypes.

TextLayer

Installation

  1. Download the textlayer.coffee file
  2. Create a framer project and drop textlayer.coffee inside the /modules folder
  3. Add TextLayer = require 'textlayer' at the top of your document (case-sensitive).

More info about modules in Framer: FramerJS Docs - Modules

Examples

Basic usage

t = new TextLayer
	text: "The quick brown fox jumps over the lazy dog"
	color: "#aaa"
	textAlign: "center"
	fontSize: 14
	width: 220
	height: 40
	fontFamily: "Georgia"
	
t.center()

AutoSize based on text length and styling

t = new TextLayer
	autoSize: true
	text: "This text is longer than 100px, but that's ok"

Positioning and layout using the .setup guide

t = new TextLayer
	text: "This is a headline"
	setup: true
	autoSize: true
	paddingRight: 20
	paddingLeft: 20

Make text editable by user (input fields)

t = new TextLayer 
	contentEditable: true
	width: 200

Create a quick list of text

for fruit, i in ["Apple", "Pear", "Kiwi", "Banana"]
	t = new TextLayer
		text: fruit
		y: i*30

Properties

.text (string) - your text content

.fontFamily (string) - font. eg. "Arial", "Lato"

.fontSize (number) - size of font

.color (string) - color of text

.lineHeight (number) - line height (default is 1.25)

.letterSpacing (number) - letter spacing (default is 0)

.fontWeight (string) - weight of font

.padding (number) - padding on all sides

.paddingTop (number) - padding above text

.paddingRight (number) - padding on right side of text

.paddingBottom (number) - padding below the text

.paddingLeft (number) - padding on left side of text

.textAlign (string) - adjust alignment

.textTransform (string) - text transform using uppercase, lowercase or capitalize

.length (number) - number of characters in text

.contentEditable (boolean) - make the text editable by user

.autoSize (boolean) - resize the layer to automatically to fit text the content

.autoSizeHeight (boolean) - resize the height of the layer to automatically to fit the text content. great for fixed width columns

.setup (boolean) - show a transparent background to outline the layer's size

##Contact

Twitter: @andreaswah