Merge pull request #5 from yisumay/main

Image组件和Space组件

packages/config.json

@@ -79,6 +79,17 @@
           "show": true,
           "taro": true,
           "author": "yisumay"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Image",
+          "type": "component",
+          "cName": "图片",
+          "desc": "图片",
+          "sort": 2,
+          "show": true,
+          "taro": true,
+          "author": "yisumay"
         }
       ]
     },
@@ -96,6 +107,17 @@
           "show": true,
           "taro": true,
           "author": "yisumay"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Space",
+          "type": "component",
+          "cName": "间距",
+          "desc": "间距",
+          "sort": 1,
+          "show": true,
+          "taro": true,
+          "author": "yisumay"
         }
       ]
     },

packages/nutui-solid-site/src/content/zh-cn/cell.mdx

@@ -14,7 +14,7 @@ import CodeBlock from '@/components/CodeBlock.astro'
 ### 安装
 
 ```tsx
-import { Cell } from '@nutui/nutui'
+import { Cell } from '@nutui/nutui-solid';
 ```
 
 ### 基础用法

packages/nutui-solid-site/src/content/zh-cn/divider.mdx

@@ -14,7 +14,7 @@ import CodeBlock from '@/components/CodeBlock.astro'
 ### 安装
 
 ```tsx
-import { Divider } from '@nutui/nutui'
+import { Divider } from '@nutui/nutui-solid';
 ```
 
 ### 基础用法

packages/nutui-solid-site/src/content/zh-cn/image.mdx

@@ -0,0 +1,136 @@
+---
+layout: ../../layouts/Layout.astro
+title: Image
+---
+
+import CodeBlock from '@/components/CodeBlock.astro'
+
+# Cell 图片 
+
+### 介绍
+
+增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示
+
+### 安装
+
+```tsx
+import { Image } from '@nutui/nutui-solid';
+```
+
+### 基础用法
+
+基础用法与原生 `img` 标签一致，可以设置 `src`、`width`、`height`、`alt` 等原生属性。
+
+:::demo
+
+<CodeBlock src='basic.tsx'></CodeBlock>
+
+:::
+
+### 填充模式
+
+通过 `fit` 属性可以设置图片填充模式，等同于原生的 `object-fit` 属性，可选值见下方表格。
+
+:::demo
+
+<CodeBlock src='fit.tsx'></CodeBlock>
+
+:::
+
+### 图片位置
+
+通过 `position` 属性可以设置图片位置，结合 `fit` 属性使用，等同于原生的 `object-position` 属性。
+
+:::demo
+
+<CodeBlock src='position.tsx'></CodeBlock>
+
+:::
+
+### 圆形图片
+
+通过 `round` 属性可以设置图片变圆，注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时，将无法填充一个完整的圆形。
+
+:::demo
+
+<CodeBlock src='round.tsx'></CodeBlock>
+
+:::
+
+### 加载中图片
+
+Image 组件提供了默认的加载中提示，支持通过 `loading` 插槽自定义内容。
+
+:::demo
+
+<CodeBlock src='loading.tsx'></CodeBlock>
+
+:::
+
+### 加载失败
+
+Image 组件提供了默认的加载失败提示，支持通过 `error` 插槽自定义内容。
+
+:::demo
+
+<CodeBlock src='error.tsx'></CodeBlock>
+
+:::
+
+### 懒加载
+
+刷新后滚动 Demo 页面，在控制台中查看图片请求时间。
+
+:::demo
+
+<CodeBlock src='lazy.tsx'></CodeBlock>
+
+:::
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 图片链接 | string | - |
+| fit | 图片填充模式，等同于原生的 `object-fit` 属性 | ImageFit | `fill` |
+| position | 图片位置，等同于原生的 `object-position` 属性 | ImagePosition | `center` |
+| alt | 替代文本 | string | - |
+| width | 宽度，默认单位 `px` | string | - |
+| height | 高度，默认单位 `px` | string | - |
+| round | 是否显示为圆角 | boolean | `false` |
+| radius | 圆角大小 | string \| number | - |
+| showError | 是否展示图片加载失败 | boolean | `false` |
+| showLoading | 是否展示加载中图片 | boolean | `true` |
+| lazyLoad | 懒加载 | boolean | `false` |
+| loading | 自定义加载中的提示内容 | JSX.Element | - |
+| error | 自定义记载失败的提示内容 | JSX.Element | - |
+
+### ImageFit 图片填充模式
+
+| 参数 | 说明 |
+| --- | --- |
+| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
+| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
+| fill | 拉伸图片，使图片填满元素 |
+| none | 保持图片原有尺寸 |
+| scale-down | 取 `none` 或 `contain` 中较小的一个 |
+
+### ImagePosition 图片位置
+
+| 参数 | 说明 |
+| --- | --- |
+| center | 居中对齐 |
+| top | 顶部对齐 |
+| right | 右侧对齐 |
+| bottom | 底部对齐 |
+| left | 左侧对齐 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | 点击图片时触发 | event: Event |
+| load | 图片加载完后触发 | -- |
+| error | 图片加载失败后触发 | -- |

packages/nutui-solid-site/src/content/zh-cn/space.mdx

@@ -0,0 +1,71 @@
+---
+layout: ../../layouts/Layout.astro
+title: Image
+---
+
+import CodeBlock from '@/components/CodeBlock.astro'
+
+# Space 间距 
+
+### 介绍
+
+设置元素之间的间距。
+
+### 安装
+
+```tsx
+import { Space } from '@nutui/nutui-solid';
+```
+
+### 基础用法
+
+Space 组件会在各个子组件之间设置一定的间距，默认间距为 8px。
+
+:::demo
+
+<CodeBlock src='basic.tsx'></CodeBlock>
+
+:::
+
+### 垂直排列
+
+将 direction 属性设置为 vertical，可以设置垂直方向排列的间距。
+
+:::demo
+
+<CodeBlock src='direction.tsx'></CodeBlock>
+
+:::
+
+### 自定义间距
+
+通过调整 gutter 的值来控制间距的大小。传入 number 类型时，会默认使用 px 单位；也可以传入 string 类型，比如 2rem 或 5vw 等带有单位的值。
+
+也可以设置 css 变量 `--nut-space-gap` 控制，优先级：属性 > css 变量 > 默认样式。
+
+:::demo
+
+<CodeBlock src='gutter.tsx'></CodeBlock>
+
+:::
+
+### 自动换行
+
+在水平模式下, 通过 wrap 属性来控制子元素是否自动换行。
+
+:::demo
+
+<CodeBlock src='wrap.tsx'></CodeBlock>
+
+:::
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| direction | 间距方向，可选值 `vertical` `horizontal` | string | `horizontal` |
+| align | 交叉轴对齐方式，可选值 `start` `end` `center` `baseline` | string | `-` |
+| justify | 主轴对齐方式，可选值 `start` `end` `center` `between` `around` `evenly` `stretch` | string | `-` |
+| wrap | 是否自动换行，仅在 horizontal 时有效 | boolean | `false` |
+| fill | 是否让 Space 变为一个块级元素，填充整个父元素 | boolean | `false` |
+| gutter | 间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距 | number \| string \| number[] \| string[] | `-` |

packages/nutui-solid-site/src/pages/demo/image.astro

@@ -0,0 +1,55 @@
+---
+import Demo from '@/components/Demo.astro';
+import MobileLayout from '@/layouts/MobileLayout.astro';
+import Basic from '~/nutui-solid/src/components/image/demos/basic'
+import Fit from '~/nutui-solid/src/components/image/demos/fit'
+import Position from '~/nutui-solid/src/components/image/demos/position'
+import Round from '~/nutui-solid/src/components/image/demos/round'
+import LoadingDemo from '~/nutui-solid/src/components/image/demos/loading'
+import Error from '~/nutui-solid/src/components/image/demos/error'
+import Lazy from '~/nutui-solid/src/components/image/demos/lazy'  
+
+const useTranslate = (obj) => {
+  return [obj['zh-CN']];
+};
+
+const [translated] = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    fit: '填充模式',
+    position: '图片位置',
+    round: '圆形图片',
+    loading: '加载中提示',
+    error: '加载失败',
+    lazy: '懒加载',
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    fit: 'Object Fill',
+    position: 'Object Position',
+    round: 'Round',
+    loading: 'Loading',
+    error: 'Error',
+    lazy: 'Lazy Load',
+  },
+});
+---
+
+<MobileLayout>
+  <Demo>
+    <h2>{translated.basic}</h2>
+    <Basic client:only="client" />
+    <h2>{translated.fill}</h2>
+    <Fit client:only="client" />
+     <h2>{translated.position}</h2>
+    <Position client:only="client" />
+    <h2>{translated.round}</h2>
+    <Round client:only="client" />
+    <h2>{translated.loading}</h2>
+    <LoadingDemo client:only="client" />
+    <h2>{translated.error}</h2>
+    <Error client:only="client" />
+    <h2>{translated.lazy}</h2>
+    <Lazy client:only="client" />
+  </Demo>
+</MobileLayout>

packages/nutui-solid-site/src/pages/demo/space.astro

@@ -0,0 +1,41 @@
+---
+import Demo from '@/components/Demo.astro';
+import MobileLayout from '@/layouts/MobileLayout.astro';
+import Basic from '~/nutui-solid/src/components/space/demos/basic'
+import Direction from '~/nutui-solid/src/components/space/demos/direction'
+import Gutter from '~/nutui-solid/src/components/space/demos/gutter'
+import Wrap from '~/nutui-solid/src/components/space/demos/wrap'
+
+
+const useTranslate = (obj) => {
+  return [obj['zh-CN']];
+};
+
+const [translated] = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    direction: '垂直排列',
+    gutter: '自定义间距',
+    wrap: '自动换行',
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    direction: 'Custom gutter',
+    gutter: 'item wrap',
+    wrap: 'Round',
+  },
+});
+---
+
+<MobileLayout>
+  <Demo>
+    <h2>{translated.basic}</h2>
+    <Basic client:only="client" />
+    <h2>{translated.direction}</h2>
+    <Direction client:only="client" />
+    <h2>{translated.gutter}</h2>
+    <Gutter client:only="client" />
+    <h2>{translated.wrap}</h2>
+    <Wrap client:only="client" />  
+  </Demo>
+</MobileLayout>