VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Stack 堆叠容器

示例

基本

Stack 组件可用于等间距区隔内容。

可以使用 gap 属性来设置堆叠项的间距。

在 GitHub 上编辑此示例编辑
<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>

纵向

设置 direction 为 'column' 可让堆叠项纵向排列。

在 GitHub 上编辑此示例编辑
<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>

对齐

设置 align 可指定堆叠项在垂直于 direction 对应方向上的对齐方式。

start
start
start
center
center
center
end
end
end
stretch
stretch
stretch
在 GitHub 上编辑此示例编辑
<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>

分布

设置 justify 可指定堆叠项在 direction 对应方向上的分布方式。

start
start
start
center
center
center
end
end
end
space-between
space-between
space-between
在 GitHub 上编辑此示例编辑
<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>

换行

设置 wrap 可让堆叠项允许换行。

Chase
Rocky
Skye
Marshall
Rubble
Zuma
Everest
Tracker
在 GitHub 上编辑此示例编辑
<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

属性

名称类型默认值描述
direction'row' | 'column''row'堆叠项的排列方向。
wrapbooleanfalse是否换行。
inlinebooleanfalse是否在行内渲染。
alignstring-

堆叠项在垂直于 direction 对应方向上的对齐方式。当 direction 为 row 时，默认为 center；当 direction 为 column 时，默认为 stretch。

值描述
start顶部对齐。
end底部对齐。
center居中对齐。
stretch拉伸对齐。
justifystring-

堆叠项在 direction 对应方向上的分布方式。

值描述
start靠左分布。
end靠右分布。
center居中分布。
space-between两端分布。
gapstring | number-堆叠项之间的间距。可以设置为字符串或数字，字符串时可选值为 xxs / xs / s / m / l / xl / xxl，数字时单位为 px。

插槽

名称描述
default堆叠项内容。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024