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.geist-ui.dev/images/custom-domains.png" />
`}
/>

<Playground
  title="浏览器风格"
  desc="为图片增加浏览器风格的外装饰。"
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://react.geist-ui.dev/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.geist-ui.dev/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` |
| **anchorProps**  | 设置 `a` 的其他属性              | `AnchorHTMLAttributes` | -                        | `{}`    |
| ...              | 原生属性                         | `HTMLAttributes`       | `'id', 'className', ...` | -       |

</Attributes>

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