# 其他

## 阴影

> 阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们往往通过模拟元素的投影直截了当的来告诉用户，元素之间的高度距离与层次关系。

```tsx
/**
 * inline: true
 *
 */

import React from 'react';
import { copy } from '../utils';
import { WKView } from '@wakeapp/components';
import PageWrapper from '../components/PageWrapper';

const shadow = {
  none: 'none',
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
  DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  // '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
};

export default () => {
  return (
    <div>
      <WKView className="flex justify-around flex-wrap">
        {Object.keys(shadow).map(item => {
          const boxShadow = `var(--box-shadow${item === 'DEFAULT' ? '' : '-' + item})`;
          return (
            <WKView
              key={item}
              onClick={() => copy(boxShadow)}
              style={{
                textAlign: 'center',
                margin: '20px',
                cursor: 'pointer',
                lineHeight: '180px',
                width: '180px',
                height: '180px',
                backgroundColor: '#fff',
                boxShadow: `${shadow[item]}`,
              }}
            >
              {item}
            </WKView>
          );
        })}
      </WKView>
    </div>
  );
};
```

<br>
<br>

## 圆角

> 圆角值建议在 4 的倍数上进行取值

```tsx
/**
 * inline: true
 */

import React from 'react';
import { copy } from '../utils';
import PageWrapper from '../components/PageWrapper';
import { WKView } from '@wakeapp/components';

const BORDER_RADIUS = ['sm', '', 'md', 'lg', 'full'];
export default () => {
  return (
    <div>
      <WKView className="flex justify-around flex-wrap">
        {BORDER_RADIUS.map(item => {
          const radius = `var(--border-radius${item ? '-' + item : ''})`;
          return (
            <div
              key={item}
              onClick={() => copy(radius)}
              style={{
                textAlign: 'center',
                margin: '20px',
                cursor: 'pointer',
                lineHeight: '180px',
                width: '180px',
                height: '180px',
                backgroundColor: '#fff',
                border: '1px solid #eee',
                fontSize: '12px',
                borderRadius: radius,
              }}
            >
              {radius}
            </div>
          );
        })}
      </WKView>
    </div>
  );
};
```

<br>
<br>

## 间隔

```tsx
/**
 * inline: true
 */
import React from 'react';
import { getRawDefaultTheme } from '@wakeapp/components';
import upperFirst from 'lodash/upperFirst';
import kebabCase from 'lodash/kebabCase';

const size = ['xs', 'sm', 'base', 'md', 'lg', 'xl'];

export default () => {
  const theme = getRawDefaultTheme();

  return (
    <div>
      {size.map(item => {
        const name = `spacing${upperFirst(item)}`;
        const nameInCss = `var(--${kebabCase(name)})`;
        const toPx = v => v.replace(/(\d*)rpx/, (m, p) => `${parseInt(p) / 2}px`);

        return (
          <div
            style={{
              border: '1px solid var(--gray-4)',
              display: 'inline-block',
              margin: 20,
              padding: toPx(theme[name]),
              fontSize: 12,
            }}
          >
            <div
              style={{
                backgroundColor: 'var(--gray-6)',
                width: 150,
                height: 150,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <div>{nameInCss}</div>
              <div>{theme[name]}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
```

<br>
<br>

## 叠层顺序

| 变量                    | 值   | 场景                     |
| ----------------------- | ---- | ------------------------ |
| var(--z-index-dropdown) | 1000 | 下拉列表                 |
| var(--z-index-sticky)   | 1020 | 粘顶元素                 |
| var(--z-index-fixed)    | 1030 | fixed 定位元素           |
| var(--z-index-modal)    | 1040 | 模态框、对话框、抽屉     |
| var(--z-index-tooltip)  | 1050 | 提示框、弹出框、消息提醒 |
