SortButton

A sorting button component that supports three states: ascending, descending, and reset.

Component Types

Basic Usage

Use v-model to bind the current sorting state. Values are -1, 0, and 1, representing descending, reset state, and ascending respectively.

<wd-sort-button v-model="value" title="Price" @change="handleChange" />

const value = ref(0)

function handleChange({ value }) {
  console.log(value)
}

Component Variants

Allow Reset

Setting allow-reset allows the sort button to return to the reset state.

<wd-sort-button v-model="value" title="Price" allow-reset />

Descending First

Setting desc-first makes the first switch prioritize entering descending order.

<wd-sort-button v-model="value" title="Price" desc-first />

Component Styles

Show Underline

Setting line displays an underline.

<wd-sort-button v-model="value" title="Price" line />

Attributes

Parameter	Description	Type	Default Value
model-value / v-model	Current sort direction value. 1 for ascending, 0 for reset state, -1 for descending	SortButtonValue	0
title	Sort button text	string	''
allow-reset	Whether to allow reset to unselected state	boolean	false
desc-first	Whether to prioritize switching to descending order	boolean	false
line	Whether to show underline	boolean	false
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Events

Event Name	Description	Parameters
change	Triggered when sort direction changes	{ value }

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-sort-button-height	$n-48	组件高度
--wot-sort-button-text-font-size	$typography-body-size-main	文字字号
--wot-sort-button-text-line-height	$typography-body-line--height-size-main	文字行高
--wot-sort-button-arrow-icon-size	$n-24	箭头图标尺寸
--wot-sort-button-right-size	$n-16	右侧区域尺寸
--wot-sort-button-icon-color	$icon-auxiliary	图标颜色
--wot-sort-button-icon-color-active	$primary-6	图标激活颜色
--wot-sort-button-color	$text-secondary	文字颜色
--wot-sort-button-color-active	$text-main	文字激活颜色
--wot-sort-button-font-weight-active	$font-weight-medium	文字激活字重
--wot-sort-button-line-width	$n-24	下划线宽度
--wot-sort-button-line-height	$n-4	下划线高度
--wot-sort-button-line-color	$primary-6	下划线颜色
--wot-sort-button-line-bottom	$spacing-ultra-tight	下划线底部距离
--wot-sort-button-right-spacing-left	$spacing-extra-tight	右侧区域左间距
--wot-sort-button-sort-spacing	$spacing-ultra-tight	排序图标纵向间距

Source Code

Documentation

• Component