@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/layout/divider/index.md

@@ -0,0 +1,162 @@
+---
+order: 2
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/layout/pages/divider/index'
+group:
+    title: 布局组件
+    order: 3
+---
+
+# Divider 分割线
+
+
+用于将内容分隔为多个区域。
+
+## 引入
+
+```tsx
+import { Divider } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+默认渲染一条水平分割线。
+
+
+```tsx
+import React from 'react'
+import { Divider } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Divider />
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+
+### 内容位置
+
+通过 contentPosition 指定内容所在位置。
+
+
+```tsx
+import React from 'react'
+import { Divider } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  return (
+    <>
+      <Divider contentPosition="left">文本</Divider>
+      <Divider>文本</Divider>
+      <Divider contentPosition="right">文本</Divider>
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+
+### 垂直分割线
+
+
+```tsx
+import { Divider } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', fontSize: '15px' }}>
+        文本
+        <Divider direction="vertical" />
+        文本
+        <Divider direction="vertical" />
+        文本
+      </div>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 虚线
+
+
+```tsx
+import React from 'react'
+import { Divider } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  return (
+    <>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+### 自定义样式
+
+可以直接通过 style 属性设置分割线的样式。
+
+
+```tsx
+import React from 'react'
+import { Divider } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Divider
+        style={{
+          color: '#1989fa',
+          borderColor: '#1989fa',
+          borderStyle: 'dashed',
+        }}
+      >
+        文本
+      </Divider>
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+## Divider
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| contentPosition | 内容位置  | `left` \| `center` \| `right` | `center` |
+| direction | 水平还是垂直类型  | `horizontal` \| `vertical` | `horizontal` |
+| thin | 分割线的行高类型  | `true` \| `false` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-divider-border-color | 分割线的边框色值 | `$color-border` |
+| \--nutui-divider-line-height | 分割线的行高 | `1px` |
+| \--nutui-divider-margin | 分割线整体内容的margin值 | `16px 0` |
+| \--nutui-divider-spacing | 左边分割线与文案的间隔值 | `$spacing-3` |
+| \--nutui-divider-text-color | 分割线整体内容的颜色 | `$color-text` |
+| \--nutui-divider-text-font-size | 分割线整体内容的font-size大小 | `$font-size-base` |
+| \--nutui-divider-thin-line-height | 分割线的行高 | `0.5px` |
+| \--nutui-divider-vertical-height | 垂直分割线的高度 | `12px` |
+| \--nutui-divider-vertical-margin | 垂直分割线的margin值 | `0 $spacing-3` |

package/docs/docs/components/layout/grid/index.md

@@ -0,0 +1,386 @@
+---
+order: 3
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/layout/pages/grid/index'
+group:
+    title: 布局组件
+    order: 3
+---
+
+# Grid 宫格 <Badge>2.0.0</Badge>
+
+
+用于分隔成等宽区块进行页面导航。
+
+## 引入
+
+```tsx
+import { Grid } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo1 = () => {
+  return (
+    <Grid>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo1
+
+```
+    
+### 自定义列数
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo2 = () => {
+  return (
+    <Grid columns={3}>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo2
+
+```
+    
+### 正方形格子
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo3 = () => {
+  return (
+    <Grid columns={3} square>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo3
+
+```
+    
+### 格子间距
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo4 = () => {
+  return (
+    <Grid gap={3}>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo4
+
+```
+    
+### 内容翻转
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo5 = () => {
+  return (
+    <Grid reverse>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo5
+
+```
+    
+### 内容横向
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo6 = () => {
+  return (
+    <Grid direction="horizontal">
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo6
+
+```
+    
+### 内容翻转 + 横向
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo7 = () => {
+  return (
+    <Grid reverse direction="horizontal">
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo7
+
+```
+    
+### 图标颜色/大小
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image } from '@nutui/icons-react-taro'
+
+const Demo8 = () => {
+  return (
+    <Grid columns="3">
+      <Grid.Item text="文字">
+        <Image size={16} />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image color="red" />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <Image size={30} color="#478EF2" />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo8
+
+```
+    
+### 自定义内容
+
+
+```tsx
+import React from 'react'
+import { Grid, Image } from '@mijadesign/mjui-react-taro'
+
+const Demo9 = () => {
+  const imgSrc =
+    'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png'
+  return (
+    <Grid columns={3} square>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+      <Grid.Item>
+        <Image src={imgSrc} width="100%" height="100%" />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo9
+
+```
+    
+### 点击子项事件
+
+
+```tsx
+import React from 'react'
+import { Grid } from '@mijadesign/mjui-react-taro'
+import { Image as ImageIcon } from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo10 = () => {
+  const imgSrc =
+    'https://m.360buyimg.com/babel/jfs/t1/36973/29/11270/120042/5cf1fe3cEac2b5898/10c2722d0cc0bfa7.png'
+  const onClick = (item: any, index: number) => {
+    Taro.showToast({ title: `点击了${item.text}，第${index}个` })
+  }
+  return (
+    <Grid direction="horizontal" onClick={onClick}>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+      <Grid.Item text="文字">
+        <ImageIcon />
+      </Grid.Item>
+    </Grid>
+  )
+}
+export default Demo10
+
+```
+    
+## Grid
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| columns | 列数 | `number` \| `string` | `4` |
+| gap | 格子之间的间距，默认单位为`px` | `number` \| `string` | `0` |
+| center | 是否将格子内容居中显示 | `boolean` | `true` |
+| square | 是否将格子固定为正方形 | `boolean` | `false` |
+| reverse | 内容翻转 | `boolean` | `false` |
+| direction | 格子内容排列的方向 | `horizontal` \| `vertical` | `vertical` |
+| onClick | 宫格子项点击事件 | `(index) => void` | `-` |
+
+## Grid.Item
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文字 | `string` \| `ReactNode` | `-` |
+| onClick | 点击格子时触发 | `(event: Event) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-grid-border-color | 边框颜色 | `#f5f6f7` |
+| \--nutui-grid-item-content-padding | 内边距 | `16px 8px` |
+| \--nutui-grid-item-content-bg-color | 背景 | `$white` |
+| \--nutui-grid-item-text-margin | 外边距 | `8px` |
+| \--nutui-grid-item-text-color | 文字颜色 | `$color-title` |
+| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-size-small` |