Elige target="window" para observar el desplazamiento de la página o target="parent" para el elemento padre inmediato. Asigna a ese padre una altura limitada y overflow:auto. threshold es una distancia vertical en píxeles; el botón aparece al superarla. behavior elige auto o smooth. El chevron predeterminado está integrado y no necesita proveedor de iconos.
Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.
El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.
Template generado con tus opciones actuales. Abre Código para consultar el ejemplo completo.
template.html
<neu-scroll-area
maxHeight="16rem"
[mask]="false"
ariaLabel="Panel de lectura desplazable"
>
<!-- Add your scrollable content here. -->
<neu-scroll-top
target="parent"
behavior="smooth"
[threshold]="100"
[buttonAriaLabel]="'Volver al inicio'"
/>
</neu-scroll-area>
ScrollTop observa el desplazamiento del navegador y mueve su destino al activarse. No tiene Outputs. icon resuelve una clave de icono opcional aportada por la aplicación; neuScrollTopIcon sustituye el icono visual con contenido proyectado y conserva la etiqueta del botón nativo.
Traduce buttonAriaLabel para describir el destino. Tab accede al botón visible; Intro o Espacio lo activan. Los iconos decorativos del Template deben usar aria-hidden. El componente comprueba que existe un navegador y no accede a una ventana inexistente durante el renderizado en servidor.
Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template disponible tiene un ejemplo con Demo y Código.
Inputs
Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.
Distancia vertical en píxeles que debe superarse para mostrar el botón.
Templates
ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.
Personaliza los tokens públicos disponibles y comprueba ambos temas. Las ilustraciones y el estado de los ejemplos no son Inputs de Core.
Tokens específicos
Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.
Tokens compartidos utilizados
Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.
Token
Efecto aquí
Otros efectos
Valor / alternativa
--neu-primary
Color de marca en controles activos y énfasis
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#007aff
--neu-primary-fg
Contenido dibujado sobre el fondo primario
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#ffffff
--neu-primary-solid
Fondo de las acciones de marca sólidas
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#006ee6
--neu-primary-solid-fg
Contenido de las acciones de marca sólidas
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#ffffff
--neu-focus-ring-color
Valor del tema heredado que utiliza este componente
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
var(--neu-focus-color)
--neu-radius-full
Radio de esquina
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
9999px
--neu-shadow-lg
Elevación de la superficie o capa
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
