Tiles

Tiles are a convenient way to display homogeneous content. They are often used in grid views. Children are rendered vertically in tiles, one below the other.

Tile

Tile example

JSX Declaration

<Tile styleName="small clear">
  <Image
    styleName="medium-square"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-12.png' }}
  />
  <View styleName="content">
    <Subtitle numberOfLines={2}>When The Morning Dawns - DJ Silver Sample Album</Subtitle>
    <Caption>20 hours ago</Caption>
  </View>
</Tile>

Tile + Icon

JSX Declaration

<Tile styleName="small clear">
  <Image
    styleName="medium-square"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-2.png' }}
  >
    <Overlay styleName="rounded-small">
      <Icon name="play" />
    </Overlay>
  </Image>
  <View styleName="content">
    <Subtitle numberOfLines={2}>When The Morning Dawns - DJ Silver Sample Album</Subtitle>
    <Caption>20 hours ago</Caption>
  </View>
</Tile>

Large (featured) Tile

Large (featured) Tile example

JSX Declaration

<Image
  styleName="featured"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-4.png' }}
>
  <Tile>
    <Title styleName="md-gutter-bottom">MIKE PATTON TEAMING WITH JOHN KAADA FOR COLLAB ALBUM BACTERIA CULT</Title>
    <Caption>Sophia Jackson        21 hours ago</Caption>
  </Tile>
</Image>

Large (featured) tile + Button + Sale tag

JSX Declaration

<Image
  styleName="featured"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-11.png' }}
>
  <Tile>
    <Overlay><Heading>-20%</Heading></Overlay>
    <Title styleName="md-gutter-top">COOL BLACK AND WHITE STYLISH WATCHES</Title>
    <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
    <Heading>$250.00</Heading>
    <Button styleName="md-gutter-top"><Icon name="cart" /><Text>ADD TO BASKET</Text></Button>
  </Tile>
</Image>

Large (featured) tile + Button

JSX Declaration

<Image
  styleName="featured"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-9.png' }}
>
  <Tile>
    <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
    <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
    <Heading>99.99</Heading>
    <Button styleName="md-gutter-top"><Text>CLAIM COUPON</Text></Button>
  </Tile>
</Image>

Large list item

Large list item Tile example

JSX Declaration

<Tile>
  <Image
    styleName="large-banner"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-5.png' }}
  />
  <View styleName="content">
    <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
    <View styleName="horizontal space-between">
      <Caption>1 hour ago</Caption>
      <Caption>15:34</Caption>
    </View>
  </View>
</Tile>

Large list item + Icon + Timestamp

JSX Declaration

<Tile>
  <Image
    styleName="large-banner"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-7.png' }}
  >
    <Overlay styleName="rounded-small">
      <Icon name="play" />
    </Overlay>
  </Image>
  <View styleName="content">
    <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
    <View styleName="horizontal space-between">
      <Caption>1 hour ago</Caption>
      <Caption>15:34</Caption>
    </View>
  </View>
</Tile>

Large list item + Price tag

Large list item + Price tag Tile example

JSX Declaration

<Image
  styleName="large-banner"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png' }}
>
  <Tile>
    <Title styleName="md-gutter-bottom">SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE</Title>
    <Overlay styleName="solid-bright">
      <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
    </Overlay>
  </Tile>
</Image>

Large list item + Action icon

JSX Declaration

<Image
  styleName="large-banner"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png' }}
>
  <Tile>
    <View styleName="actions">
      <Button styleName="tight clear"><Icon name="add-to-favorites" /></Button>
    </View>
    <Title>HOW TO MAINTAIN YOUR MENTAL HEALTH IN 2016</Title>
    <Caption>6557 Americo Hills Apt. 118</Caption>
  </Tile>
</Image>

Detail square + Price tag

Detail square + Price tag Tile example

JSX Declaration

<Image
  styleName="large-square"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png' }}
>
  <Tile>
    <Title styleName="md-gutter-bottom">SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE</Title>
    <Overlay styleName="solid-bright">
      <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
    </Overlay>
  </Tile>
</Image>

Detail square + Button

JSX Declaration

<Image
  styleName="large-square"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-9.png' }}
>
  <Tile>
    <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
    <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
    <Heading>99.99</Heading>
    <Button styleName="md-gutter-top"><Text>CLAIM COUPON</Text></Button>
  </Tile>
</Image>

Detail square + Button + Sale tag

JSX Declaration

<Image
  styleName="large-square"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-11.png' }}
>
  <Tile>
    <Overlay><Heading>-20%</Heading></Overlay>
    <Title styleName="md-gutter-top">COOL BLACK AND WHITE STYLISH WATCHES</Title>
    <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
    <Heading>$250.00</Heading>
    <Button styleName="md-gutter-top"><Icon name="cart" /><Text>ADD TO BASKET</Text></Button>
  </Tile>
</Image>

Detail large + Price tag

Detail large + Price tag Tile example

JSX Declaration

<Image
  styleName="large-portrait"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png' }}
>
  <Tile>
    <Title styleName="md-gutter-bottom">SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE</Title>
    <Overlay styleName="solid-bright">
      <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
    </Overlay>
  </Tile>
</Image>

Detail large + Button

JSX Declaration

<Image
  styleName="large-portrait"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-9.png' }}
>
  <Tile>
    <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
    <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
    <Heading>99.99</Heading>
    <Button styleName="md-gutter-top"><Text>CLAIM COUPON</Text></Button>
  </Tile>
</Image>

Detail large + Button + Sale tag

JSX Declaration

<Image
  styleName="large-portrait"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-11.png' }}
>
  <Tile>
    <Overlay><Heading>-20%</Heading></Overlay>
    <Title styleName="md-gutter-top">COOL BLACK AND WHITE STYLISH WATCHES</Title>
    <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
    <Heading>$250.00</Heading>
    <Button styleName="md-gutter-top"><Icon name="cart" /><Text>ADD TO BASKET</Text></Button>
  </Tile>
</Image>

Style Names

text-centric: centers content within container and applies standard margins
clear: sets the clear background color, as defined in Theme (usually transparent)
small: sets the fixed width to 145px and reduces margins and paddings
Nested View component can use the following Style name:
- content: applies the standard margins around the content in View