benjamindenboer / Framerinput
Programming Languages
Framer Input
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.
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
- Input in Code. Create and style a single input field.
- Textarea in Code. Create and style a multi-line input field.
- Input in Design. Wrap a single input field.
- Textarea in Design. Wrap a multi-line input field.
- Chat Example. Type and send messages.
More Resources
Contact
- Follow me @benjaminnathan.
- Follow @framer.