@alifd/next NPM

English | 简体中文

You can customize your own DesignSystem via Collaboration Platform.💖 Designers will receive design materials by Fusion Cool - an easy to use plugin on sketch. Developers will get code fragment on IceWorks. At the same time, the consistency between code and visual manuscript is guaranteed. 😍

howtouse

🤔 Why use

@alifd/next usually used with Fusion Design to improving designer-developer collaboration and development efficiency. Designer can customize the UI of components and release an npm theme package. Developer can use this theme package directly, and don't need to care about the UI refactoring. It saves the workload of reductive degree review repeatedly with designers, and greatly improves the development efficiency.

npm.io

💻 Browser Compatibility


✔	✔	✔	9+ ✔	✔	✔	✔

🚀 Quick Start

🛠 Install

1.Use NPM ( Recommend )

npm install @alifd/next --save

2.Import in Browser

Use the script and link tags in the browser to directly import the file and use the global variable Next. We provide files such as next.js/next.min.js and next.css/next.min.css in the @alifd/next/dist directory in the npm package, or via unpkg Download it.

<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />

<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>

// The above ways import latest @alifd/next, we recommend you specify version.
<script src="https://unpkg.com/@alifd/next@1.8.6/dist/next.min.js"></script>

// Or import as your own static resource
<script src="../build/public/@alifd/next.js"></script>

☔️ Dependencies

@alifd/next is based on react@16 development and is currently not compatible with versions below react@16. react/react-dom is used as peerDependencies, which requires the user to manually install or import it.
@alifd/next use moment library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it.

🎯 Import

Import All

import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';

import { Button, Input } from '@alifd/next';

Import module with plugin

1. Import module manually

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

2. Use with babel-plugin-import ( Recommend )

// webpack babel loader option or .babelrc
{
    // ...
    plugins: [
        [
            'import',
            {
                libraryName: '@alifd/next',
                style: true,
            },
        ],
    ];
}

It will transform code as below

import { Button } from '@alifd/next';

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

🔗 Advanced

🌈 Contributing

Use Gitpod, a free online dev environment for GitHub.

Or clone locally:

Contributing

📣 Join Group

Use Dingtalk App scan the Qrcode to join in Dingtalk Group :

fusion fusion design next component ui toolkit react react-components components design frontend

dayjs tslib big.js classnames prop-types @alifd/field babel-runtime @alifd/overlay @alifd/validate lodash.clonedeep react-transition-group shallow-element-equals hoist-non-react-statics react-lifecycles-compat resize-observer-polyfill @types/react-transition-group

your-material zw-edit-protable g-lc-antd-materials @js_lee/peiqi-materials @cframework/webcore cyj1 dtt-comps-app scaffolds-data allen-test-project syfed-table-demo project-amis-example-scaffold dn-template-devata-list @fd.xy/page-header @fd.xy/empty-content-block zl-materials-scaffold theme-210325 build-plugin-fisher-pc-theme zss-scaffold sto-design react-example-scaffold anchor-components-modal-fusion anchor-components-table-fusion matirial1 input-ms future-components gaia-upload-image lalala-whg-test-block lowcode-setter-setter-test test-sto grt-comps pipu11qiao-hello @material-test/lite @material-test/next-lite @wanjiekeji/test-material flex-block @jiankeyihao/c1 @jiankeyihao/c2 leon-alilc-cool-card ljc-material tmi-login gcw-lowcode-app-material @infinitebrahmanuniverse/nolb-_alifd_n @itsccn/card dtt-comps tz-lowcode-materials lowcode-marterial luo-material new-material-cyj imaterial itpsp-tv jhsz-material zyc-first-material hunter-material digicentre-circle-progress-bar @ohlyf/lc-common-tab-container @ohlyf/lc-common-tab-item @ohlyf/your-material-demo @everything-registry/sub-chunk-45 ydy-yizhan-material admin-material1 digitalcnzz-interface-setter meterial-demo lowcode-material1 editor-project-name material-group @tonychan/lowcode-materials react-complib-itfeiniu react-comp-itfeiniu hc-lc-component-test hc-lc-components-lib bodor-edit-table bodor-fusion-ui midend-ddm-gg my-materual-demo afs-home-demo cjy-components tao-material-a1 taro-metarial-fengyuan-demo taro-metarial-fengyuan-demos swms-contentheader-cpn sy-antd-material syfed-scaffold syfed-table syfed-tree-select table-bill table-brush-copy tag-drop test-ali-component test-ali-element test-demo-balloon-confirm1 test-demo-element test-demo-example-scaffold test-demo-lowcode test-formily test-example-table test-meterial test-meterial-hmf test-meterilas-abc test-metrial test-lowcode-title

2 months ago

2 months ago

3 months ago

3 months ago

4 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago