---
title: WKSortTag 排序标签
group:
  title: 展示组件
  path: /show/
---

## 何时使用

- 商品列表中的价格排序

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKFilter, WKSortTag, View, WKCheckTag, SortType } from '@wakeapp/components';

export default () => {
  const [salesSort, setSalesSort] = useState<SortType>();
  const [distanceSort, setDistanceSort] = useState<SortType | undefined>(SortType.Asc);

  return (
    <PageWrapper title="基本使用">
      <WKFilter>
        <View style={{ flex: 1, textAlign: 'center' }}>
          <WKSortTag
            effect="ghost"
            onChange={val => setDistanceSort(val)}
            value={distanceSort}
            style={{ margin: '0rpx', height: '60rpx' }}
          >
            距离
          </WKSortTag>
        </View>
        <View style={{ flex: 1, textAlign: 'center' }}>
          <WKSortTag
            effect="ghost"
            onChange={val => setSalesSort(val)}
            value={salesSort}
            style={{ margin: '0rpx', height: '60rpx' }}
          >
            销量
          </WKSortTag>
        </View>
      </WKFilter>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKSortTag/index.d.ts' exports='["default"]'></API>
