Let’s add a Fake Keyboard component from the Layer Library. Rename this copy to Email Field and move it into the the Email Field group. Now lets do the same for an Email Text Field, select the Name Field component then copy and paste. To do this, double click on the layer’s name, type Name Field and press Return. The first Text Field is ready to use, lets rename the layer to Name Field so later we can identify it’s inputs and outputs in the patch editor. To set the placeholder text, look for the Placeholder Text input further down the inspector, set it to required. To view the Placeholder, we need to clear the Text Input property – select the Initial Text input and remove the content. Once text is entered, this placeholder message will disappear. Placeholder text guides a user to enter the correct information. Set the text size to 18, then set the Color by using the color picker to select the darker blue color from the Origami logo. Our container group is 322 wide, but our component has an X position of 72, so the Text Field should be 72 narrower than the group. In order to make sure the Text Field doesn’t go over the edge of the screen, we need to reduce the width of the Text Field. Select the Text Field layer in the layer list and change the Anchor property in the Layer Inspector to Center Left. To start we want the Text Field to be left aligned and inset to the right so that it’s not overlapping the adjacent Text layer. Now let’s change the appearance of the Text Field by adjusting the properties in the layer inspector to fit the design. A Text Field added to an iOS device will use iOS properties, adding to an Android device will use Material Design properties Type to find the Text Field component and click Place Layer to add it to the layer list.ĭrag the Text Field layer down the layer list into the Register Screen, then inside of the Content group and finally inside the the Name Field group. To insert a Text Field component, open the Layer Library by pressing the + icon in the toolbar. We want to place a Text Field component in both of the text field groups. Inside this screen component there are groups for the header, the form content, which contains a group for each Text Field, and the submit button. To start we’re going to concentrate on the Register Screen. The starting tutorial files have two Screen layers with assets in place. When connected or exported to Origami Live, you can also use the device’s native keyboard. As you interact with this component, you’ll be able to use your computer’s keyboard to input text. The Text Field component allows Origami to capture text input. We’ll walkthrough the Text Field component by showing how to customize it’s appearance, how use the component outputs, and how to display a Fake Keyboard to simulate a native keyboard in Origami Studio.ĭownload the tutorial start files to follow along as we rebuild this prototype. Once all of the information has been entered we’ll reuse it to display a personalized confirmation screen. The contents of this article are entirely independent and solely reflect the editorial opinion of Creative Bloq.Use two Text Field components to build a prototype where you can enter information to sign up for a speculative Origami Studio newsletter.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |