Stack

Examples

Basic

The Stack component can be used to evenly space content.

<template>
<article>
  <section>
    <veui-radio-button-group
      v-model="gap"
      ui="s"
      :items="gaps"
    />
  </section>
  <veui-stack :gap="gap">
    <veui-button ui="primary">
      Submit
    </veui-button>
    <veui-button ui="normal">
      Save
    </veui-button>
    <veui-button ui="text">
      Cancel
    </veui-button>
  </veui-stack>
</article>
</template>

<script>
import { RadioButtonGroup, Stack, Button } from 'veui'

export default {
  components: {
    'veui-radio-button-group': RadioButtonGroup,
    'veui-stack': Stack,
    'veui-button': Button
  },
  data () {
    return {
      gaps: [
        { label: '/', value: null },
        { label: 'XXS', value: 'xxs' },
        { label: 'XS', value: 'xs' },
        { label: 'S', value: 's' },
        { label: 'M', value: 'm' },
        { label: 'L', value: 'l' },
        { label: 'XL', value: 'xl' },
        { label: 'XXL', value: 'xxl' }
      ],
      gap: null
    }
  }
}
</script>

<style scoped>
section {
  margin-bottom: 20px;
}
</style>

Vertical

Setting the direction to 'column' can make the stacked items vertically aligned.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-stack
    direction="column"
    gap="xs"
  >
    <div class="item"/>
    <div class="item"/>
    <div class="item"/>
  </veui-stack>
</article>
</template>

<script>
import { Stack } from 'veui'

export default {
  components: {
    'veui-stack': Stack
  }
}
</script>

<style scoped>
article {
  width: 400px;
}

.item {
  height: 60px;
  background-color: gold;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
</style>

Alignment

Setting the align property can specify the vertical alignment of stacked items in the direction corresponding to direction.

start

center

end

stretch

Edit this demo on GitHubEdit

<template>
<article>
  <veui-stack gap="l">
    <veui-stack
      class="stack"
      align="start"
      gap="xs"
    >
      <div class="item">
        start
      </div>
      <div class="item">
        start
      </div>
      <div class="item">
        start
      </div>
    </veui-stack>
    <veui-stack
      class="stack"
      align="center"
      gap="xs"
    >
      <div class="item">
        center
      </div>
      <div class="item">
        center
      </div>
      <div class="item">
        center
      </div>
    </veui-stack>
    <veui-stack
      class="stack"
      align="end"
      gap="xs"
    >
      <div class="item">
        end
      </div>
      <div class="item">
        end
      </div>
      <div class="item">
        end
      </div>
    </veui-stack>
    <veui-stack
      class="stack"
      align="stretch"
      gap="xs"
    >
      <div class="item">
        stretch
      </div>
      <div class="item">
        stretch
      </div>
      <div class="item">
        stretch
      </div>
    </veui-stack>
  </veui-stack>
</article>
</template>

<script>
import { Stack } from 'veui'

export default {
  components: {
    'veui-stack': Stack
  }
}
</script>

<style scoped>

.item {
  display: flex;
  min-width: 48px;
  align-items: center;
  justify-content: center;
  background-color: gold;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item:nth-child(1) {
  min-height: 40px;
}

.item:nth-child(2) {
  min-height: 80px;
}

.item:nth-child(3) {
  min-height: 60px;
}

.stack {
  padding: 2px;
  border: 1px dotted goldenrod;
}
</style>

Distribution

Setting the justify property can specify the distribution of stacked items in the direction corresponding to direction.

start

center

end

space-between

Edit this demo on GitHubEdit

<template>
<article>
  <veui-stack
    gap="l"
    wrap
  >
    <veui-stack
      class="stack"
      justify="start"
      gap="xs"
    >
      <div class="item">
        start
      </div>
      <div class="item">
        start
      </div>
      <div class="item">
        start
      </div>
    </veui-stack>
    <veui-stack
      class="stack"
      justify="center"
      gap="xs"
    >
      <div class="item">
        center
      </div>
      <div class="item">
        center
      </div>
      <div class="item">
        center
      </div>
    </veui-stack>
    <veui-stack
      class="stack"
      justify="end"
      gap="xs"
    >
      <div class="item">
        end
      </div>
      <div class="item">
        end
      </div>
      <div class="item">
        end
      </div>
    </veui-stack>
    <veui-stack
      class="stack"
      justify="space-between"
      gap="xs"
    >
      <div class="item column">
        <span>space-</span><span>between</span>
      </div>
      <div class="item column">
        <span>space-</span><span>between</span>
      </div>
      <div class="item column">
        <span>space-</span><span>between</span>
      </div>
    </veui-stack>
  </veui-stack>
</article>
</template>

<script>
import { Stack } from 'veui'

export default {
  components: {
    'veui-stack': Stack
  }
}
</script>

<style scoped>

.item {
  display: flex;
  min-width: 60px;
  align-items: center;
  justify-content: center;
  background-color: gold;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.item:nth-child(1) {
  min-height: 40px;
}

.item:nth-child(2) {
  min-height: 80px;
}

.item:nth-child(3) {
  min-height: 60px;
}

.column {
  flex-direction: column;
}

.stack {
  width: 35%;
  padding: 2px;
  border: 1px dotted goldenrod;
}
</style>

Wrapping

Setting the wrap property allows stacked items to wrap.

Chase

Rocky

Skye

Marshall

Rubble

Zuma

Everest

Tracker

Edit this demo on GitHubEdit

<template>
<article>
  <veui-stack
    class="stack"
    gap="s"
    wrap
  >
    <veui-tag status="info">
      Chase
    </veui-tag>
    <veui-tag status="success">
      Rocky
    </veui-tag>
    <veui-tag status="warning">
      Skye
    </veui-tag>
    <veui-tag status="error">
      Marshall
    </veui-tag>
    <veui-tag status="info">
      Rubble
    </veui-tag>
    <veui-tag status="success">
      Zuma
    </veui-tag>
    <veui-tag status="warning">
      Everest
    </veui-tag>
    <veui-tag status="error">
      Tracker
    </veui-tag>
  </veui-stack>
</article>
</template>

<script>
import { Stack, Tag } from 'veui'

export default {
  components: {
    'veui-stack': Stack,
    'veui-tag': Tag
  }
}
</script>

<style scoped>
.stack {
  width: 425px;
  padding: 2px;
  border: 1px dotted goldenrod;
}
</style>

API

Props

Name Type Default Description

direction 'row' | 'column' 'row' The arrangement direction of stacked items.

wrap boolean false Whether to wrap.

inline boolean false Whether to render inline.

align

string

The vertical alignment of stacked items in the direction corresponding to direction. When direction is row, the default is center. When direction is column, the default is stretch.

Value	Description
`start`	Align to the top.
`end`	Align to the bottom.
`center`	Center alignment.
`stretch`	Stretch alignment.

justify

string

The distribution of stacked items in the direction corresponding to direction.

Value	Description
`start`	Distribute to the left.
`end`	Distribute to the right.
`center`	Center distribution.
`space-between`	Distribute along both ends.

gap string | number - The spacing between stacked items. It can be set as a string or a number. When set as a string, the optional values are xxs/xs/s/m/l/xl/xxl, and when set as a number, the unit is px.

Slots

Name	Description
`default`	Stacked item content.

Edit this page on GitHubEdit