Learn how to add web links to a page. Add navigation links to the next and previous page or any page in the playground.
- [Instructor] You formatted the first page of the menu board, which has pizzas on it. In MenuBoard, we have not one but two pages, the second with the desserts. How does the user get to the desserts from the live view? There's a special markup for that and other kinds of links. Go back to Raw Markup. I'd like a button that sends me to the desserts menu. Here's where we use a link. A link markup starts like a single line markup. Slide down to the bottom of the code.
Add single line markup. A navigation link is two square brackets and two round brackets. In the square brackets, you put the label you want to display. For example, Desserts Menu. In the round brackets, you add the link location. We use a special location called @next, which takes us to the next page. Change to Rendered Markup.
Head to the bottom of the page. You'll see the blue link, click it, and you move to the Desserts page. Go back to Raw Markup. Add the following to the top of the page: //:#, so we get a title, Desserts Menu, //: The menu is not just for pizza but for desserts or any other selection.
You can change the content easily. Under the new content, add another link, this time using the previous location: //: space Previous @previous. The Previous will take you back one page.
Open the navigator panel. Next means navigation will move down the list of pages, as shown in the navigator. When I say Previous navigation will move up the list of pages. If navigation reaches the top or bottom, it ignores going over into a nonexistent page. What if you want a specific page? Then you place the name of the page in the parentheses. So to go to Pizza I would do this: Pizza, Pizza.
Change the rendered markup. You'll see the two links, but there's no line between them and the paragraph text. Links are in-line markup, and do not add new lines. Put a blank markup line between the paragraphs and the links. Being in-line you could also put non-link text around your links. So go back to the Raw Markup. Change the markup by adding a line, then adding a little extra text to the links.
Go to the Previous or Pizza page. Show the Rendered Markup. Now you have a line with two links. Click the Previous link and you're back on the Pizza page. Click Desserts Menu at the bottom of the code and you go back to Desserts. Click Pizza and you're back on the Pizza page. There's one more use of links referring to outside URLs.
Go to Raw Markup, scroll to the bottom of the Pizza page, there's two steps for an outside link. First you define the link, adding an extra line for a new line. And with no space between the colon and the brackets and then a : and then your URL. This will show nothing in Rendered Markup.
Any place in the Playground after this definition you can refer to this link by using the label and square brackets. Add this under the definition. Show the Rendered Markup. At the bottom of the code you'll find an active link, clicking it takes you to the makeAppPie website. Links are very useful for navigation and for going to external links if you want to refer to documentation or give citations of referenced work.
When working with a link be careful with white space. Add a blank line if you want your link on a separate line and avoid spaces between the square and round brackets in a navigation link.
- Comparing iPad and Xcode playgrounds
- Creating and testing Swift classes and code in iPad and Xcode playgrounds
- Prototyping code
- Debugging and testing with Quick Look live views
- Using markup to interactively document code and create educational lessons
- Compiling code into playground books