{"id":13630944,"url":"https://github.com/k-vyn/framer-ios-kit","last_synced_at":"2025-04-17T17:32:11.779Z","repository":{"id":215215594,"uuid":"52024193","full_name":"k-vyn/framer-ios-kit","owner":"k-vyn","description":null,"archived":false,"fork":false,"pushed_at":"2017-02-14T21:06:07.000Z","size":4206,"stargazers_count":518,"open_issues_count":13,"forks_count":37,"subscribers_count":41,"default_branch":"master","last_synced_at":"2024-11-08T22:36:53.317Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/k-vyn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-18T17:11:45.000Z","updated_at":"2024-11-05T22:57:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"a2414a5b-6b55-4109-a23a-7719ba44c6c3","html_url":"https://github.com/k-vyn/framer-ios-kit","commit_stats":null,"previous_names":["k-vyn/framer-ios-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-ios-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-ios-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-ios-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-ios-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k-vyn","download_url":"https://codeload.github.com/k-vyn/framer-ios-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249360044,"owners_count":21257160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T22:02:04.099Z","updated_at":"2025-04-17T17:32:10.029Z","avatar_url":"https://github.com/k-vyn.png","language":"JavaScript","funding_links":[],"categories":["Modules","JavaScript"],"sub_categories":[],"readme":"# iOS Kit for FramerJS\n![](https://dl.dropboxusercontent.com/u/143270556/ios-kit.png)\n\niOS Kit was created to make prototyping for iOS fast and easy without compromising the quality or customization.\n\nThere are three core pieces that make up iOS Kit. There is the [foundational](#foundational) elements that help iOS Kit mold to devices. There is the [component library](#system) that’ll save you time by providing native iOS offerings, and then there’s the [supporting functions ](#supporting) that help power the foundation \u0026 components.\n\n##Updates\n**August 3rd, 2016** – Sketch integration \u0026 major code cleanup:\n\n- Added [Sketch convert](#convert) \u0026 [Sketch components](#sketch-com).\n- Added [View layer](#view), which is like a Framer Layer but accepts constraints.\n- Major field component update.\n\t- Better cursor handling.\n\t- Allows for keyboard to move between fields.\n- Keyboard overhaul.\n\t- Added iPad Pro support.\n\t- Added dark style.\n- Banner is updated to iOS 10 styling.\n- Tab \u0026 Tab Bars work with only layers. \n- The module is now broken into subcoffee files, and it's stitched together with the `ios-kit.coffee`. \n- Layout functions have been changed from `ios.layout()` to `ios.layout.set()` and `ios.animateLayout()` to `ios.layout.animate()`. \n- All supporting functions were moved to `ios-utils` and all assets were moved to `ios-library`. \n- Added Contribution section to **README**.\n\t- Empty component added as `iso-temp`.\n- Alerts now dismiss automatically.\n- Bunch of bug fixes.\n\n# Table of Contents\n- [Setup](#setup)\u003cbr\u003e\n\u003cu\u003e\u003cb\u003e[Foundational Elements](#foundational)\u003c/b\u003e\u003c/u\u003e\n- [Sketch convert](#convert)\n- [Sketch components](#sketch-com)\n-  [Dynamic Layout](#dynamic)\n\t-\t[The Point](#point)\n\t-\t[Positioning](#positioning)\n\t\t- [Setting opposite constraints](#opposite)\n\t-\t[Relationships](#relationships)\n\t\t- [Positioning](#pos-rel)\n\t\t- [Centering](#center-rel)\n\t\t- [Aligning](#align-rel)\n\t- [Animating Constraints](#animating)\n\t- [Size Constraints](#size-constraints)\n\t- [Understanding ios.layout.set()](#layout)\n- [Real device override](#real)\n- [Device details library](#details)\u003cbr\u003e\n\u003cu\u003e\u003cb\u003e[System Components](#system)\u003c/b\u003e\u003c/u\u003e\n- [Action String Shortcuts](#shortcuts)\n- [Alert](#alert)\n- [Banner](#banner)\n- [Button](#button)\n- [Field](#field)\n- [Keyboard](#keyboard)\n- [Navigation Bar](#nav)\n- [Sheet](#sheet)\n- [Status Bar](#status)\n- [Tab](#tab)\n- [Tab Bar](#tabbar)\n- [Text](#text)\u003cbr\u003e\n\u003cu\u003e\u003cb\u003e[Supporting Functions](#supporting)\u003c/b\u003e\u003c/u\u003e\u003cbr\u003e\n\u003cu\u003e\u003cb\u003e[How to Contribute](#contribute)\u003c/b\u003e\u003c/u\u003e\n\n\u003cdiv id='setup' /\u003e\n## Setup\nTo setup the kit, add the following list of files to your modules folder in your project. Don't worry, you'll only need to require one. \u003cbr\u003e\u003cbr\u003e\n\u003cpre\u003e\nios-kit.coffee\nios-kit-alert.coffee\nios-kit-banner.coffee\nios-kit-button.coffee\nios-kit-field.coffee\nios-kit-keyboard.coffee\nios-kit-layout.coffee\nios-kit-library.coffee\nios-kit-nav-bar.coffee\nios-kit-sheet.coffee\nios-kit-status-bar.coffee\nios-kit-tab-bar.coffee\nios-kit-text.coffee\nios-kit-utils.coffee\n\u003c/pre\u003e\n\n**Please note:** that Framer Studio currently doesn't support subfolders in the modules folder, so they'll need to be added to the root. \n\n\n\nIn Framer Studio, write – \n`ios = require 'ios-kit'`\n\nYou can write any variable name you'd like, but for the purposes of this guide we'll be using `ios`.\n\n\u003cdiv id='foundational' /\u003e\n## Foundational Elements\n\n\u003cdiv id='convert' /\u003e\n###  Sketch convert *NEW*\nSketch convert brings a whole new set of logic to help make the transition from Sketch to Framer seamless. Sketch convert will go through your sketch layers \u0026 write constraints for you, so all your layers will scale \u0026 position perfectly no matter the device. You also won’t have the dreaded over-scaling problems. \n\n\nTo use Sketch convert, just wrap your sketch file inside of `ios.convert()`\n\n\u003cpre\u003e  \nios = require \"ios-kit\"\nsketch = Framer.Importer.load(\"imported/iOS Kit Demo@1x\")\nsketch = ios.convert(sketch)\n\u003c/pre\u003e\n\nThat’s it! You’re done. \n\n#### **Pro-Tip** – Framer imports layers that not in groups as combined layers, so the more you separate your layers into groups the more accurate Sketch convert can be.\n\n\u003cdiv id='sketch-com' /\u003e\n### Sketch components \nIncluded in this kit is a iOS Kit for Framer Sketch file full of components. These components will be written for you when converted. So right away, you can interact with them. Smart components are aware of a lot of properties, which saves a lot of time, but please be aware that not all properties will carry over.\n\nTo convert Sketch layers into iOS Kit components, you write the same convert statement as above.\n\n\n\u003cdiv id='dynamic' /\u003e\n### Dynamic Layout\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/dynamic.png)\n\nThe most fundamental piece of this module is Dynamic Layout. Dynamic Layout is a robust layout engine that’ll not only help make positioning layers easier and smarter, it'll will make positioning layers across devices possible. \n\n\u003cdiv id='point' /\u003e\n#### The Point \nIn Dynamic Layout, like in iOS, everything is based around the point instead of the pixel. The exact number of pixels will change from device to device, but the number of points will not. There's a simple equation for finding points. \n\n`1pt = 1px * scale`\n\nSide note: you can also use the built-in functions. \n`ios.pt(6) #returns 3 points on iPhone 6 and 2 points on iPhone 6 plus` \n`ios.px(1) #returns 2 pixels on iPhone 6 and 3 pixels on iPhone 6 plus`\n\n#### Positioning\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/positioning.png)\n\nAs we get away from using pixel positioning, we won't be using x \u0026 y based positioning. Instead, we'll be setting things called constraints. When you set a constraint, it's like saying that a layer can't go beyond a certain position. There are four constraints for positioning: leading, trailing, top, and bottom. \n\nTo set a leading \u0026 top constraint on a box, write this –\n\n\u003cpre\u003e\nlayer = new Layer\nlayer.constraints = \n    top:10\n    leading:10\nios.layout.set()\n\u003c/pre\u003e\n\nThis will position the layer at x:20, y:20 on iPhone 6, and x:30, y:30 on iPhone 6 plus.\n\nSide note: you can also do this on one line if you'd prefer using this syntax. Just replace the layer.constraints line from above with this line. You'll still need to run the ios.layout.set function.\n\n\u003cpre\u003e\nlayer.constraints = {top:10, leading:10}\n\u003c/pre\u003e\n\u003cdiv id='opposite' /\u003e\n\n##### Setting Opposing Constraints\nIf you set a leading \u0026 trailing or a top \u0026 bottom, Dynamic Layout will do its best to honor the constraints, which will mean the height/width will need to be adjusted. For example, if you set the constraints of a layer to  `leading: 0` and `trailing:0`, the layer's width will be adjusted to the device's width.\n\nWARNING - If you set too many opposing constraints, I'm not sure what'll happen. Best of luck. `¯\\_(ツ)_/¯` Try to just set no more than one of each constraint. \n\n#### Relationships \nOne of the most powerful things of Dynamic Layout is relationships. Relationships allows you to link a layer onto another layer in a variety of ways. \n\n\u003cdiv id='pos-rel' /\u003e\n#####Positioning Relationships\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/relationship.png)\n\nWhen you declare a constraint, you can set a constraint as a layer instead of an integer. For example, if you have two layers (boxA \u0026 boxB) you can set boxB's top as boxA. \u003cbr\u003e\n\n\u003cpre\u003e\nboxB.constraints = \n\t\u003cb\u003etop:boxA\u003c/b\u003e\nios.layout.set()\n\u003c/pre\u003e\n\n\u003cp\u003eThis will stack the boxes so that boxB's top edge is constrained to below boxA, but what if you want a little buffer? That's really easy. We'll use a little different syntax with wrapping the layer and buffer in brackets.\u003c/p\u003e\n\n\u003cpre\u003e\nboxB.constraints = \n\t\u003cb\u003etop:[boxA, 10]\u003c/b\u003e\nios.layout.set()\n\u003c/pre\u003e\n\nThis will set boxB's top edge to 10 points below boxA. \n\u003cdiv id='center-rel' /\u003e\n#####Centering Relationships\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/centering.png)\n\nThere are a couple other types of constraints that'll help make positioning layers even easier.  There are two centering constraints: verticalCenter, horizontalCenter. These constraints will only accept just a layer as a constraint. \n\nFor example, if you'd like boxB to be horizontally centered on boxA, write this: \n\u003cpre\u003e\nboxB.constraints = \n\ttop:[boxA, 10]\n\t\u003cb\u003ehorizontalCenter:boxA\u003c/b\u003e\nios.layout.set()\n\u003c/pre\u003e\n\nThis will set boxB 10 points below boxA, and it'll center it within boxA on the x-axis. The other centering constraint verticalCenter will work simliarly center boxB within boxA on the y-axis. If you've set a top/bottom constraint, it'll ignore those constraints.\n\n\u003cdiv id='align-rel' /\u003e\n#####Aligning Relationships\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/align.png)\nThe last type of relationships will allow you to align any edge of layer onto another layer's edge. To do this, there are four constraints at your disposal: leadingEdges, trailingEdges, topEdges, and bottomEdges. These layers, like centers, will not accept anything other than another layer.\n\nIf you'd like to align boxB's trailing edge onto boxA's trailing edge, write this:\n\u003cpre\u003e\nboxB.constraints = \n\ttop:[boxA, 10]\n\t\u003cb\u003etrailingEdges:boxA\u003c/b\u003e\nios.layout.set()\n\u003c/pre\u003e\n\n\u003cdiv id='animating' /\u003e\n#### Animating Constraints\nYou can animate between constraints by running ` ios.layout.animate()`. \n\n##### Properties\n- **target (optional)** *Layer or Array of layers* \u003cbr\u003e When set, this will only animate the target layers with updated constraints. When this is not set, it'll animate all layers with their updated constraints.\n- **curve, curveOptions, delay, repeat, colorModel** *String* \u003cbr\u003e  Each of these properties will work the same as native animations\n- **time** *Num* \u003cbr\u003e This will be the time of each layer's animation, not the entire animation of all the layers. \n- **stagger** *Num* \u003cbr\u003e This will put an incremental delay across all layers being animated.\n- **fadeOut** *Boolean or Layer* \u003cbr\u003e When set to true, this will animate all layers' opacity to 0. When set to a layer, that layer's opacity will be set to 0.\n- **fadeIn** *Boolean or Layer* \u003cbr\u003e When set to true, this will animate all layers' opacity to 1. When set to a layer, that layer's opacity will be set to 1.\n\n#### Example\nIf we have a bunch of layers in a column and we want them to all move up, we can set the `topLayer`'s constraint to 50, and all the layers with a relationship with topLayer will also move up. \n\n\u003cpre\u003e\ntopLayer.constraints.top = 50 ##Set a new constraint\n\nios.animateLayout\n\tstagger:.05\n\tcurve:\"spring\"\n\n\u003c/pre\u003e\n\n\nNote: When updating a constraint on a layer, please be careful on your syntax. Writing `layer.constraints =` will wipe out your previous object. \n\nThis will wipe out your top constraint.\n\u003cpre\u003e\ntopLayer.constraints = \n\ttop:50\n\tleading:10\n\t\ntopLayer.constraints = \n\tleading:20\n\u003c/pre\u003e\n\nWhere as, this will keep your top constraint.\n\u003cpre\u003e\ntopLayer.constraints = \n\ttop:50\n\tleading:10\n\t\ntopLayer.constraints.leading = 20\n\u003c/pre\u003e\n\n\u003cdiv id='size-constraints' /\u003e\n####Size Constraints\nYou can also set height/width constraints just like above. This will ensure that your layers will remain a particular size.  One big difference in setting a height/width constraint over a property height/width is that you'll need to set the height/width constraint in points. \n\n\u003cpre\u003e\nboxB.constraints = \n\ttop:[boxA, 10]\n\ttrailingEdges:boxA\n\t\u003cb\u003eheight:100\u003c/b\u003e\n\t\u003cb\u003ewidth:100\u003c/b\u003e\nios.layout.set()\n\u003c/pre\u003e\n\n\u003cdiv id='layout' /\u003e\n####ios.layout.set()\nThis function only need to be called once for all constraints. It'll cycle through all the layers in order of creation, and it'll fulfill all constraints. \n\n#####When to call it\nYou'll need to call it before any x/y positions are referenced. If you have a function that's based off another layer, you'll need to call ios.layout.set before that positioning is stored otherwise it'll be wrong or 0. Once you call ios.layout.set(), it'll set the position to the accurate position. \u003cbr\u003e\u003cbr\u003e\n\n#####Mixing up the queue\nios.layout.set will accept layers in the parathesis. This will layout **only** that layer and ignore all other constraints. This is to be used if a layer created after others needs to be laid out before others.\u003cbr\u003e\n\n`ios.layout.set(boxB)`\nThis will only layout boxB and not boxA. \n\u003cbr\u003e\nYou may also want to play with the creation order if you're having issues with relationships.  \n\u003cdiv id='real' /\u003e\n### Real device override\nThis module is meant to make prototyping look real, and one of things that prevents this is when you open a prototype that was built for an iPhone 6 on an iPhone 6+. If you do this, you’ll end up seeing a lot of white space. When this module is on, your frame will be overridden by the device in your hand, so the iPhone 6+ will no longer see the iPhone 6 frame. Using Dynamic Layout will ensure that your prototype looks presentable at every size.\n\nFor this to work properly, you'll need a full-screen browser. I use \u0026 recommend [Frameless](#https://itunes.apple.com/us/app/frameless-full-screen-web/id933580264?mt=8).\n\n\u003cdiv id='details' /\u003e\n### Device details library\nYou’ll now be able to refer to a set of new variables that’ll allow you to get more details on the device.\n\n\u003cpre\u003e\u003cb\u003eios.scale\u003c/b\u003e # returns 1,2,3\n\u003cb\u003eios.height\u003c/b\u003e # returns the height of the device in pixels\n\u003cb\u003eios.width\u003c/b\u003e # returns the width of the device in pixels\n\u003cb\u003eios.device\u003c/b\u003e # returns one of the device names below \n\t\u003cb\u003eipad\u003c/b\u003e # for any iPad other than the pro\n\t\u003cb\u003eipad-pro\u003c/b\u003e # for the iPad Pro\n\t\u003cb\u003eiphone-5\u003c/b\u003e # for iPhone 5, iPhone 5s, iPhone 5c, and iPhone SE\n\t\u003cb\u003eiphone-6s\u003c/b\u003e # for iPhone 6 \u0026 6s\n\t\u003cb\u003eiphone-6s-plus\u003c/b\u003e # for iPhone 6 plus \u0026 6s plus\n\u003c/pre\u003e\n\n\n\u003cdiv id='system' /\u003e\n## System components\nThese are easy to implement \u0026 fully customizable native iOS components. The idea is that implementing native iOS components should be easy \u0026 quick, so that you can spend the time working on what makes your prototype unique. \n\nEvery component in this module was written to feel native to Framer, so the way you create components should feel as familar as creating a new layer. The difference is that in addition to Framer properties there's added customization parameters, which will be accepted, and any component that can accept constraints from Dynamic Layout is able to. \n\nAfter creation, components will operate as native layers under the variable name you declared. The only difference is the sublayers of the component are accessible via dot notation, so it's easier for you to turn on event listeners etc. \n\u003cdiv id='shortcuts' /\u003e\n##### Action string shortcuts\nTo provide even more customization, any string in an action context can have these prepended shortcuts. \n\n`-b` - bold string\u003cbr\u003e\n`-g` - make string green\u003cbr\u003e\n`-r` - make string red\u003cbr\u003e\n`-rb` - make string blue \u003cbr\u003e\n`-lb` - make string light blue\u003cbr\u003e\n`-o` - make string orange\u003cbr\u003e\n`-p` - make string pink\u003cbr\u003e\n`-y` - make string yellow\u003cbr\u003e\n`-#000000` - change color to any 6 digit hex code. \u003cbr\u003e\u003cbr\u003e\n\n## Alert\n \n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/alert.png)\n\nAlerts are blocking notifications that will force the users to address the alert before continuing. \n\n#### Properties\n- **title** *String* \u003cbr\u003e Embolded text at the top.\n- **message** *String* \u003cbr\u003e  Body text before actions.\n- **actions** *Array of Strings* \u003cbr\u003e Series of actions that can be taken on the alert.  \n\n#### Example\n\u003cpre\u003e\nalert = new ios.Alert\n\ttitle:\"Warning\"\n\tmessage:\"Don't do this\"\n\tactions:[\"OK\", \"Cancel\"]\n\u003c/pre\u003e\n\n#### Schema\n\u003cpre\u003e\nalert : {\n\talert.modal \n\t\talert.title\n\t\talert.message\n\t\talert.actions : { OK, Cancel }\n\talert.overlay\n}\n\u003c/pre\u003e\n\n#### Listening to Actions\nTo listen to different actions, you can use dot notation if it's a single word or brackets for any case\n\n- Dot notation \u003cbr\u003e `alert.actions.OK.on Events...`\n- Square bracket notation \u003cbr\u003e `alert.actions[\"OK\"].on Events...`\n\n## Banner \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/banner.png)\n\nThe banner is a non-blocking notification. Typically, the banner will send you to a specific screen in an app.\n\n####Properties\n- **title** *String* \u003cbr\u003e Embolded top text\n-  **message** *String* \u003cbr\u003e Body text\n- **time** *String* \u003cbr\u003e time string that appears next to title. \n- **icon** *Layer* \u003cbr\u003e This will put the layer inside the banner and size it accordingly. By default, it's a green box. \n- **duration** *Integer* \u003cbr\u003e This will override the time before the banner animates-out. By default, this is set to 7. \n- **animated** *Boolean* \u003cbr\u003e When set to `true` sheet will animate-in.\n\n**NOTE - ** The banner will be, by default, draggable. If you drag down, it'll reset, and if you drag up it'll dismiss \u0026 destroy the banner. \n\n#### Example\n\u003cpre\u003e\nbanner = new ios.Banner \n\ttitle:\"Time to do something\"\n\tmessage:\"Don't miss out\"\n\ticon:iconLayer\n\tanimated:true\n\u003c/pre\u003e\n\n#### Schema\n\u003cpre\u003e\nbanner : {\n\tbanner.icon\n\tbanner.title\n\tbanner.message\n}\n\u003c/pre\u003e\n#### Listening to actions\nTo make the banner clickable, you can write - \n\u003cpre\u003e\nbanner.on Events... \n\u003c/pre\u003e\n\n## Button \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/button.png)\n\nButton is a small versatile component that handles press states automatically.\n\n####Properties\n- **text** *String* \u003cbr\u003e Sets button text\n- **buttonType** *String* \u003cbr\u003e Can be `text`, `big`, `small`\n- **style** *String* \u003cbr\u003e Can be `light`, `dark`, or `custom`\n- **backgroundColor** *Hex Color* \u003cbr\u003e Will set the background on big buttons.\n- **color** *Hex Color* \u003cbr\u003e Sets `small` and `text` colors. \n- **fontSize** *Integer* \u003cbr\u003e When custom, sets the fontSize style property.\n- **fontWeight** *Integer* \u003cbr\u003e When custom, sets the fontWeight style property.\n- **blur** *Boolean* \u003cbr\u003e On big buttons, this will turn it slightly opaque and add background blur. \n- **superLayer** *Layer* \u003cbr\u003e set the passed layer as the super layer. \n- **constraints** *Constraints Object* \u003cbr\u003e will set constraints using [Dynamic Layout](#dynamic). \n\n#### Example\n\u003cpre\u003e\nbutton = new ios.Button\n\ttext:\"Download\"\n\tbuttonType:\"small\"\n\tcolor:\"red\"\n\u003c/pre\u003e\n\n####Schema\n\u003cpre\u003e\nbutton: {\n\tbutton.label \n}\n\u003c/pre\u003e\n#### Listening to buttons\nListening to buttons is no different than normal framer.\u003cbr\u003e\n`button.on Events...`\n\n## Field \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/field.png)\n\nThe field is a versatile input for the keyboard. Please note, this is not a HTML field.\n\n####Properties\n- **text** *String* \u003cbr\u003e Adds text by default to the field.\n- **placeholderText** *String* \u003cbr\u003e Sets the placeholder text.\n- **placeholderColor** *Color String* \u003cbr\u003e Sets the placeholder text color.\n- **borderRadius** *Integer* \u003cbr\u003eSets border radius of field.\n- **borderWidth** *Integer* \u003cbr\u003e Sets border width.\n- **borderColor** *Color String* \u003cbr\u003e Sets border color.\n- **color** *Color String* \u003cbr\u003e Sets text color.\n- **backgroundColor** *Color String* \u003cbr\u003e Sets field background color.\n- **width** *Integer* \u003cbr\u003e Sets width in points.\n- **height** *Integer* \u003cbr\u003e Sets height in points.\n- **constraints** *Constraints Object* \u003cbr\u003e Will set the field's constraints and run layout using [Dynamic Layout](#dynamic)\n- **textConstraints** *Constraints Object* \u003cbr\u003e Will set the text's constraints and run layout using [Dynamic Layout](#dynamic)\n\n####Example\n\u003cpre\u003e\n\tfield = new ios.Field\n\t\tplaceholderText:\"Enter a name or email address\"\n\t\tconstraints:{align:\"center\"}\n\u003c/pre\u003e\n\n####Schema\n\u003cpre\u003e\nfield: {\n\tfield.placeholder\n\tfield.text\n\t# after touchEnd event\n\tfield.keyboard { \n\t\t... Keyboard Schema\n\t}\n}\n\u003c/pre\u003e\n\n####Listening to keys inside of a field\nIn order to listen for the return key or any other key, you'll need to wrap it up in a touch event since the keyboard only exists after the field is being touched. \n\n\u003cpre\u003e\nfield.on Events.TouchEnd, -\u003e\n\tfield.keyboard.keys.return.on Events...\n\u003c/pre\u003e\n\n## Keyboard \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/keyboard.png)\n\nThe keyboard is a fully rendered component that mimics the native iOS keyboard. It'll adapt to all devices. \n\n####Properties\n- **returnText** *String* \u003cbr\u003e Overrides the text on the return button.\n- **returnColor** *Hexcode String* \u003cbr\u003e Will set the return button color\n- **animated** *Boolean* \u003cbr\u003e Will determine if the keyboard is animated in. By default, this is set to false. \n\n\n\n#### Example\n\u003cpre\u003e\nboard = new ios.Keyboard\n\treturnText = \"Done\"\n\u003c/pre\u003e\n\n\u003cdiv id=\"keyboard-schema\" /\u003e\n####Schema\n\u003cpre\u003e\nboard: {\n\tboard.keysArray #contains all keys A-Z in array object\n\tboard.keys {\n\t\tboard.keys.a - board.keys.z\n\t\tboard.keys.shift\n\t\tboards.keys.return\n\t\tboards.keys.num\n\t\tboards.keys.space\n\t\tboards.keys.emoji\n\t\t\n\t\t# if on iPad\n\t\tboards.keys.shift2\n\t\tboards.keys.num2\n\t\tboards.keys.dismiss\n\t} \n}\n\u003c/pre\u003e\n#### Listening to Keys\nYou can listen to keys using dot notation or square bracket notation.\n\n- Dot notation \u003cbr\u003e `board.keys.return.on Events...`\n- Square bracket notation \u003cbr\u003e `board.keys[\"return\"].on Events...`\n\n##Sheet \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/menu.png)\n\nThe sheet is quick action list. The sheet component is super simple to create.\n\n####Properties\n- **actions** *Array of strings* \u003cbr\u003e Series of actions that can be taken on the sheet.\n- **animated** *Boolean* \u003cbr\u003e When set to `true` sheet will animate-in.\n- **description** *String* \u003cbr\u003e When declared, a small grey text will appear at the top of the sheet. By default, this will not appear. \n- **cancel** *String* \u003cbr\u003e This will override the label on the dismiss button. \n\n**NOTE - ** The cancel button will always animate-out. You don't have to add any additional code to handle/animate that. \n\n#### Example\n\u003cpre\u003e\nsheet = new ios.sheet \n\tactions:[“-r Delete, Edit, Share”]\n\tanimated:true\n\tdescription:\"Do something\"\n\u003c/pre\u003e\n\n####Schema\n\u003cpre\u003e\nsheet : {\n\tsheet.cancel \n\tsheet.overlay\n\tsheet.description\n\tsheet.actions : {\"-r Delete\", Edit, Share}\n}\n\u003c/pre\u003e\n#### Listening to actions\nTo listen to different actions, you can use dot notation if it's a single word or brackets for any case\n\n- Dot notation \u003cbr\u003e `sheet.actions.Share.on Events...`\n- Square bracket notation \u003cbr\u003e `sheet.actions[\"-r Delete\"].on Events...`\n\n\u003cdiv id='status' /\u003e\n## Status Bar \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/statusbar.png)\n\nThe status bar allows users to see the connection, current time, and battery. \n\n####Properties\n- **carrier** *String* \u003cbr\u003e Carrier name ex. Verizon/Orange/FramerJS\n- **network** *String* \u003cbr\u003e network strength ex. 3G/LTE. Only will be showed when a carrier is set. By default, this is set to the wifi icon. Upon setting carrier, this will be set to LTE. \n- **battery** *Integer* \u003cbr\u003e Battery percentage - this will change the battery icon\n- **signal** *Integer(0 - 5)* \u003cbr\u003e Changes number of filled/unfilled dots. Zero will set the singal to \"No Network\"\n- **style** *String* \u003cbr\u003e Dark is black text. Light is white text.  \n- **clock24** *Boolean* \u003cbr\u003e By default, it's set to false, so it's a 12 hour clock with AM/PM. When set to true, the clock will cycle through 0-23 hours and removes AM/PM. \n\n#### Example\n\u003cpre\u003e\nstatusBar = new ios.StatusBar\n\tcarrier:\"Verizon\"\n\tnetwork:\"3G\"\n\tbattery:70\n\tstyle:\"light\"\n\u003c/pre\u003e\n\n####Schema\n\u003cpre\u003e\nstatusBar : {\n    statusBar.battery.percent\n    statusBar.battery.icon\n    statusBar.bluetooth\n    statusBar.time\n    statusBar.network\n    statusBar.carrier\n    statusBar.signal\n}\n\u003c/pre\u003e\n\n\u003cdiv id=\"nav\" /\u003e\n## Navigation Bar\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/navbar.png)\n\nThe navigation bar is made up of 3 elements, two actions and a title. \n\n####Properties\n- **right** *Layer or String or Bool* \u003cbr\u003e A layer or string will appear on the right side of the navigation bar. If you do not want a right action, set this to `false`.\n- **left** *Layer or String* \u003cbr\u003e A layer or string will appear on the left side of the navigation bar. You can add a \u003c to show a back arrow. \n- **title** *String or Tab* \u003cbr\u003e You can either pass a string that'll appear as the title on the Nav. You can also pass a tab object. If you pass a tab, the navigation bar's title will be the label of the tab. \n- **blur** *Boolean* \u003cbr\u003e If set to true, the bar will be slightly opaque and have a background blur applied. By default, this is set to true. If false, the bar will be solid white without a blur. \n\n#### Example\n\u003cpre\u003e\nnav = new ios.NavBar \n\tright:\"Share\"\n\tleft:\"\u003c Back\"\n\ttitle:\"Document\"\n\tblur:false\n\u003c/pre\u003e\n\n####Schema\n\u003cpre\u003e\nbar: {\n\tbar.right\n\tbar.left\n\tbar.title\n}\n\u003c/pre\u003e\n#### Listening to actions\nTo listen to different actions, you can use dot notation if it's a single word or brackets for any case\n\n- Dot notation \u003cbr\u003e `bar.right`\n- Square bracket notation \u003cbr\u003e `bar[\"right\"]`\n\n## Tab\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/tabs.png)\n\nTabs are light-weight objects that fit into the tab bar component. \n\n####Properties\n- **label** *String* \u003cbr\u003e name of tab\n- **icon** *SVG String* \u003cbr\u003e only accepts an SVG string  \n\n#### Example\n\u003cpre\u003e\nhome = new ios.Tab\n\tlabel:\"home\"\n\ticon:\"\u003c svg\u003e...\u003c /svg\u003e\"\n\u003c/pre\u003e\n\n####Schema\n\u003cpre\u003e\nhome: {\n\thome.label\n\thome.icon\n\thome.view\n}\n\u003c/pre\u003e \n####Adding contents to a tab\nCreating a tab will give you access to **tab.view**. In this case, you'll have `home.view`. When the home tab is active only those layers inside of `home.view` will be shown. \n\n`discovery = new Layer superLayer:home.view` \n\nThe discovery layer will only be shown when the home tab is active in the tab bar. \n\u003cdiv id='tabbar' /\u003e\n## Tab Bar\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/tabs.png)\n\nThe tab bar is comprised of multiple tabs. It'll handle switching of tabs and views.\n\n####Properties\n- **tabs** *Array of tabs* \u003cbr\u003e Add the tabs you made to this array\n- **activeColor** *String* \u003cbr\u003e This is the color that will be shown on the active tabs and label.\n- **inactiveColor** *String* \u003cbr\u003e the color that will be shown on inactive tabs and labels.\n\n\n#### Example\n\u003cpre\u003e\ntabBar = new ios.TabBar tabs:[home, discovery, profile], activeColor:\"#blue\", inactiveColor:\"grey\"\n\u003c/pre\u003e\n\n#### Listening to Tabs\nTab switching is automatically given, so there shouldn't necessarily be anything you need to do. If you'd like to do something additional when a user clicks a tab, you can reference your tab object. \n\n## Text \n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/text.png)\n\nA dynamic text object that'll automatically size for you. \n\n####Properties\n- **text** *String* \u003cbr\u003e Adds text by default to the field.\n- **fontSize** *Integer* \u003cbr\u003eSets font size in points.\n- **fontWeight** *Integer* \u003cbr\u003e Sets font weight.\n- **fontFamily** *String* \u003cbr\u003e Sets font family.\n- **lineHeight** *Integer* \u003cbr\u003e Sets line height in points. It's automatically done if left unset.\n- **textTransform** *String* \u003cbr\u003e Sets text-transform style property.\n- **opacity** *Integer* \u003cbr\u003e Sets opacity.\n- **width** *Integer* \u003cbr\u003e Sets width in points. \n- **height** *Integer* \u003cbr\u003e Sets height in points.\n- **constraints** *Constraints Object* \u003cbr\u003e Will set the text's constraints and run layout using [Dynamic Layout](#dynamic)\n\n####Example\n\u003cpre\u003e\n\ttext = new ios.Text\n\t\ttext:\"Try iOS Kit for Framer JS\"\n\t\tfontSize:21\n\t\tfontWeight:100\n\t\twidth:320\n\t\tconstraints:{align:\"center\"}\n\u003c/pre\u003e\n\n\u003cdiv id=\"view\" /\u003e\n## View \n\nA generic layer that you can set constraints at initiization. These constraints will be rendered immediately.\n\n#### Example\n\u003cpre\u003e\n\tview = new ios.View\n\t\tconstraints:\n\t\t\ttop:0\n\t\t\tleading:25\n\t\t\twidth:200\n\t\tbackgroundColor:'red'\n\u003c/pre\u003e\n\n\n\n\n\u003cdiv id=\"supporting\" /\u003e\n## Supporting Functions\nThese are a set of functions that were created to help provide functionality to various elements of this module. I opened them up, so if you by chance need any of these functions you can use them. \n\n#### ios.utils.update(layer, styleArray)\nThis was specifically intended for text objects. If the html or style of a text object is altered, the width/height of the object would be incorrect. With ios.update, you'll be able to pass your changes in while also resizing the text layer.\n\n\u003cpre\u003e\nios.update(headerOne, [text:\"Done!\"]\n\u003c/pre\u003e\n\n#### ios.utils.pt(int) \u0026 ios.utils.px(int)\nThese functions will automatically convert pixels -\u003e points and points -\u003e pixels.\n\u003cpre\u003e\nios.pt(6) # will return 3 points on an iPhone 6\nios.px(6) # will return 12 pixels on an iPhone 6\n\u003c/pre\u003e\n\n####ios.utils.clean(string)\nThis will remove any space or bracket HTML syntax from a string.\nios.clean(\"`Hi,\u0026nbsp;how\u0026nbsp;are\u0026nbsp;you?\u003cbr\u003e`\") returns \"Hi, how are you?\"\n\n####ios.utils.svg(svg path)\nThis does a series of things: it'll rewrite the SVG path into points, and it'll provide variables to set the layer's height and width.\n\u003cpre\u003e\nsvgObj = ios.svg(svgPath)\nsvgObj.svg = # is the new SVG path in points\nsvgObj.height = # is the value for the height of the layer\nsvgObj.width = # is the value for the width of the layer \n\u003c/pre\u003e\n\n####ios.utils.changeFill(layer, color)\nThis only works with layers with a SVG path. This will change the SVG fill to whatever color is passed.\n\n####ios.utils.capitalize(string)\nThis will capitalize only the first letter of the entire string.\n\u003cpre\u003e\nprint ios.capitalize(\"welcome to the party\") #returns \"Welcome to the party\"\n\u003c/pre\u003e\n\n####ios.utils.getTime()\nFetches the current time and returns a neatly organized time object with some humanization.\n\n\u003cpre\u003e\ntime = ios.getTime()\n\nprint time.month # prints \"April\"\nprint time.date # prints \"12\"\nprint time.day # prints \"Tuesday\"\nprint time.hours # prints \"10\"\nprint time.mins # prints \"33\"\nprint time.secs # prints \"1\"\n\u003c/pre\u003e\n\n####ios.utis.timeDelegate(layer, clock24)\nThis sets up a reoccuring task at the top of every minute to update whatever layer passed to the current time. If clock24 is set to true, it'll return 24-hour clock values. If set to false or omitted, it'll return 12-hour clock values. \n\n####ios.utils.timeFormatter(timeObj, clock24)\nThis will create a time string for screen display. It'll return a hours-minutes string based on the clock24 object. \n\n#### ios.utils.color(colorString)\nThis changes the color words to be set to iOS default colors in place of web color defaults. If it's a hexcode, it'll set the hexcode. If invalid, it'll return a grey hexcode.\n\nSupports - `red, blue, pink, grey/gray, black, white, orange, green, light blue/light-blue, yellow`\n\n\u003cpre\u003e\nios.utils.color(\"light-blue) # returns \"#54C7FC\"\n\u003c/pre\u003e\n\n#### ios.utils.autoColor(colorObject)\nThis will decide whether to return black or white based on the contrast of the color passed through the color object. So an easy example would be: if you pass white it'll return black. If you pass black, it'll return white. It'll work with any color.\n\n\u003cpre\u003e\nios.utils.autoColor(ios.utils.color(\"yellow\")) # returns \"#000\"\nios.utils.autoColor(ios.utils.color(\"blue\")) # returns \"#FFF\"\n\u003c/pre\u003e\n\n#### ios.utils.bgBlur(layer)\nAdd background blur to any layer using -webkit-backdrop-filter. Make sure that whatever layer you use is using rgba with an alpha set below 1.\n\n\u003cdiv id=\"contribute\" /\u003e\n## How to contribute\nContributions are welcome! If you'd like to add any new components/any new logic, please follow the guidelines below: \n\n#### For components\nIf you'd like to add a component, please start a new coffee file, unless it's a directly related to another component similar to Tab \u0026 TabBar. Please use this boilerplate to help make the components consistent. \n\n\u003cpre\u003e \n## Allows you to use all the ios kit components \u0026 logic\nios = require 'ios-kit'\n\nexports.defaults = {\n\t## Add any thing a user can set in here. For example:\n\t\tbackgroundColor: \"blue\"\n\t\t}\n\n## Creates a property list \nexports.defaults.props = Object.keys(exports.defaults)\n\t\n\t\nexports.create = (array) -\u003e\n\t## Creates a setup object that has defaults + any custom props.\n\tsetup = ios.utils.setupComponent(array, exports.defaults)\n\t\n\tprint setup.backgroundColor ## prints blue\u003c/pre\u003e\n\t\n\n\t\n#### For logic\nPlease add any layout logic to the layout file. Otherwise, please add the logic to `ios-kit-utils.coffee`. \n\t\n#### For data\nPlease add any referencable data object to `ios-kit-library.coffee`. You can either reference it with `ios.library[\"object\"]` or with `ios.assets[\"object\"]`. Whatever works best for you.\n\t\n#### For help\nFeel free to hit me up on [Twitter](https://twitter.com/kvyn_).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk-vyn%2Fframer-ios-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk-vyn%2Fframer-ios-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk-vyn%2Fframer-ios-kit/lists"}