Encabezados de cuarto nivel: falta un nivel de indentación

He encontrado un problema al usar el componente DiscoTOC:

Los encabezados de cuarto nivel en la barra de desplazamiento derecha parecen tener un nivel de sangría menos en comparación con los encabezados de tercer nivel.

Ya he revisado el texto original y no he encontrado errores de sintaxis.
image

¿Podría alguien explicarme la posible razón de esto? Además, me pregunto si hay alguna solución disponible para este problema.

1 me gusta

Creo que es a propósito no reducir demasiado los títulos en la tabla de contenido cuando hay demasiada sangría.

La forma más fácil de lograr un relleno incremental sería apuntar a <li> o <a> dentro (usando sus clases, ya que tienen clases relacionadas con su nivel de encabezado) y agregar un padding-left.

¡Gracias por tu respuesta!

Sin embargo, ¿no requeriría la implementación de esta solución la modificación del código HTML? ¿Podrías proporcionar una guía más específica sobre cómo abordar este problema?

Primero, los títulos de \u003ch3\u003e a \u003ch5\u003e no se pueden contraer en la tabla de contenido (TOC). Se debe realizar un cambio en el componente para permitir este comportamiento. \u003ch6\u003e son ignorados por el componente.

Pero como solo estás hablando de anidación, este SCSS debería ser suficiente para lo que quieres:

.d-toc-main #d-toc li.d-toc-item {
    .d-toc-h4 {
        padding-left: 1.25em;
    }
    .d-toc-h5 {        
        padding-left: 2em;
    }
}

2 Me gusta

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.