@fexd/mobile

v0.1.32

Published

a month ago

0High
0Medium
0Low

cjy0208

Fexd Mobile

✨ 特性

🚀 丰富 - 参考业内多个成熟组件库，综合组件类型多样，适用于多种业务场景
🎯 灵活 - 颗粒细、功能全、体积小（gzipped 平均 7kb），按需加载，便于组合
💡 易用 - 各组件的属性设计上，汇总了各类技术方案中的良好实践
📦 开箱即用 - 提供完整的 TypeScript 类型定义
🎨 主题定制 - 支持 CSS 变量，轻松实现主题定制
🌐 国际化 - 内置多语言支持

📦 安装

yarn add @fexd/mobile
# 或者
npm install @fexd/mobile --save
# 或者
pnpm add @fexd/mobile

🔨 使用

基础使用

import { Button, toast } from '@fexd/mobile'
import '@fexd/mobile/es/style.css'

function App() {
  return (
    <Button
      onClick={() => {
        toast.info('Hello Fexd Mobile!')
      }}
    >
      点击我
    </Button>
  )
}

按需加载

配合 babel-plugin-import 实现按需加载：

// babel.config.js
module.exports = {
  plugins: [
    [
      'babel-plugin-import',
      {
        libraryName: '@fexd/mobile',
        libraryDirectory: 'lib/exports', // or 'es/exports'
        camel2DashComponentName: false,
        style: (name) => `${name}/style.less`, // or `${name}/style.css`
      },
      '@fexd/mobile',
    ],
  ],
}

TypeScript

@fexd/mobile 使用 TypeScript 编写，提供完整的类型定义文件：

import type { ButtonProps } from '@fexd/mobile'

const CustomButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}

📱 组件列表

基础组件

Button - 按钮
Icon - 图标
Image - 图片
Cell - 单元格
Space - 间距

表单组件

Input - 输入框
TextArea - 文本域
Checkbox - 复选框
Radio - 单选框
Switch - 开关
Stepper - 步进器
Rate - 评分
Slider - 滑块
Picker - 选择器
DatePicker - 日期选择器
TimePicker - 时间选择器
Calendar - 日历
Cascader - 级联选择
Form - 表单

反馈组件

ActionSheet - 动作面板
Dialog - 对话框
Toast - 轻提示
Modal - 模态框
Popup - 弹出层
Loading - 加载
Notify - 通知
Overlay - 遮罩层
Alert - 警告提示

展示组件

Badge - 徽标
Tag - 标签
Card - 卡片
Avatar - 头像
Progress - 进度条
Skeleton - 骨架屏
Empty - 空状态
Divider - 分割线
NoticeBar - 通知栏
CountDown - 倒计时
Timeline - 时间轴
Steps - 步骤条
Watermark - 水印

导航组件

NavBar - 导航栏
TabBar - 标签栏
Tabs - 标签页
Menu - 菜单
Breadcrumb - 面包屑
Pagination - 分页
Dropdown - 下拉菜单

业务组件

List - 列表
Grid - 宫格
Swiper - 轮播
Gallery - 图片预览
ImagePicker - 图片选择器
SwipeAction - 滑动操作
Collapse - 折叠面板
Search - 搜索
NumberKeyboard - 数字键盘
ShareSheet - 分享面板

布局组件

Flex - 弹性布局
View - 视图容器
ScrollView - 滚动视图
Sticky - 粘性布局
Elevator - 电梯导航

高级组件

Portal - 传送门
Transition - 过渡动画
ErrorBoundary - 错误边界
Provider - 上下文提供者
Hook - 自定义 Hooks

🎨 主题定制

Fexd Mobile 支持通过 CSS 变量进行主题定制：

:root {
  --exd-primary-color: #1890ff;
  --exd-success-color: #52c41a;
  --exd-warning-color: #faad14;
  --exd-error-color: #f5222d;
  --exd-font-size-base: 14px;
  --exd-border-radius-base: 4px;
}

也可以使用 Less 变量：

@import '~@fexd/mobile/es/theme/vars.less';

// 覆盖变量
@primary-color: #1890ff;

🌍 浏览器支持

现代浏览器以及 Android >= 5.0、iOS >= 10.0

| Chrome | Firefox | Safari | Android | iOS | | ------ | ------- | ------ | ------- | ------- | | >= 49 | >= 45 | >= 10 | >= 5.0 | >= 10.0 |

📖 文档

完整文档请访问：https://fexd-team.github.io/mobile/

🤝 参与共建

我们欢迎所有的贡献。请先阅读我们的贡献指南。

您可以将任何想法作为 Pull Requests 或 Issues 提交。

本地开发

# 克隆项目
git clone https://github.com/fexd-team/mobile.git

# 安装依赖
yarn

# 启动开发服务器
yarn dev

# 构建组件库
yarn build

# 创建新组件
yarn new:component --name=YourComponent

📄 许可证

ISC