Shopify Post-Purchase Extensionでレジ前販売を実装する　コンポーネント紹介編 ② 〜レイアウト〜

<Layout sizes={[1, 0.2, 0.8, 1]} maxInlineSize={1200} media={[
  {
    viewportSize:"small",
    maxInlineSize: 768,
    sizes: [1,1,1,1],
  }
]}>
  <View blockPadding="base">
    <TextField label="Header" />
  </View>
  <View blockPadding="base" inlinePadding='base'>
    <BlockStack>
      <Heading>Sidebar</Heading>
      <Text>Menu1</Text>
      <Text>Menu2</Text>
      <Text>Menu3</Text>
    </BlockStack>
  </View>
  <View blockPadding="base" inlinePadding='loose'>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
  </View>
  <View blockPadding="base">
    <TextField label="Footer" />
  </View>
</Layout>

<BlockStack>
  <View>
    <Button>Button</Button>
  </View>
</BlockStack>
<BlockStack>
  <Button>Button</Button>
</BlockStack>

<InlineStack>
  <View inlinePadding='loose' blockPadding='loose'>
    <BlockStack>
      <Heading>Heading </Heading>
      <Separator />
      <Text>Short Text. </Text>
      <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
      <Button>Button</Button>
    </BlockStack>
  </View>
  <View inlinePadding='loose' blockPadding='loose'>
    <BlockStack>
      <Heading>Heading </Heading>
      <Separator />
      <Text>Short Text. </Text>
      <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
      <Button>Button</Button>
    </BlockStack>
  </View>
</InlineStack>

<Tiles maxPerLine={4}>
  <Heading>Heading</Heading>
  <Text>Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 </Text>
  <BlockStack>
    <Text>Tile 3.1 </Text>
    <Text>Tile 3.2 </Text>
    <Button>Button</Button>
  </BlockStack>
  <Tiles>
    <Text>Tile 4-1</Text>
    <Text>Tile 4-2</Text>
  </Tiles>
  <Image source="https://www.pakutaso.com/shared/img/thumb/KP_03_TP_V.jpg" />
  <Text>Tile 6</Text>
</Tiles>

<Bookend trailing spacing='loose'>
  <TextField label="trailing" />
  <Button >Next</Button>
</Bookend>
<Separator width="thick" />
<Bookend leading spacing='tight'>
  <TextField label="leading" />
  <Text>Some Text</Text>
  <Button plain>Agree</Button>
  <Button plain >Decline</Button>
</Bookend>
<BlockStack alignment='trailing'>
  <Button>Button3</Button>
</BlockStack>

<BlockStack>
  <Separator />
  <Heading>Heading </Heading>
  <Text>Short Text. </Text>
  <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
  <Button>Button</Button>
</BlockStack>

<BlockStack alignment='center' spacing='loose'>
  <Separator />
  <Heading>Heading </Heading>
  <Text>Short Text. </Text>
  <Text>Short Text 2. </Text>
</BlockStack>
<BlockStack alignment='trailing' spacing='tight'>
  <Button>Button</Button>
  <Text>Short Text 3. </Text>
  <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
  <Text>Short Text 4. </Text>
</BlockStack>

<InlineStack>
  <Separator />
  <Heading>Heading</Heading>
  <Text>Short Text. </Text>
  <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
  <Button>Button</Button>
</InlineStack>