Skip to content

benjamindenboer/FramerInput

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

icon
Framer Input


banner

INTRODUCTION

From inputs in Design to fully functional ones in Code. A Framer module that allows you to create single-line and multi-line input fields in Code and Design. Complete with an interactive iOS keyboard simulator.

Watch the video.


Overview

All included properties and methods.

Properties Type Description
new InputLayer Class Initiate a new Input object.
InputLayer.wrap Method Wrap input object around two layers.
InputLayer.value String Text value of input layer.
InputLayer.focusColor Color Color of input layer on focus.
InputLayer.multiLine Boolean Single or multi-line input field.
InputLayer.onEnterKey Event On return key press.
InputLayer.onSpaceKey Event On space key press.
InputLayer.onBackSpaceKey Event On backspace key press.
InputLayer.onCapsLockKey Event On caps space key press.
InputLayer.onShiftKey Event On shift key press.
InputLayer.onValueChange Event On input key press.
InputLayer.onInputFocus Event On input focus.
InputLayer.onInputBlur Event On input blur.

Design Guide

First, grab the input.coffee file and place it within the /modules folder (located within your .framer folder). Then, to include the module, require the Input class:

{InputLayer} = require "input"

Once you have created a simple input field in Design, you can make the wrapper layer (background) and the placeholder copy (text) targetable, and wrap them in Code.

The InputLayer.wrap method takes two parameters:

  • background — The background layer of the input field.
  • text — The placeholder text layer of the input field.
input = InputLayer.wrap(background, text)

Now, the input field is functional. It automatically sets a focusColor for you (changes the color of the text), but this is completely customizable. The input object has its own onValueChange method. To use the text contents as you’re typing, simply reference the value property in combination with the event.

input.onValueChange ->
	print input.value 

The wrap method allows you to pass in optional properties, too. For instance, if you’d like to create a multiLine input field (also known as a textarea), you can simply pass it along:

input = InputLayer.wrap(bg, text, multiLine: true)

Code Guide

New InputLayers can be initiated in Code, too.

input = new InputLayer

This will create a functional input field, with its default placeholder. Note that the InputLayer class is based on the TextLayer class, and thus will inherit its properties and methods as well.

input = new InputLayer
	text: "Placeholder"

To style the placeholder text, you can use all of the TextLayer properties.

input.fontSize = 40
input.fontWeight = 600
input.color = "red"

The Input class has its own onValueChange method, too. To use the text contents as you’re typing, simply reference the value property in combination with the event.

input.onValueChange ->
	print input.value 

Examples

More Resources


Contact

About

Design with Inputs in Framer.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published