Prompts Component 🎁

Introduction

Prompts is used to display a set of predefined questions or suggestions related to the current context.

Code Examples

Basic Usage

🐵 Prompts Component Title

🐛 Prompts Component Title

Description informationDescription informationDescription information

🐛 Prompts Component Title

🐛 Prompts Component Title

🐛 Prompts Component Title

Basic Usage

Quickly create a set of prompts list. By default, overflow will not wrap and scrollbars are hidden.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 Prompts Component Title',
    description: 'Description information'.repeat(3)
  },
  {
    key: '2',
    label: '🐛 Prompts Component Title'
  },
  {
    key: '3',
    label: '🐛 Prompts Component Title'
  },
  {
    key: '4',
    label: '🐛 Prompts Component Title'
  }
]);

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐵 Prompts Component Title"
      :items="items"
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less"></style>

Disabled State

🐵 Prompts Component Title

🐛 Prompts Component Title

Description informationDescription informationDescription information

🐛 I am disabled

🐛 Individual disable control is more accurate

🐛 Prompts Component Title

Disabled State

Quickly disable the prompts component through the disabled attribute, click events will be invalid. Note that this only takes effect when controlling individual prompt items.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 Prompts Component Title',
    description: 'Description information'.repeat(3)
  },
  {
    key: '2',
    label: '🐛 I am disabled',
    disabled: true
  },
  {
    key: '3',
    label: '🐛 Individual disable control is more accurate',
    disabled: true
  },
  {
    key: '4',
    label: '🐛 Prompts Component Title'
  }
]);

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐵 Prompts Component Title"
      :items="items"
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less"></style>

Vertical Layout

🐵 Prompts Component Title

🐛 Prompts Component Title

Description informationDescription informationDescription information

🐛 I am disabled

🐛 Individual disable control is more accurate

🐛 Prompts Component Title

Vertical Display

Use the vertical attribute to control the display direction of Prompts. Note that this acts on the entire Prompts component, not on individual PromptsItem.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 Prompts Component Title',
    description: 'Description information'.repeat(3)
  },
  {
    key: '2',
    label: '🐛 I am disabled',
    disabled: true
  },
  {
    key: '3',
    label: '🐛 Individual disable control is more accurate',
    disabled: true
  },
  {
    key: '4',
    label: '🐛 Prompts Component Title'
  }
]);

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐵 Prompts Component Title"
      :items="items"
      vertical
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less"></style>

Wrapping

🐵 Prompts Component Title

🐛 Prompts Component Title

Description informationDescription informationDescription information

🐛 I am disabled

🐛 Individual disable control is more accurate

🐛 Prompts Component Title

Wrapping Display

Use the wrap attribute to control whether Prompts can wrap when exceeding the area length.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 Prompts Component Title',
    description: 'Description information'.repeat(3)
  },
  {
    key: '2',
    label: '🐛 I am disabled',
    disabled: true
  },
  {
    key: '3',
    label: '🐛 Individual disable control is more accurate',
    disabled: true
  },
  {
    key: '4',
    label: '🐛 Prompts Component Title'
  }
]);

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐵 Prompts Component Title"
      :items="items"
      wrap
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less"></style>

Responsive Width

🐵 Prompts Component Title

🐛 Prompts Component Title

Description informationDescription informationDescription information

🐛 I am disabled

🐛 Individual disable control is more accurate

🐛 Prompts Component Title

Responsive Width

Combined with wrap and styles to display with fixed width. Note that this only takes effect when used together on PromptsItem. Individual use allows for more customization.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 Prompts Component Title',
    description: 'Description information'.repeat(3),
    itemStyle: { width: 'calc(50% - 6px)' }
  },
  {
    key: '2',
    label: '🐛 I am disabled',
    disabled: true,
    itemStyle: { width: 'calc(50% - 6px)' }
  },
  {
    key: '3',
    label: '🐛 Individual disable control is more accurate',
    disabled: true,
    itemStyle: { width: 'calc(50% - 6px)' }
  },
  {
    key: '4',
    label: '🐛 Prompts Component Title',
    itemStyle: { width: 'calc(50% - 6px)' }
  }
]);

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐵 Prompts Component Title"
      :items="items"
      wrap
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less"></style>

Customized Styles

🐵 Prompts Component Title

🐛 Prompts Component Title

Description informationDescription informationDescription information

🐛 I am disabled

🐛 Individual disable control is more accurate

🐛 Prompts Component Title

Customized Prompts Styles

Customize the styles of prompts through the style attribute.

Customize the styles of individual prompts through itemStyle, itemHoverStyle, and itemActiveStyle attributes.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 Prompts Component Title',
    description: 'Description information'.repeat(3),
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: {
      background:
        'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)'
    },
    itemActiveStyle: {
      background:
        'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)'
    }
  },
  {
    key: '2',
    label: '🐛 I am disabled',
    disabled: true,
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: {
      background:
        'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)'
    },
    itemActiveStyle: {
      background:
        'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)'
    }
  },
  {
    key: '3',
    label: '🐛 Individual disable control is more accurate',
    disabled: true,
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: {
      background:
        'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)'
    },
    itemActiveStyle: {
      background:
        'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)'
    }
  },
  {
    key: '4',
    label: '🐛 Prompts Component Title',
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: {
      background:
        'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)'
    },
    itemActiveStyle: {
      background:
        'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)'
    }
  }
]);

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐵 Prompts Component Title"
      :items="items"
      wrap
      :style="{
        width: '300px',
        padding: '12px',
        borderRadius: '8px',
        background:
          'linear-gradient(to bottom right, rgba(237, 43, 114, 0.9), rgba(223, 67, 62, 0.9)'
      }"
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less">
:deep(.el-prompts) {
  .el-prompts-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>

Nested Combination

🐛 Prompts Component Title

Basic Usage

Quickly create a set of prompts list. By default, overflow will not wrap and scrollbars are hidden.

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts';

const items = ref<PromptsItemsProps[]>([]);

onMounted(() => {
  for (let index = 0; index < 3; index++) {
    items.value.push({
      key: index,
      label: `🐠 Main Title ${index}`,
      description: `Description ${index}`,
      // icon: h(InfoFilled, { style: { color: '#409EFF' } }),
      // icon: 'ancient-gate-fill',
      disabled: false,
      itemStyle: {
        width: `calc(100% / ${3} - 43px)`,
        backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`
      },
      itemHoverStyle: {
        cursor: 'unset'
        // background: '#409EFF',
        // color: '#fff',
      },
      // itemActiveStyle: {
      //   // background: 'red',
      //   // color: '#fff',
      // },
      children: [
        {
          key: `${index}-1`,
          label: `🐛 Sub Title ${index}-1`,
          description: `Description ${index}`,
          disabled: false,
          itemStyle: {
            backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`,
            border: '1px solid #FFF'
          },
          itemHoverStyle: {
            cursor: 'unset'
          },
          children: [
            {
              key: `${index}-1-1`,
              label: `🐛 Grandchild Title ${index}-1-1`,
              description: `Description ${index}`,
              disabled: false,
              itemStyle: {
                background: 'rgba(255,255,255,0.45)',
                border: '1px solid #FFF'
              }
            },
            {
              key: `${index}-1-2`,
              label: `🐛 Grandchild Title ${index}-1-1`,
              description: `Description ${index}`,
              disabled: false,
              itemStyle: {
                background: 'rgba(255,255,255,0.45)',
                border: '1px solid #'
              }
            },
            {
              key: `${index}-1-3`,
              label: `🐛 Grandchild Title ${index}-1-1`,
              description: `Description ${index}`,
              disabled: false,
              itemStyle: {
                background: 'rgba(255,255,255,0.45)',
                border: '1px solid #FFF'
              }
            }
          ]
        },
        {
          key: `${index}-2`,
          label: `🐛 Sub Title ${index}-2`,
          description: `Description ${index}`,
          disabled: false,
          itemStyle: {
            background: 'rgba(255,255,255,0.45)',
            border: '1px solid #FFF'
          }
        },
        {
          key: `${index}-3`,
          label: `🐛 Sub Title ${index}-3`,
          description: `Description ${index}`,
          disabled: false,
          itemStyle: {
            background: 'rgba(255,255,255,0.45)',
            border: '1px solid #FFF'
          }
        }
      ]
    });
  }
});

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`Clicked ${item.key}`);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <Prompts
      title="🐛 Prompts Component Title"
      :items="items"
      wrap
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped lang="less"></style>

Attributes

Attribute	Type	Required	Default	Description
title	string	No	''	Main title text content of the prompts set
items	PromptsItemsProps[]	No	[]	Array of prompt items, each element contains label, icon, description and other information (see structure details below)
wrap	boolean	No	false	Whether to allow prompt items to wrap automatically (only effective in horizontal layout)
vertical	boolean	No	false	Whether to arrange prompt items vertically (layout direction is column in vertical mode)
style	CSSProperties	No	{}	Custom styles for component container (directly applied to the outermost div.el-prompts)

PromptsItemsProps Structure Details (single prompt item attributes):

interface PromptsItemsProps {
  key: string | number; // Unique identifier (for state association)
  label?: string; // Prompt item label text
  icon?: ComponentVNode; // Prompt item icon (Vue component form)
  description?: string; // Prompt item description text
  disabled?: boolean; // Whether disabled (no interaction response when disabled)
  itemStyle?: CSSProperties; // Custom base styles for prompt item
  itemHoverStyle?: CSSProperties; // Custom styles for prompt item hover state
  itemActiveStyle?: CSSProperties; // Custom styles for prompt item active state
  children?: PromptsItemsProps[]; // Child prompt items array (for nested display)
}

Events

Event Name	Parameters	Type	Description
@itemClick	(item: PromptsItemsProps)	Function	Event triggered when a prompt item is clicked.

Slots

Slot Name	Parameters	Type	Description
#title	-	Slot	Custom prompt set title content (if title attribute is also set, slot content will override attribute text)
#icon	{ item: PromptsItemsProps }	Slot	Custom icon content for prompt item (receives current prompt item item parameter, can override item.icon)
#label	{ item: PromptsItemsProps }	Slot	Custom label content for prompt item (receives current prompt item item parameter, can override item.label)
#description	{ item: PromptsItemsProps }	Slot	Custom description content for prompt item (receives current prompt item item parameter, can override item.description)

Features

1. Multi-dimensional Content Display: Supports configuring basic information such as labels, icons, and descriptions through the items attribute, while providing label/icon/description slots for highly customizable content.
2. Flexible Layout Control: Switch between vertical/horizontal arrangement modes through the vertical attribute, control automatic wrapping capability in horizontal arrangement through the wrap attribute, adapting to different scene layout requirements.
3. Interactive State Feedback: Built-in hover (background color lightens) and active (background color darkens) state styles, supports custom state styles through itemHoverStyle/itemActiveStyle, enhancing interactive experience.
4. Disabled State Support: Individual prompt items can be disabled through the item.disabled attribute. In disabled state, no response to click events and background color turns gray, clearly indicating non-operable state.
5. Nested Hierarchy Display: Supports configuring child prompt items through item.children, component automatically recursively renders nested structure, meeting multi-level classification or related prompt display requirements.
6. Fine-grained Style Customization: Supports controlling overall component styles through the style attribute, controlling individual prompt item base styles through itemStyle, supports separate state style configuration (itemHoverStyle/itemActiveStyle).