快速启动

遵循下面的步骤快速开始使用组件库.

========

安装

npm install @arco-design/mobile-react -S

项目依赖性

"peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0",
    "react-transition-group": ">=4.3.0"
}

自适应

样式使用 rem 用于自适应 (@ base-font- small: 50px). 请确保项目引入 flexible.js 或其他能够根据屏幕大小为html设定基本字体大小的工具功能。 您也可以导入此组件库提供的柔性. js :

import setRootPixel from '@arco-design/mobile-react/tools/flexible';

setRootPixel();

如果 baseFontSize 不同,您可以更改输入的参数并更改 @base-font-size 变量 :

// js
/**
 * @param baseFontSize Baseline fontSize of 1rem, default 50
 * @param sketchWidth Width of UI draft, default 375
 * @param maxFontSize Maximum fontSize limit, default 64
 * @return {() => void} removeRootPixel Cancel the baseFontSize setting and remove the resize listener
 */
setRootPixel(37.5);

// less options
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@base-font-size': 37.5,
    }
}

以 CDN 导入

您可以通过 CDN 资源导入 <script> 标签。 注意您需要先导入对等依赖的 CDN 资源 .

反应和反应DOM : 点击这里

反应过渡组 : 点击这里

<link ref="stylesheet" href="https://unpkg.com/@arco-design/[email protected]/dist/style.min.css">
<script src="https://unpkg.com/@arco-design/[email protected]/dist/index.min.js"></script>

完全导入

注意样式文件需要手动导入 .

import Arco from '@arco-design/mobile-react';
import '@arco-design/mobile-react/esm/style';

部分导入( 建议)

建议使用 babel-plugin-import 以导入点击这里 以获得此插件更灵活的配置 :

npm install babel-plugin-import -D

按需导入组件

.baberrc.js (英语)数字 :

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
        "style": (path) => `${path}/style`,
    }]
]

按需导入图标

.baberrc.js (英语)数字 :

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false,
    }]
]

如果两者兼有 组件 财务报告和审定财务报表 图标 需要按需导入,需要在第三个参数中添加不同的名称值.

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
        "style": (path) => `${path}/style`
    }, "@arco-design/mobile-react"],
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false
    }, "@arco-design/mobile-react/esm/icon"]
]

然后在导入时只需要写出一行,它会被按要求加载,而不是在包装时完全被导入:

import { Button as ArcoButton } from '@arco-design/mobile-react';

import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';

部分导入( V)

建议使用 vite-plugin-importer 要导入( t)点击这里 从此插件中了解更多信息 :

npm install vite-plugin-importer -D

按需导入组件

vite.config.ts (英语) 数字 :

import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react",
            libraryDirectory: "esm",
            style: (path) => `${path}/style`,
        })
    ]
})

按需导入图标

vite.config.ts (英语) 数字 :

import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react/esm/icon",
            libraryDirectory: "",
            camel2DashComponentName: false,
        })
    ]
})

如果组件和图标都需要按需导入,则只需声明全部,不需要任何更改.

vite.config.ts (英语) 数字 :

import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react",
            libraryDirectory: "esm",
            style: (path) => `${path}/style`,
        }),
        usePluginImport({
            libraryName: "@arco-design/mobile-react/esm/icon",
            libraryDirectory: "",
            camel2DashComponentName: false,
        })
    ]
})

部分导入( 手工)

如果不使用 Bail-plugin-import,则需要手动导入js和cs文件. 以下例子与上方的导入语句具有同等效力: 1

import ArcoButton from '@arco-design/mobile-react/esm/button';
import '@arco-design/mobile-react/esm/button/style';

import IconAsk from '@arco-design/mobile-react/esm/icon/IconAsk';

主题变量定制和动态切换

此组件库使用 less 财务报告和审定财务报表 css 用于主题定制的变量。 css变量主要用于运行时的动态主题切换,并默认被禁用. 如果需要动态主题切换,您可以配置更少的选项来启用 Cs 变量:

lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@use-css-vars': 1, // Enable css variables
    }
},

注意在配置和启用 Css 变量后,如果变量替换较少,则需要同时替换 cs 变量:

// less options
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@base-font-size': 37.5,
        '@primary-color': 'red',
    }
}

// css
:root {
    --base-font-size: 37.5;
    --primary-color: red;
}

使用 PC 上的组件

该部门只监测和处理触摸事件。 如果您需要使用 PC 侧的组件, 您可以导入 touch2mouse.js 由此组件库提供以兼容鼠标事件处理( 注意: 导入此文件后, 下列鼠标事件将被屏蔽: 鼠标下行、 鼠标输入、 鼠标离开、 鼠标移动、 鼠标出行、 鼠标过行和鼠标出行, 无法选择页面内容 ) :

import '@arco-design/mobile-react/tools/touch2mouse';