MDB 5

marc parthoens asked 3 years ago

Expected behavior Hi,

Is it reasonable to start a new application that must be delivered in 2 months with MDB5. Documentation is very poor. Is MDB4 documentation can be used? Is 1.4.0 the latest realease?

Actual behavior

Resources (screenshots, code snippets etc.)


Arkadiusz Idzikowski staff answered 3 years ago

The MDB4 Angular and MDB5 Angular are different products with separate documentation, MDB4 documentation can't be used for MDB5 components. You would need to check the documentation of both products and decide which one suits your needs better.

Could you please provide more information about the problems with docs pages? We would highly appreciate any feedback.

Edit:

An example of double navigation:

<mdb-sidenav-layout>
  <mdb-sidenav #sidenav="mdbSidenav" [mode]="'side'">
    <ul class="sidenav-menu">
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 2</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 3</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 4</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 5</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 3</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 5</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 6</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 4</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 7</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 8</a>
          </li>
        </ul>
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- Container wrapper -->
      <div class="container-fluid">
        <!-- Toggler -->
        <button
          #sidenavToggle
          class="btn btn-primary me-3"
          (click)="sidenav.toggle()"
        >
          <i class="fas fa-bars"></i>
        </button>
        <!-- Toggler -->

        <!-- Navbar brand -->
        <a class="navbar-brand" href="#">Brand</a>

        <!-- Toggle button -->
        <button
          class="navbar-toggler"
          type="button"
          (click)="basicNavbar.toggle()"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="fas fa-bars"></i>
        </button>

        <!-- Collapsible wrapper -->
        <div
          class="collapse navbar-collapse"
          id="navbarSupportedContent"
          mdbCollapse
          #basicNavbar="mdbCollapse"
        >
          <!-- Left links -->
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link disabled"
                href="#"
                tabindex="-1"
                aria-disabled="true"
                >Disabled</a
              >
            </li>
          </ul>
          <!-- Left links -->

          <!-- Search form -->
          <form class="d-flex input-group w-auto">
            <input
              type="search"
              class="form-control"
              placeholder="Type query"
              aria-label="Search"
            />
            <button class="btn btn-outline-primary" type="button">
              Search
            </button>
          </form>
        </div>
        <!-- Collapsible wrapper -->
      </div>
      <!-- Container wrapper -->
    </nav>
    <!-- Navbar -->
  </mdb-sidenav-content>
</mdb-sidenav-layout>

marc parthoens commented 3 years ago

I am looking for an example of double navigation that keeps toggle button and navbar on same line on Mdb 5


Arkadiusz Idzikowski staff commented 3 years ago

@marc parthoens I added an example of double navigation to my answer.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: pc
  • Browser: chrome
  • OS: win 10
  • Provided sample code: No
  • Provided link: No