标签: mdbootstrap

我使用 MDB 滚动库，VSCode 显示以下警告：

还定义标准属性“box-shadow”以实现兼容性

如何修复它或至少忽略 VSCode 上的警告？

.scrollbar-black::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #000;
}

我正在尝试在我的 Angular 项目中使用 Material Design Bootstrap (MDB)。但是，当我使用 angular bootstrap 组件时，似乎标准 bootstrap 会干扰样式。

从我的 angular 项目中完全删除 bootstrap 以便我的组件仅由 angular bootstrap 设置样式的最佳方法是什么？

编辑

angular.json

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],

包.json ,

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@types/chart.js": "^2.7.52",
    "angular-bootstrap-md": "^7.5.2",
    "atom": "^1.1.0",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.3.3",
    "terminal": "^0.1.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

我对Angular 1.x有一些经验,现在我正在为几个新项目构建一个堆栈.

• 我想有响应式网格,所以我想使用Bootstrap.
• 我想使用Angular,所以我将使用最新的Angular
• 我想要材料设计......所以我可以选择https://material.angular.io/

...但我找到了https://mdbootstrap.com/angular/,它看起来像Bootstrap和Material Design的某种组合,它可以与最新的Angular一起使用.

我很困惑,我不确定这两种方法之间的主要区别是什么.

因此，我一直在关注此处的官方教程，并且此处还需要一个幻灯片指示器，因此我只是复制并修改了此处示例中的代码。

我的标记如下所示：

<div class="container my-5">

  <!-- Section: Introduction -->
  <section class="">

    <p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>

    <p>
      Detailed documentation and more examples you can find in our
      <a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
    </p>
    <p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>


    <hr class="mt-5">

    <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI …

我正在做一个 Instagram 风格的小项目，但具有使用 Larvel 和 MBootstrap 的基本功能。

展示我的设计

我正在制作表格以编辑个人信息。使用Laravel是有效的，我希望当Laravel返回表单错误时，它会在表单页面中显示错误的“Toast Notification”。

这些“toast”通知是通过单击按钮触发的，它们在 HTML 中没有正文，当您调用它们时可以使用它们。

显示“吐司通知”

我该怎么做才能检测到错误，无需按下按钮即可触发此“吐司”？谢谢

我正在尝试将https://mdbootstrap.com/vue/中的材料设计集成到我的NuxtJS项目中，但是我找不到任何有关如何将其添加到nuxt的指示。

对于bootstrap-vue，我将其添加到我的程序nuxt.config.js中，如下所示：

modules: [ 'bootstrap-vue/nuxt', ],

但它似乎不适用于mdbootstrap。

这是请求（已更新）：

this._service.getPeople().subscribe((response) => {
 this.people = response;
});

这是方法：

filterIt(arr: any, searchKey: any) {
        return arr.filter((obj: any) => {
          return Object.keys(obj).some((key) => {
            return obj[key].includes(searchKey);
          });
        });
      }

我想要的结果是过滤表行，但我得到的是：

类型错误：obj[key].includes 不是函数

必须知道的是，这段代码与硬编码的对象数组完美配合，但是当我使用服务 (http.get) 从后端获取数据时，该服务工作正常并返回带有数据的 JSON，但我仍然得到错误。任何帮助，将不胜感激！

我正在使用 Typescript 2.7.2、Angular 6 和 MDBootstrap 6.2.2(Angular)。

我经常遇到这个问题,现在已经坚持了很长时间.我是mbdreact图书馆的新手,我一直在尝试这个链接的例子.这给我调试和理解正在发生的事情带来了太多问题.

问题:

You should not use <Route> or withRouter() outside a <Router>

我可以提取的详细错误跟踪如下:

Uncaught Error: You should not use <Route> or withRouter() outside a <Router>
    at invariant (browser.js:34)
    at Route.computeMatch (Route.js:96)
    at new Route (Route.js:72)
    at constructClassInstance (react-dom.development.js:13082)
    at updateClassComponent (react-dom.development.js:14978)
    at beginWork (react-dom.development.js:15845)
    at performUnitOfWork (react-dom.development.js:18879)
    at workLoop (react-dom.development.js:18920)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18127)
    at renderRoot (react-dom.development.js:19038)
    at performWorkOnRoot (react-dom.development.js:19941)
    at performWork (react-dom.development.js:19851)
    at performSyncWork (react-dom.development.js:19825)
    at requestWork …

我刚刚下载了 mdbootstrap。按照在我的网页上实现侧面导航的说明进行操作后，当我尝试对其进行初始化时出现以下错误：

未捕获的类型错误：$(...).sideNav 不是 index.html:133 中的函数。

请帮忙。我试过重新排列我的文件的顺序，但这似乎没有帮助。

<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
  $(".button-collapse").sideNav();

  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);  
</script>

我正在尝试在我的 fullcalendar 应用程序中显示工具提示。但是如果我包含 bootstrap.css，它就不起作用了。当我在没有它的情况下运行代码时，一切正常。

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'My Event',
      start: '2010-01-01',
      description: 'This is a cool event'
    }
    // more events here
  ],
  eventRender: function(info) {
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body'
    });
  }
});

使用此示例代码来自 Fullcalendar.io 页面和 bootstrap.min.css 被排除在外，一切正常。

编辑：我忘了补充说我也在使用 mdboostrap.css

编辑：显示问题的 Codepen 链接：https ://codepen.io/anon/pen/WqKvYv 。如果您从 CSS 选项工具提示中删除 twitter-bootstrap

您好，我使用react-bootstrap、mdbootstrap 和formik 创建一个登录表单。我希望每次用户按下登录按钮时都会显示登录微调器。我已经弄清楚了如何做到这一点，但是我在将引导旋转器与登录按钮放在同一行时遇到了麻烦

我想要实现这样的目标\n

这是我的代码

render() {\n        return (\n            <Formik\n                validationSchema={schema}\n                onSubmit={this.handleSubmit}\n                initialValues={{username: \'\', password: \'\'}}>\n                {\n                    formProps => (\n                        <Form name=\'form\' onSubmit={formProps.handleSubmit}>\n                            <Form.Group noValidate controlId="loginForm.username">\n                                <Form.Label>Adres e-mail</Form.Label>\n                                <Form.Control\n                                    type="text"\n                                    name="username"\n                                    value={formProps.values.username}\n                                    onChange={e => {\n                                        formProps.handleChange(e);\n                                        const {username} = formProps.initialValues;\n                                        if (formProps.values.username === username) {\n                                            formProps.setFieldTouched(\'username\', false)\n                                        }\n                                    }}\n                                    isInvalid={!!formProps.touched.username && !!formProps.errors.username}\n                                />\n                                <Form.Control.Feedback type="invalid">\n                                    {formProps.errors.username}\n                                </Form.Control.Feedback>\n                            </Form.Group>\n                            <Form.Group controlId="loginForm.password">\n                                <Form.Label>Has\xc5\x82o</Form.Label>\n                                <Form.Control\n                                    type="password"\n                                    name="password"\n                                    value={formProps.values.password}\n                                    onChange={e => {\n                                        formProps.handleChange(e);\n                                        const {password} = formProps.initialValues;\n                                        if (formProps.values.password === password) …

注意：我已经尝试过这个问题中提到的方法，但在我的情况下它们都不起作用。

这是我的分页组件的链接 - pagination.jsx

我希望将pagination具有响应行为的页面中心的组件对齐，我该如何实现？我正在使用material-ui和mdbootstrap两者。

预期产出