MDB 5 Pro插件安装指南

手动安装(zip包)

Step 1

从订单中下载软件包。

Step 2

解压缩下载的软件包,然后在代码编辑器中将其打开。您将在其中找到5个文件夹:

  • css -包含缩小的MDB 5样式。
  • img -包含图片(收藏夹)。
  • js -包含最小的MDB 5代码。
  • plugins -包含缩小的插件样式和代码。
  • src -包含MDB 5和插件源代码。

此外,您还将找到包含导入的MDB 5和所有插件的 index.html 文件。

在 外挂程式 文件夹中,您将找到文件 all.min.js all.min.css 。这些文件包含所有插件的代码和样式。

第三步

如果您决定只使用一些插件,我们建议仅导入这些插件。为此,您需要在 index.html 文件中进行以下更改:

删除导入的插件 css js 文件:
< link rel =" stylesheet" href =" plugins / css / all.min.css" />
< script type =" text / javascript" src =" plugins / js / all.min.js">< / script>

添加要使用的插件的 css js 文件导入。例如日历插件:
< link rel =" stylesheet" href =" plugins / css / calendar.min.css" />
< script type =" text / javascript" src =" plugins / js / calendar.min.js">< / script>

第4步

浏览我们的文档(左侧菜单中的"插件"部分)。选择你的插件 例如,将其复制到您的项目中并组成您的网站。是的,这是 这么简单!


NPM-新项目

先决条件

在开始项目之前,请确保安装 节点LTS (12.x.x 推荐)并生成gitlab访问令牌

安装

注意: 对于此说明,我们将使用Calendar插件作为示例。 如果要使用其他插件,请记住更改插件名称和路径。

要在您的项目中安装MDB UI KIT,请在 终奌站。在开始安装之前,请记住交换访问令牌。
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

然后安装您要使用的插件:
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/calendar

导入JS模块

import * as mdb from 'mdb-ui-kit'; // lib
import { Calendar } from 'mdb-calendar'; // plugin
window.mdb = mdb // add lib as a global object

导入CSS文件

要导入MDB样式表,请使用以下语法:
@import'〜mdb-ui-kit / css / mdb.min.css'; // lib
@import'〜mdb-calendar / css / calendar.min.css'; //插件

导入SCSS模块

您也可以导入单个SCSS模块。为了做到这一点,我们 建议从node_modules / mdb-ui-kit / src / scss和node_modules / mdb-calendar / src / scss位置复制它们 直接导入到您的项目中,并以与CSS文件相同的方式导入。

Webpack集成

您可以大大加快创建基于新项目的过程 在Webpack上使用我们的入门工具。

MDB Webpack Starter

NPM-现有项目

先决条件

在开始项目之前,请确保安装 节点LTS (12.x.x 推荐)并生成gitlab访问令牌

安装

注意: 对于此说明,我们将使用Calendar插件作为示例。 如果要使用其他插件,请记住更改插件名称和路径。

要在您的项目中安装插件,请在 终奌站。在开始安装之前,请记住交换访问令牌。
npm我git + https:// oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/calendar

导入JS模块

import { Calendar } from 'mdb-calendar';

导入CSS文件

要导入插件样式表,请使用以下语法:
@import'〜mdb-calendar / css / calendar.min.css';

导入SCSS模块

您也可以导入单个SCSS模块。为了做到这一点,我们 建议从node_modules / mdb-ui-kit / src / scss和node_modules / mdb-calendar / src / scss位置复制它们 直接导入到您的项目中,并以与CSS文件相同的方式导入。