import { Layout, Playground, Attributes } from 'lib/components'
import { Image, Display, Code } from 'components'

export const meta = {
  title: '图片 Image',
  group: '数据展示',
}

## Image / 图片

展示图片内容。

<Playground
  scope={{ Image }}
  code={`
<Image width="540" height="160" src="/images/custom-domains.png" />
`} />

<Playground
  title="骨架"
  desc="组件在设置 `width` 与 `height` 属性后会在加载时显示骨架动画。"
  scope={{ Image }}
  code={`
<Image width="540" height="160"
  src="http://www.deelay.me/2000/https://react.zeit-ui.co/images/custom-domains.png" />
`} />

<Playground
  title="浏览器风格"
  desc="为图片增加浏览器风格的外装饰。"
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://react.zeit-ui.co/en-us/guide/introduction" >
  <Image width="540" height="246" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
</Image.Browser>
`} />

<Playground
  title="反转的浏览器风格"
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://react.zeit-ui.co/en-us/guide/introduction" invert>
  <Image width="540" height="246" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
</Image.Browser>
`} />

<Playground
  title="组合"
  desc="与 `Display` 组件组合使用。"
  scope={{ Image, Display, Code }}
  code={`
<Display shadow caption={<p>设置 <Code>height</Code> 属性可以尽可能的减少重绘。</p>}>
  <Image width="540" height="246" src="/images/branch-domains.png" />
</Display>
`} />

<Attributes edit="/pages/zh-cn/components/image.mdx">
<Attributes.Title>Image.Props</Attributes.Title>

| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- |  -------------- | ------ |
| **src** | 图片地址 | `string` | - | - |
| **disableSkeleton** | 禁用加载时的骨架动画  | `boolean` | - | `false` |
| **disableAutoResize** | 禁用等比缩放图片 (当小于指定宽度时)  | `boolean` | - | `false` |
| **maxDelay** | 动画持续最大时间 (毫秒)  | `number` | - | `3000` |
| **width** | 宽度 | `number` | - | - |
| **height** | 高度 | `number` | - | - |
| **scale** | 缩放比例 | `string` | - | `100%` |
| ... | 原生属性 | `ImgHTMLAttributes` | `'alt', 'className', ...` | - |

<Attributes.Title>Image.Browser.Props</Attributes.Title>

| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- |  -------------- | ------ |
| **title** | 显示标题 (当 "url" 未设置时生效) | `string` | - | - |
| **url** | 在浏览器地址栏显示链接 | `string` | - | - |
| **showFullLink** | 显示完整的链接而非域名 | `boolean` | - | `false` |
| **invert** | 反转所有颜色 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
