No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to hide expansion-item arrow?

    Help
    2
    3
    1529
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      matt271 last edited by

      ff7db449-d9cf-459d-ae5d-4c6ded0186f0-image.png

      these items are links.

      1 Reply Last reply Reply Quote 0
      • M
        matt271 last edited by matt271

        codes

        <template>
          <q-layout view="lHh Lpr lFf">
            <q-header elevated class="glossy">
              <q-toolbar>
                <q-btn
                  flat
                  dense
                  round
                  @click="leftDrawerOpen = !leftDrawerOpen"
                  aria-label="Menu"
                  icon="menu"
                />
        
                <q-toolbar-title>Quasar App</q-toolbar-title>
        
                <div>Quasar v{{ $q.version }}</div>
              </q-toolbar>
            </q-header>
        
            <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-2">
              <q-list>
                <q-expansion-item
                  expand-separator
                  icon="mail"
                  :label="menu.menu_name"
                  default-opened
                  v-bind:key="menu.id"
                  v-for="menu in menus"
                  :to="menu.children?null:menu.path"
                >
                  <q-expansion-item
                    :header-inset-level="1"
                    expand-separator
                    v-bind:key="children_menu.id"
                    v-for="children_menu in menu.children"
                    :to="children_menu.path"
                    :label="children_menu.menu_name"
                  ></q-expansion-item>
                </q-expansion-item>
              </q-list>
            </q-drawer>
            <q-page-container></q-page-container>
          </q-layout>
        </template>
        
        <script>
        export default {
          name: "LayoutDefault",
        
          components: {},
        
          data() {
            return {
              menus: [
                {
                  id: 6,
                  parent_id: 0,
                  menu_name: "机构管理",
                  menu_icon: "",
                  order: 100,
                  path: "company",
                },
                {
                  id: 1,
                  parent_id: 0,
                  menu_name: "RBAC权限管理",
                  menu_icon: "",
                  order: 200,
                  path: "",
                  children: [
                    {
                      id: 2,
                      parent_id: 1,
                      menu_name: "用户管理",
                      menu_icon: "",
                      order: 100,
                      path: "rbac/users",
                    },
                    {
                      id: 4,
                      parent_id: 1,
                      menu_name: "角色管理",
                      menu_icon: "",
                      order: 200,
                      path: "rbac/roles",
                    },
                    {
                      id: 3,
                      parent_id: 1,
                      menu_name: "权限管理",
                      menu_icon: "",
                      order: 300,
                      path: "rbac/permissions",
                    },
                    {
                      id: 5,
                      parent_id: 1,
                      menu_name: "菜单管理",
                      menu_icon: "",
                      order: 400,
                      path: "rbac/menus",
                    },
                  ],
                },
              ],
              leftDrawerOpen: false,
            };
          },
        };
        </script>
        
        <style>
        </style>
        
        
        1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel last edited by dobbel

          why use an expansion item when you don’t want an expansion item? I used a Q-Item instead of q-expansion item for the second level.

          <template>
              <q-layout view="lHh Lpr lFf">
                  <q-header elevated class="glossy">
                      <q-toolbar>
                          <q-btn
                              flat
                              dense
                              round
                              @click="leftDrawerOpen = !leftDrawerOpen"
                              aria-label="Menu"
                              icon="menu"
                          />
          
                          <q-toolbar-title>Quasar App MVD</q-toolbar-title>
          
                          <div>Quasar v{{ $q.version }}</div>
                      </q-toolbar>
                  </q-header>
          
                  <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-2">
                      <q-list>
                          <q-expansion-item
                              expand-separator
                              icon="mail"
                              :label="menu.menu_name"
                              default-opened
                              v-bind:key="menu.id"
                              v-for="menu in menus"
                              :to="menu.children?null:menu.path"
                          >
                              <q-item
                                  :inset-level="1"
                                  clickable
                                  tag="a"
                                  :to="children_menu.path"
                                  active-class="my-menu-link"
                                  v-for="children_menu in menu.children"
                                  v-bind:key="children_menu.id"
                              >
                                  <q-item-section>
                                      <q-item-label class="text-weight-medium">{{children_menu.menu_name}}</q-item-label>
                                  </q-item-section>
                              </q-item>
          <!--                    <q-expansion-item-->
          <!--                        :header-inset-level="1"-->
          <!--                        expand-separator-->
          <!--                        v-bind:key="children_menu.id"-->
          <!--                        v-for="children_menu in menu.children"-->
          <!--                        :to="children_menu.path"-->
          <!--                        :label="children_menu.menu_name"-->
          <!--                    ></q-expansion-item>-->
                          </q-expansion-item>
                      </q-list>
                  </q-drawer>
          
              </q-layout>
          </template>
          
          <script>
          export default {
              name: 'LayoutDefault',
          
              components: {},
          
              data () {
                  return {
                      menus: [
                          {
                              id: 6,
                              parent_id: 0,
                              menu_name: '机构管理',
                              menu_icon: '',
                              order: 100,
                              path: 'company'
                          },
                          {
                              id: 1,
                              parent_id: 0,
                              menu_name: 'RBAC权限管理',
                              menu_icon: '',
                              order: 200,
                              path: '',
                              children: [
                                  {
                                      id: 2,
                                      parent_id: 1,
                                      menu_name: '用户管理',
                                      menu_icon: '',
                                      order: 100,
                                      path: 'rbac/users'
                                  },
                                  {
                                      id: 4,
                                      parent_id: 1,
                                      menu_name: '角色管理',
                                      menu_icon: '',
                                      order: 200,
                                      path: 'rbac/roles'
                                  },
                                  {
                                      id: 3,
                                      parent_id: 1,
                                      menu_name: '权限管理',
                                      menu_icon: '',
                                      order: 300,
                                      path: 'rbac/permissions'
                                  },
                                  {
                                      id: 5,
                                      parent_id: 1,
                                      menu_name: '菜单管理',
                                      menu_icon: '',
                                      order: 400,
                                      path: 'rbac/menus'
                                  }
                              ]
                          }
                      ],
                      leftDrawerOpen: false
                  }
              }
          }
          </script>
          
          <style>
          </style>
          

          Image of q-item

          1 Reply Last reply Reply Quote 0
          • First post
            Last post