@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/exhibition/swiper/index.md

@@ -0,0 +1,385 @@
+---
+order: 18
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/exhibition/pages/swiper/index'
+group:
+    title: 展示组件
+    order: 7
+---
+
+# Swiper 轮播 <Badge>2.0.0</Badge>
+
+
+常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+
+## 引入
+
+```tsx
+import { Swiper } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { Swiper } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+import React from 'react'
+
+const list = [
+  'https://sblp-oss.mibaodata.com/static/env_prod/banner01.png',
+  'https://sblp-oss.mibaodata.com/static/env_prod/banner02.png',
+  'https://sblp-oss.mibaodata.com/static/env_prod/banner03.png',
+  'https://sblp-oss.mibaodata.com/static/env_prod/banner04.png',
+]
+const Demo1 = () => {
+  return (
+    // @ts-ignore
+    <Swiper defaultValue={1} autoPlay indicator height={Taro.pxTransform(72)}>
+      {list.map((item, index) => (
+        <Swiper.Item key={item}>
+          <img width="100%" height="100%" onClick={() => console.log(index)} src={item} alt="" />
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  )
+}
+export default Demo1
+
+```
+    
+### 异步加载
+
+
+```tsx
+import React, { useEffect, useState } from 'react'
+import { Swiper } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo2 = () => {
+  const list = [
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner01.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner02.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner03.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner04.png',
+  ]
+
+  const [asyncList, setAsyncList] = useState<string[]>([])
+  useEffect(() => {
+    setTimeout(() => {
+      setAsyncList(list)
+    }, 3000)
+  }, [])
+  return (
+    // @ts-ignore
+    <Swiper defaultValue={0} indicator height={Taro.pxTransform(72)} width={Taro.pxTransform(343)}>
+      {asyncList.map((item, index) => (
+        <Swiper.Item key={item}>
+          <img width="100%" height="100%" src={item} alt="" />
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  )
+}
+export default Demo2
+
+```
+    
+### 自定义大小
+
+`width` 自定义轮播大小
+
+
+```tsx
+import React from 'react'
+import { Swiper } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo3 = () => {
+  const list = [
+    'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png',
+    'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png',
+    'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png',
+    'https://sblp-oss.mibaodata.com/static/front-end/home/homeBanner.png',
+  ]
+  return (
+    <Swiper
+      // @ts-ignore
+      width={Taro.pxTransform(343)}
+      height={Taro.pxTransform(145)}
+      defaultValue={0}
+      indicator
+      style={{ margin: '0 auto' }}
+    >
+      {list.map((item) => (
+        <Swiper.Item key={item}>
+          <img width="100%" height="100%" src={item} alt="" />
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  )
+}
+export default Demo3
+
+```
+    
+### 自定义分页指示器
+
+`pageContent` 表示自定义指示器
+
+
+```tsx
+import React, { useState } from 'react'
+import { Swiper } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo4 = () => {
+  const [current, setCurrent] = useState(0)
+  const list = [
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner01.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner02.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner03.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner04.png',
+  ]
+  return (
+    <Swiper
+      defaultValue={0}
+      onChange={(e) => {
+        setCurrent(e.detail.current)
+      }}
+      // @ts-ignore
+      width={Taro.pxTransform(343)}
+      height={Taro.pxTransform(72)}
+      indicator={
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '6px',
+            left: '50%',
+            width: '36px',
+            height: '19px',
+            background: 'rgba(0, 0, 0, 0.4)',
+            borderRadius: '999px',
+            textAlign: 'center',
+            color: '#fff',
+            fontSize: '13px',
+            zIndex: '1',
+            transform: 'translateX(-50%)',
+            lineHeight: '19px',
+          }}
+        >
+          {current + 1}/{list.length}
+        </div>
+      }
+    >
+      {list.map((item) => (
+        <Swiper.Item key={item}>
+          <img width="100%" height="100%" src={item} alt="" />
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  )
+}
+export default Demo4
+
+```
+    
+### 手动切换
+
+可通过 `API`(`prev`,`next`)进行手动切换
+
+
+```tsx
+import React, { useState } from 'react'
+import { Swiper } from '@mijadesign/mjui-react-taro'
+import { ArrowLeft, ArrowRight } from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo5 = () => {
+  const swiperRef = React.useRef<any>(null)
+  const [current2, setCurrent2] = useState(0)
+
+  const list = [
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner01.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner02.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner03.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner04.png',
+  ]
+  const btnsStyle = {
+    width: '100%',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-14px)',
+    zIndex: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    height: '0px',
+  }
+  const spanStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '28px',
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  }
+  return (
+    <div
+      className="demo-box"
+      style={{ width: Taro.pxTransform(343), height: Taro.pxTransform(72), position: 'relative' }}
+    >
+      <Swiper
+        ref={swiperRef}
+        defaultValue={0}
+        onChange={(e) => {
+          setCurrent2(e.detail.current)
+        }}
+        indicator={
+          <div className="page">
+            {current2 + 1}/{list.length}
+          </div>
+        }
+        // @ts-ignore
+        width={Taro.pxTransform(343)}
+        height={Taro.pxTransform(72)}
+      >
+        {list.map((item) => {
+          return (
+            <Swiper.Item key={item}>
+              <img src={item} alt="" style={{ width: '100%', height: '100%' }} draggable={false} />
+            </Swiper.Item>
+          )
+        })}
+      </Swiper>
+      <div style={btnsStyle as any}>
+        <span style={spanStyle} onClick={(e) => swiperRef.current?.prev()}>
+          <ArrowLeft size={20} color="#fff" />
+        </span>
+        <span style={spanStyle} onClick={(e) => swiperRef.current?.next()}>
+          <ArrowRight size={20} color="#fff" />
+        </span>
+      </div>
+    </div>
+  )
+}
+export default Demo5
+
+```
+    
+### 垂直方向
+
+`direction` 自定义轮播方向
+
+
+```tsx
+import React from 'react'
+import { Swiper } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo6 = () => {
+  const list = [
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner01.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner02.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner03.png',
+    'https://sblp-oss.mibaodata.com/static/env_prod/banner04.png',
+  ]
+  return (
+    <Swiper
+      defaultValue={0}
+      direction="vertical"
+      indicator
+      // @ts-ignore
+      width={Taro.pxTransform(343)}
+      height={Taro.pxTransform(72)}
+    >
+      {list.map((item) => (
+        <Swiper.Item key={item}>
+          <img width="100%" height="100%" src={item} alt="" />
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  )
+}
+export default Demo6
+
+```
+    
+### 一屏多个数据时
+
+`center` 代表可居中，同时必须传 `height`
+
+
+```tsx
+import React from 'react'
+import { Swiper } from '@mijadesign/mjui-react-taro'
+
+const Demo9 = () => {
+  return (
+    <Swiper loop autoPlay>
+      <Swiper.Item>
+        <div style={{ display: 'flex' }}>
+          <div style={{ flex: '1', border: '1 red' }}>Item1</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item2</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item3</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item4</div>
+        </div>
+      </Swiper.Item>
+      <Swiper.Item>
+        <div style={{ display: 'flex' }}>
+          <div style={{ flex: '1', border: '1 red' }}>Item5</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item6</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item7</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item8</div>
+        </div>
+      </Swiper.Item>
+      <Swiper.Item>
+        <div style={{ display: 'flex' }}>
+          <div style={{ flex: '1', border: '1 red' }}>Item9</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item10</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item11</div>
+          <div style={{ flex: '1', border: '1 red' }}>Item12</div>
+        </div>
+      </Swiper.Item>
+    </Swiper>
+  )
+}
+export default Demo9
+
+```
+    
+## Swiper
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 轮播卡片的宽度 | `number` | `-` |
+| height | 轮播卡片的高度 | `number` | `-` |
+| direction | 轮播方向 | `horizontal` \| `vertical` | `horizontal` |
+| indicator | 分页指示器是否展示 | `boolean` | `false` |
+| loop | 是否循环轮播 | `boolean` | `true` |
+| autoPlay | 自动轮播 | `boolean` | `false` |
+| defaultValue | 初始化索引值 | `number` | `0` |
+| onChange | 卡片切换后的回调 | `(current: number) => void` | `-` |
+
+> Swiper 是对 Taro Swiper 进行的封装，可以支持 Taro Swiper 属性的透传。具体支持属性可参考[https://taro-docs.jd.com/docs/components/viewContainer/swiper](https://taro-docs.jd.com/docs/components/viewContainer/swiper)
+
+### Ref
+
+| 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| prev | 切换到上一页 | `()=>void` |
+| next | 切换到下一页 | `()=>void` |
+| to | 切换到指定轮播 | `(index: number)=>void` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-swiper-pagination-bottom | 分页器距离底部的距离 | `12px` |
+| \--nutui-swiper-indicator-bottom | 指示器距离底部的距离 | `12px` |

package/docs/docs/components/exhibition/tag/index.md

@@ -0,0 +1,253 @@
+---
+order: 21
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/exhibition/pages/tag/index'
+group:
+    title: 展示组件
+    order: 7
+---
+
+# Tag 标签 <Badge>2.0.0</Badge>
+
+
+用于标记和分类的标签。
+
+## 引入
+
+```tsx
+import { Tag } from '@mijadesign/mjui-react-taro';
+```
+
+## 代码实例
+
+### 基础用法
+
+
+```tsx
+import { Cell, Tag } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Cell.Group>
+        <Cell
+          title="填充"
+          extra={
+            <Tag type="primary" mode="fill">
+              主要
+            </Tag>
+          }
+        />
+        <Cell
+          title="描边"
+          extra={
+            <Tag type="primary" mode="plain">
+              主要
+            </Tag>
+          }
+        />
+      </Cell.Group>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 样式风格
+
+
+```tsx
+import { Cell, Tag } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  return (
+    <>
+      <Cell.Group>
+        <Cell title="方形" extra={<Tag mode="fill">主要</Tag>} />
+        <Cell
+          title="圆角"
+          extra={
+            <Tag mode="fill" round>
+              主要
+            </Tag>
+          }
+        />
+        {/* <Cell
+          title="可关闭"
+          extra={
+            <Space>
+              <Tag mode="fill" closeable>
+                主要
+              </Tag>
+              <Tag closeable>主要</Tag>
+            </Space>
+          }
+        /> */}
+      </Cell.Group>
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### 自定义颜色
+
+
+```tsx
+import { Cell, Tag } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo3 = () => {
+  return (
+    <Cell.Group>
+      <Cell title="大尺寸" extra={<Tag mode="fill">大标签</Tag>} />
+      <Cell
+        title="小尺寸"
+        extra={
+          <Tag mode="fill" size="small">
+            小标签
+          </Tag>
+        }
+      />
+    </Cell.Group>
+  )
+}
+export default Demo3
+
+```
+    
+### 图文
+
+
+```tsx
+import { Cell, Space, Tag } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo4 = () => {
+  return (
+    <>
+      <Cell.Group>
+        <Cell
+          title="主要"
+          extra={
+            <Space>
+              <Tag mode="fill">标签</Tag>
+              <Tag>标签</Tag>
+              <Tag mode="plain">标签</Tag>
+            </Space>
+          }
+        />
+        <Cell
+          title="成功"
+          extra={
+            <Space>
+              <Tag type="success" mode="fill">
+                标签
+              </Tag>
+              <Tag type="success">标签</Tag>
+              <Tag type="success" mode="plain">
+                标签
+              </Tag>
+            </Space>
+          }
+        />
+        <Cell
+          title="错误"
+          extra={
+            <Space>
+              <Tag type="danger" mode="fill">
+                标签
+              </Tag>
+              <Tag type="danger">标签</Tag>
+              <Tag type="danger" mode="plain">
+                标签
+              </Tag>
+            </Space>
+          }
+        />
+        <Cell
+          title="警示"
+          extra={
+            <Space>
+              <Tag type="warning" mode="fill">
+                标签
+              </Tag>
+              <Tag type="warning">标签</Tag>
+              <Tag type="warning" mode="plain">
+                标签
+              </Tag>
+            </Space>
+          }
+        />
+        <Cell
+          title="默认"
+          extra={
+            <Space>
+              <Tag type="default" mode="fill">
+                标签
+              </Tag>
+              <Tag type="default">标签</Tag>
+              <Tag type="default" mode="plain">
+                标签
+              </Tag>
+            </Space>
+          }
+        />
+      </Cell.Group>
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+## Tag
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 标签类型 | `primary` \| `default` \| `info` \| `success` \| `danger` \| `warning` | `primary` |
+| size | 标签大小 | `default` \| `small` | `default` |
+| mode | 标签模式 | `plain` \| `fill` \| `default` | `default` |
+| background | 标签颜色 | `string` | `-` |
+| color | 文本颜色，优先级高于color属性 | `string` | `-` |
+| round | 是否为圆角样式 | `boolean` | `false` |
+| mark | 是否为标记样式 | `boolean` | `false` |
+| closeable | 是否为可关闭标签 | `boolean` | `false` |
+| closeIcon | 关闭按钮 | `ReactNode` | `<Failure>` |
+| onClick | 点击事件 | `(e: MouseEvent) => void` | `-` |
+| onClose | 关闭事件 | `(e?: any) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-tag-background-color | 背景色 | `$color-border` |
+| \--nutui-tag-border-radius | 圆角 | `$radius-0` |
+| \--nutui-tag-border-width | 边宽 | `1px` |
+| \--nutui-tag-color | 字色 | `$color-text-disabled` |
+| \--nutui-tag-danger-background-color | 危险背景色 | `$color-error-background` |
+| \--nutui-tag-danger-color | 危险字色 | `$color-error` |
+| \--nutui-tag-font-size | 字号 | `$font-size-0` |
+| \--nutui-tag-height | 圆角 | `20px` |
+| \--nutui-tag-info-background-color | 信息背景色 | `$color-info` |
+| \--nutui-tag-large-border-radius | 圆角 | `$radius-1` |
+| \--nutui-tag-large-font-size | 圆角 | `$font-size-1` |
+| \--nutui-tag-large-height | 圆角 | `24px` |
+| \--nutui-tag-mark-border-radius | mark模式下的圆角 | `0 8px 8px 0` |
+| \--nutui-tag-padding | padding 值 | `0 $spacing-1` |
+| \--nutui-tag-primary-background-color | 主色背景色 | `$color-primary-background` |
+| \--nutui-tag-primary-color | 主色字色 | `$color-primary` |
+| \--nutui-tag-round-border-radius | round模式下的圆角 | `8px` |
+| \--nutui-tag-success-background-color | 成功背景色 | `$color-success-background` |
+| \--nutui-tag-success-color | 成功字色 | `$color-success` |
+| \--nutui-tag-warning-background-color | 警告背景色 | `$color-warning-background` |
+| \--nutui-tag-warning-color | 警告字色 | `$color-warning` |