es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vuetify treeview desplazamiento horizontal

13 Jul, 2023 Programación

Tengo problemas para conseguir que el desplazamiento horizontal funcione con v-treeview en Vue:

Código:

<div id="app">
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app="" width="150">
      <v-treeview v-model="tree" :open="initiallyOpen" :items="items" activatable="" item-key="name" open-on-click="" overflow-x-auto="">
        <template v-slot:prepend="{ item, open }">
          <v-icon v-if="!item.file">
            {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
          </v-icon>
          <v-icon v-else="">
            {{ files[item.file] }}
          </v-icon>
        </template>
      </v-treeview>
    </v-navigation-drawer>
    <v-main>
      Objects...
    </v-main>
  </v-app>
</div>

CodePen: https://codepen.io/moi90/pen/mdBVMXX

Los elementos que son demasiado anchos se abrevian. En cambio, quiero que el v-treeview tenga desplazamiento horizontal. ¿Cómo puedo lograr esto?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el v-treeview sea desplazable horizontalmente, puedes agregar la propiedad CSS overflow-x: auto; al div que contiene el componente v-treeview, de la siguiente manera:

    <div id="app">
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app="" width="150">
      <div class="tree-view-container">
        <v-treeview v-model="tree" :open="initialmenteOpen" :items="items" activatable="" item-key="name" open-on-click="">
          <template v-slot:prepend="{ item, open }">
            <v-icon v-if="!item.file">
              {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
            </v-icon>
            <v-icon v-else="">
              {{ files[item.file] }}
            </v-icon>
          </template>
        </v-treeview>
      </div>
    </v-navigation-drawer>
    <v-main>
      Objetos...
    </v-main>
  </v-app>
</div>

    Y luego agrega el siguiente CSS a la sección de estilos o a la hoja de estilos externa:

    .tree-view-container {
  overflow-x: auto;
  white-space: nowrap;
}

    Esto permitirá que el v-treeview sea desplazable horizontalmente y evitará que el texto largo sea abreviado.

Comments are closed.