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="280px" height="160px" src="/images/geist-banner.png" />
`}
/>

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

<Playground
  title="浏览器风格"
  desc="为图片增加浏览器风格的外装饰。"
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://geist-ui.dev/zh-cn/guide/introduction" >
  <Image width="525px" height="300px" src="/images/geist-banner.png" />
</Image.Browser>
`}
/>

<Playground
  title="反转的浏览器风格"
  scope={{ Image, Display, Code }}
  code={`
<Image.Browser url="https://geist-ui.dev/zh-cn/guide/introduction" invert>
  <Image width="525px" height="300px" src="/images/geist-banner-dark.png" />
</Image.Browser>
`}
/>

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

<Playground
  title="SVG"
  desc="直接渲染 SVG 字符串"
  scope={{ Image }}
  code={`
() => {
  const svg = \`<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 15 15" fill="none">
      <path d="M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z" stroke="black"/></svg>\`
  return <Image width="100px" height="50px" src={svg} />
}
`}
/>

<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`  |
| ...                   | 原生属性                            | `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>
