spz-quantity#

#When to Use

When you need to obtain a standard integer value.

#Code Demonstration

#Basic Usage

A simple data selector.

<spz-quantity layout="fixed" width="200" height="52"></spz-quantity>

#Exceeding Boundary

Customize the maximum and minimum values. When exceeding the boundary, continuing to click the button will trigger the corresponding event.

<div class="quantity-status">
  Status:
  <span id="in-range">In Range</span>
  <span id="overflow" hidden>Overflow</span>
  <span id="underflow" hidden>Underflow</span>
</div>

<spz-quantity
  layout="fixed"
  width="200"
  height="52"
  min="1"
  max="10"
  value="3"
  @quantityChange="in-range.show;overflow.hide;underflow.hide;"
  @quantityChangeUnderflow="in-range.hide;overflow.hide;underflow.show;"
  @quantityChangeOverflow="in-range.hide;overflow.show;underflow.hide;"
></spz-quantity>

#Custom Icon

Use the role attribute to customize the icon, with the following values:

• increase: Represents the increase button icon
• decrease: Represents the decrease button icon

<spz-quantity
  layout="fixed"
  width="240"
  height="52"
  input-class="m-w-24"
>
  <svg role="increase" ...><!-- ... --></svg>
  <svg role="decrease" ...><!-- ... --></svg>
</spz-quantity>

#Attributes

#Methods

#update

Update the current quantity value, minimum value, and maximum value.

#Events

quantityChange

Automatically triggered when the quantity value changes.

quantityChangeUnderflow

Automatically triggered when the quantity value changes below the minimum value. (The value will not be changed)

quantityChangeOverflow

Automatically triggered when the quantity value changes above the minimum value. (The value will not be changed)

#AI Summary (LLM Ready)

• Component ID: spz-quantity
• One-line purpose: Enter a value within the range using a mouse or keyboard.
• Detected attribute rows: 5
• Detected method subsections: 1
• Detected event subsections: 3
• Top attribute names: value, max, min, icon-class, input-class
• Top method names: update
• Top event names: quantityChange, quantityChangeUnderflow, quantityChangeOverflow
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/