Skip to content

Instantly share code, notes, and snippets.

@dabbott

dabbott/Card.component

Last active April 1, 2019 03:05
Show Gist options
  • Save dabbott/383d6d464ed2055a5b813989188ba8e2 to your computer and use it in GitHub Desktop.
Save dabbott/383d6d464ed2055a5b813989188ba8e2 to your computer and use it in GitHub Desktop.
Download ZIP
Card Component (XML)
Raw
Card.component
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<devices>
<device id="iPhone SE" heightMode="At Least">
<device id="iPhone 8" heightMode="At Least">
<device id="iPhone XS Max" heightMode="At Least">
</devices>
<examples>
<example id="Headline_only" name="Headline only">
<body />
<headline>Headline Only</headline>
<image>https://picsum.photos/600/600?image=20</image>
</example>
<example id="All_content" name="All content">
<body>Located two hours south of Sydney in the Souther Highlands of New South Wales, this destination is truly one you won't want to miss.</body>
<headline>Kangaroo Valley Safari</headline>
<image>https://picsum.photos/600/600?image=10</image>
</example>
<examples>
<logic>
<node type="AssignExpr">
<assignee>
<id>layers</id>
<id>Image</id>
<id>image</id>
</assignee>
<content>
<id>parameters</id>
<id>image</id>
</content>
</node>
<node type="AssignExpr">
<assignee>
<id>layers</id>
<id>Headline</id>
<id>text</id>
</assignee>
<content>
<id>parameters</id>
<id>headline</id>
</content>
</node>
<node type="IfExpr">
<body>
<node type="AssignExpr">
<assignee>
<id>layers</id>
<id>Body</id>
<id>text</id>
</assignee>
<content>
<id>item</id>
</content>
</node>
<node type="AssignExpr">
<assignee>
<id>layers</id>
<id>Body</id>
<id>visible</id>
</assignee>
<id type="LitExpr">
<value>
<data>true</data>
<type>Boolean</type>
</value>
</id>
</node>
</body>
<condition type="VarDeclExpr">
<content>
<id>parameters</id>
<id>body</id>
</content>
<id>item</id>
</condition>
</node>
</logic>
<params>
<image type="URL" />
<headline type="String" />
<body type="String?">
<defaultValue>
<data type="String?" case="Some">
<data tag="None" />
</data>
</defaultValue>
</body>
</params>
<layers>
<lona:View
lona:id="View"
accessibilityElements="Headline"
accessibilityElements="Body"
accessibilityType="container"
alignSelf="stretch"
>
<lona:Image
lona:id="Image"
alignSelf="stretch"
height="200"
>
<lona:View
lona:id="Description"
alignSelf="stretch"
paddingBottom="16"
paddingLeft="16"
paddingRight="16"
paddingTop="20"
>
<lona:Text
lona:id="Headline"
accessibilityRole="header"
accessibilityType="element"
alignSelf="stretch"
font="headline"
text="Headline"
/>
<lona:Text
lona:id="Body"
lona:visible="false"
accessibilityType="element"
alignSelf="stretch"
font="body2"
numberOfLines="2"
text="Body"
/>
</lona:View>
</lona:View>
</layers>
</root>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment