Light
Solid

AListMenu

AListMenu is a selectable vertical menu. Pass a flat menu array of items, or an object keyed by section header for grouped menus. Bind the selected value with v-model. The package also registers AListMenuItem.

Import

import { ListMenu } from '@any-design/anyui/vue';
// React:  import { ListMenu } from '@any-design/anyui/react';
// Svelte: import { ListMenu } from '@any-design/anyui/svelte';

Basic usage

<template>
  <div class="list-menu-preview">
    <AListMenu v-model="active" :menu="groups" selected-variant="solid" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref('profile');
const groups = {
  Account: [
    { label: 'Profile', value: 'profile' },
    { label: 'Security', value: 'security' },
  ],
  Preferences: [
    { label: 'Theme', value: 'theme' },
    { label: 'Language', value: 'language' },
  ],
};
</script>

<style scoped>
.list-menu-preview {
  max-width: 280px;
}
</style>

Examples

Grouped menu

Pass an object whose keys are section headers and values are item arrays.

<template>
  <AListMenu v-model="active" :menu="groups" />
</template>

<script setup>
import { ref } from 'vue';
const active = ref('profile');
const groups = {
  Account: [
    { label: 'Profile', value: 'profile' },
    { label: 'Security', value: 'security' },
  ],
  Preferences: [
    { label: 'Theme', value: 'theme' },
    { label: 'Language', value: 'language' },
  ],
};
</script>

Plain string items

Items can be plain strings — their value defaults to the label.

<template>
  <AListMenu v-model="active" :menu="['Vue', 'React', 'Svelte']" />
</template>

<script setup>
import { ref } from 'vue';
const active = ref('Vue');
</script>

Solid selected state

Use selectedVariant="solid" when the selected item should keep the gradient, filled, tactile style.

<template>
  <AListMenu v-model="active" :menu="groups" selected-variant="solid" />
</template>

Props

Prop Type Default Description
modelValue String | Number undefined Selected value (v-model).
menu Array | Object undefined Flat array of items, or a grouped object keyed by header.
selectedVariant 'soft' | 'solid' 'soft' Visual style for the selected item. Use solid for the gradient filled state.

Events

Event Payload Description
update:modelValue String | Number Selection change.

Notes

The package also registers AListMenuItem (exported as ListMenuItem).

AListMenu

AListMenu 是可选中的纵向菜单。传入扁平的 menu 数组，或以分组标题为键的对象。用 v-model 绑定已选值。该包还注册了 AListMenuItem。

引入

import { ListMenu } from '@any-design/anyui/vue';
// React:  import { ListMenu } from '@any-design/anyui/react';
// Svelte: import { ListMenu } from '@any-design/anyui/svelte';

基础用法

<template>
  <div class="list-menu-preview">
    <AListMenu v-model="active" :menu="groups" selected-variant="solid" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref('profile');
const groups = {
  账户: [
    { label: '资料', value: 'profile' },
    { label: '安全', value: 'security' },
  ],
  偏好: [
    { label: '主题', value: 'theme' },
    { label: '语言', value: 'language' },
  ],
};
</script>

<style scoped>
.list-menu-preview {
  max-width: 280px;
}
</style>

示例

分组菜单

传入以分组标题为键、以选项数组为值的对象。

<template>
  <AListMenu v-model="active" :menu="groups" />
</template>

<script setup>
import { ref } from 'vue';
const active = ref('profile');
const groups = {
  账户: [
    { label: '资料', value: 'profile' },
    { label: '安全', value: 'security' },
  ],
  偏好: [
    { label: '主题', value: 'theme' },
    { label: '语言', value: 'language' },
  ],
};
</script>

纯字符串项

选项可以是纯字符串，其 value 默认为标签文字。

<template>
  <AListMenu v-model="active" :menu="['Vue', 'React', 'Svelte']" />
</template>

<script setup>
import { ref } from 'vue';
const active = ref('Vue');
</script>

实色选中态

当选中项需要保留渐变实色、有立体感的历史样式时，使用 selectedVariant="solid"。

<template>
  <AListMenu v-model="active" :menu="groups" selected-variant="solid" />
</template>

属性

属性 类型 默认值 说明
modelValue String | Number undefined 已选值（v-model）。
menu Array | Object undefined 扁平数组，或按分组标题为键的对象。
selectedVariant 'soft' | 'solid' 'soft' 选中项的视觉样式。使用 solid 显示渐变实色选中态。

事件

事件 载荷 说明
update:modelValue String | Number 选择变化。

说明

该包还注册了 AListMenuItem（以 ListMenuItem 导出）。

Account
Profile
Security
Preferences
Theme
Language
Show code
<!-- Demo 1 -->
<template>
  <div class="list-menu-preview">
    <AListMenu v-model="active" :menu="groups" selected-variant="solid" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref('profile');
const groups = {
  Account: [
    { label: 'Profile', value: 'profile' },
    { label: 'Security', value: 'security' },
  ],
  Preferences: [
    { label: 'Theme', value: 'theme' },
    { label: 'Language', value: 'language' },
  ],
};
</script>

<style scoped>
.list-menu-preview {
  max-width: 280px;
}
</style>
EN
中文