Skip to content

Commit

Permalink
5-styling
Browse files Browse the repository at this point in the history
Signed-off-by: Julio Jimenez <julio@julioj.com>
  • Loading branch information
juliojimenez committed Apr 15, 2024
1 parent c1cdd57 commit 1b5487d
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ Each example runs on a different port. Run multiple examples simultaneously and
- [Lists](./chapter-11/2-ui-elements-lists)
- [Images](./chapter-11/3-ui-elements-images)
- [Inputs](./chapter-11/4-inputs)
- [Styling](./chapter-11/5-styling)

## Support

Expand Down
64 changes: 64 additions & 0 deletions chapter-11/5-styling/index.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<doc xmlns="https://hyperview.org/hyperview">
<screen>
<styles>
<style class="body" flex="1" flexDirection="column" />
<style class="header" borderBottomWidth="1" borderBottomColor="#ccc" />
<style class="main" margin="24" />
<style class="h1" fontSize="32" />
<style class="info" color="blue" />
</styles>
<body style="body">
<header style="header">
<text style="info">My first app</text>
</header>
<view style="main">
<text style="h1 info">Hello World!</text>
<list>
<item key="item1">
<text>My first item</text>
</item>
<item key="item2">
<text>My second item</text>
</item>
</list>
<section-list>
<section>
<section-title>
<text>Appetizers</text>
</section-title>
<item key="1">
<text>French Fries</text>
</item>
<item key="2">
<text>Onion Rings</text>
</item>
</section>
<section>
<section-title>
<text>Entrees</text>
</section-title>
<item key="3">
<text>Burger</text>
</item>
</section>
</section-list>
<image source="/profiles/1.jpg" style="avatar" />
<image source="./logo.png" style="logo" />
<text-field
name="first_name"
style="input"
value="Adam"
placeholder="First name"
/>
<select-single name="choice">
<option value="option1">
<text>Option 1</text>
</option>
<option value="option2">
<text>Option 2</text>
</option>
</select-single>
</view>
</body>
</screen>
</doc>

0 comments on commit 1b5487d

Please sign in to comment.