Estoy tratando de ver si hay una manera eficiente de mostrar solo los íconos y no el texto cuando se ve en la vista móvil. Solo quiero mostrar los íconos y no el texto como 'Anterior' o 'Siguiente'
Ella es mi HTML:
<router-link v-if="myprevLink" :to="'/' + myprevLink"> <i class="fas fa-angle-double-left"></i> Previous </router-link> <span class="disabled" v-else ><i class="fas fa-angle-double-left"></i> Previous </span> <router-link v-if="mynextLink" :to="'/' + mynextLink"> Next <i class="fas fa-angle-double-right"></i> </router-link> <span class="disabled" v-else> Next <i class="fas fa-angle-double-right"></i> </span>La única forma en que estaba pensando era agregar un lapso y poner mi texto allí y luego usar consultas de medios. Como esto:
<router-link v-if="myprevLink" :to="'/' + myprevLink"> <i class="fas fa-angle-double-left"></i><span class = "activePrevLink"> Previous</span> </router-link> <span class="disabled" v-else ><i class="fas fa-angle-double-left"></i><span class = "disabledPrevLink"> Previous</span> </span> <router-link v-if="mynextLink" :to="'/' + mynextLink"> <span class = "activeNextLink">Next</span><i class="fas fa-angle-double-right"></i> </router-link> <span class="disabled" v-else> <span class = "disabledNextLink">Previous</span><i class="fas fa-angle-double-right"></i> </span>Pero al hacerlo de esta manera, estoy creando 4 de estas etiquetas de intervalo. ¿Hay una mejor manera de hacerlo y mejorar este HTML actual?
No necesita agregar la etiqueta span, puede lograrlo usando consultas de medios css y propiedades de visibilidad como esta.
@media(max-width:600px) { router-link, .disabled { visibility: hidden; } i::after, i::before { visibility: visible; } } <router-link v-if="myprevLink" :to="'/' + myprevLink"> <i class="fas fa-angle-double-left"></i> Previous </router-link> <span class="disabled" v-else ><i class="fas fa-angle-double-left"></i> Previous </span> <router-link v-if="mynextLink" :to="'/' + mynextLink"> Next <i class="fas fa-angle-double-right"></i> </router-link> <span class="disabled" v-else> Next <i class="fas fa-angle-double-right"></i> </span>