Skip to content

Latest commit

聽

History

History
91 lines (75 loc) 路 2.04 KB

README.md

File metadata and controls

91 lines (75 loc) 路 2.04 KB
Raw
title components
Command
Command

Command

Command bars provide users with easy access to the most common tasks within the app.

Default

<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
  <Command acrylic>
    <CommandButton icon="Back" />
    <CommandButton icon="Play" />
    <CommandButton icon="Forward" />

    <Command.Content>
      Now Playing...
    </Command.Content>

    <Command.Secondary>
      <CommandButton>Like</CommandButton>
      <CommandButton>Dislike</CommandButton>
    </Command.Secondary>
  </Command>
</Box>

reveal

<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
  <Command reveal>
    <CommandButton icon="Back" />
    <CommandButton icon="Play" />
    <CommandButton icon="Forward" />

    <Command.Content>
      Now Playing...
    </Command.Content>

    <Command.Secondary>
      <CommandButton>Like</CommandButton>
      <CommandButton>Dislike</CommandButton>
    </Command.Secondary>
  </Command>
</Box>

With label

<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
  <Command acrylic>
    <CommandButton icon="Back">
      Back
    </CommandButton>
    <CommandButton icon="Play">
      Play
    </CommandButton>
    <CommandButton icon="Forward">
      Forward
    </CommandButton>

    <Command.Content>
      Now Playing...
    </Command.Content>

    <Command.Secondary>
      <CommandButton>Like</CommandButton>
      <CommandButton>Dislike</CommandButton>
    </Command.Secondary>
  </Command>
</Box>

Without Content and Secondary

<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
  <Box backgroundColor="none" display="flex" justifyContent="center">
    <Command acrylic>
      <CommandButton icon="Back" />
      <CommandButton icon="Play" />
      <CommandButton icon="Forward" />
    </Command>
  </Box>
</Box>