npm.io
3.12.14-beta.0 • Published 2 weeks ago

@gm-mobile/react

Licence
ISC
Version
3.12.14-beta.0
Deps
3
Size
156 kB
Vulns
0
Weekly
0
Stars
1
SummaryDependencyVersions

@gm-mobile/react

简介

主组件库 - gm-mobile 的核心 React UI 组件库，提供 16+ 移动端组件，涵盖表单、布局、数据展示等场景。同时重新导出 @gm-mobile/c-react 的所有基础组件。

安装

npm install @gm-mobile/react
peerDependencies
{
  "@gm-common/number": "^2.2.9",
  "big.js": "^5.2.2",
  "classnames": "^2.2.6",
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
}

使用

快速开始
import { Header, Keyboard, List, Tabbar } from '@gm-mobile/react'

const App = () => {
  return (
    <Header title="首页" onBack={() => window.history.back()} />
  )
}

API

导出列表
表单组件
导出项 说明 详细文档
Keyboard 数字键盘组件 README
KeyboardWrap 数字键盘包裹组件 README
Counter 计数器组件 README
FormScrollIntoView 表单滚动定位组件 README
布局组件
导出项 说明 详细文档
Tabbar 底部标签栏 README
FlowBtnTabbar 中间浮动按钮标签栏 README
PullUpDown 下拉刷新/上拉加载 README
List 通用列表 README
Lazy 懒加载组件 README
LazyList 懒加载列表 README
Scroll 滚动列表 README
数据展示
导出项 说明 详细文档
FlipNumber 翻转数字动画 README
ProgressBar 进度条 README
LetterIndex 字母索引（单选） README
LetterIndexMultiple 字母索引（多选） README
Image 图片组件 README
Header 头部导航栏 README
浮层/反馈
导出项 说明
NProgress 顶部进度条（静态方法）
Alert 警告弹窗
Confirm 确认弹窗
Prompt 输入弹窗
Delete 删除确认弹窗
其他
导出项 说明 详细文档
Canvas 画板组件 README
Uploader 文件上传 README
CSSVariable CSS 变量工具 -
LocalStorage 本地存储 -
SessionStorage 会话存储 -
基础组件（从 @gm-mobile/c-react 重新导出）

同时导出 @gm-mobile/c-react 的所有组件，包括：Button、Flex、Dialog、Toast、Input、Checkbox、Radio、Switch、Tabs、Popover、ToolTip、Modal、Drawer、DatePicker、DateRangePicker、Cascader、Transfer 等。

示例

页面布局
import { Header, List, Tabbar } from '@gm-mobile/react'

const App = () => {
  const [active, setActive] = useState('/home')

  return (
    <div>
      <Header title="首页" />
      <div>页面内容</div>
      <Tabbar
        configs={[
          { name: '首页', to: '/home', icon: <IconHome /> },
          { name: '我的', to: '/my', icon: <IconUser /> },
        ]}
        selected={active}
        onTabChange={(config) => setActive(config.to)}
      />
    </div>
  )
}
弹窗快捷方法
import { Alert, Confirm, Prompt, Delete } from '@gm-mobile/react'

// 警告弹窗
Alert('操作成功')

// 确认弹窗
Confirm('确定要删除吗？').then(() => {
  console.log('确认')
})

// 输入弹窗
Prompt('请输入名称').then((value) => {
  console.log('输入值：', value)
})

// 删除确认
Delete('确定要删除此项吗？').then(() => {
  console.log('已删除')
})

注意事项

  • 本包依赖 @gm-mobile/c-react，所有 c-react 的组件都可以直接从本包导入
  • NProgress 通过静态方法调用，无需在 JSX 中渲染
  • Alert、Confirm、Prompt、Delete 来自 Dialog 的快捷方法
  • 各组件的详细文档请查看 src/component/ 下各组件目录中的 README.md

相关包