---
title: WKGrid 九宫格
group:
  title: 导航组件
  path: /gps/
---

## 何时使用

九宫格。

## 基本使用

```tsx
/**
 * title: 栅格
 * desc: 基本使用
 */

import React, { useState } from 'react';
import { WKGrid, WKGridItem, WKIcon, WKSwitch, WKSlider, WKView } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

const gridList = [
  'gift-fill',
  'folder-fill',
  'giftcard-fill',
  'home-fill',
  'coupon-fill',
  'people-fill',
  'img-fill',
  'giftcard-fill',
  'home-fill',
  'coupon-fill',
  'people-fill',
  'img-fill',
];
export default () => {
  const [square, setSquare] = useState(false);
  const [border, setBorder] = useState(false);
  const [columns, setColumns] = useState(4);
  const [gutter, setGutter] = useState(11);
  return (
    <PageWrapper title="基本使用">
      <WKView className="flex items-center p-3 w-screen">
        <WKView className="w-1__3">square</WKView>
        <WKSlider value={columns} min={2} max={10} step={1} showValue onChange={val => setColumns(val.detail.value)} />
      </WKView>
      <WKView className="flex items-center p-3 w-screen">
        <WKView className="w-1__3">gutter</WKView>
        <WKSlider value={gutter} min={0} max={30} step={1} showValue onChange={val => setGutter(val.detail.value)} />
      </WKView>
      <WKView className="flex items-center p-3  w-screen">
        <WKView className="w-1__3">square</WKView>
        <WKSwitch checked={square} onChange={() => setSquare(pre => !pre)} />
      </WKView>

      <WKView className="flex items-center p-3  w-screen">
        <WKView className="w-1__3">boreder</WKView>
        <WKSwitch checked={border} onChange={() => setBorder(pre => !pre)} />
      </WKView>
      <WKGrid
        square={square}
        gutter={gutter}
        border={border}
        columnCount={columns}
        className="w-screen mt-4 box-border"
      >
        {gridList.map((icon, idx) => {
          return (
            <WKGridItem key={idx}>
              <WKIcon icon={icon} width="30px" color="#000000" />
            </WKGridItem>
          );
        })}
      </WKGrid>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKGrid/index.d.ts' ></API>
