Appearance
ScrollView
Contenedor con scroll y barra personalizada estilo terminal.
ScrollView
Demo
Línea 1: contenido desplazable
Línea 2: contenido desplazable
Línea 3: contenido desplazable
Línea 4: contenido desplazable
Línea 5: contenido desplazable
Línea 6: contenido desplazable
Línea 7: contenido desplazable
Línea 8: contenido desplazable
Línea 9: contenido desplazable
Línea 10: contenido desplazable
Línea 11: contenido desplazable
Línea 12: contenido desplazable
Línea 13: contenido desplazable
Línea 14: contenido desplazable
Línea 15: contenido desplazable
Línea 16: contenido desplazable
Línea 17: contenido desplazable
Línea 18: contenido desplazable
Línea 19: contenido desplazable
Línea 20: contenido desplazable
vue
<ScrollView maxHeight="120px">
<div v-for="i in 20" :key="i">Línea {{ i }}: contenido desplazable</div>
</ScrollView>Props
maxHeight
Altura máxima del contenedor antes de activar el scroll.
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
vue
<ScrollView maxHeight="80px">
<ScrollView maxHeight="160px">showBar
Muestra u oculta la barra de scroll personalizada.
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
Línea 11
Línea 12
Línea 13
Línea 14
Línea 15
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
Línea 11
Línea 12
Línea 13
Línea 14
Línea 15
vue
<ScrollView maxHeight="100px" showBar>
<ScrollView maxHeight="100px" :showBar="false">color
Color del thumb de la barra al hacer hover.
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
Línea 1
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
vue
<ScrollView maxHeight="100px" color="primary">
<ScrollView maxHeight="100px" color="success">
<ScrollView maxHeight="100px" color="danger">API
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark' | 'primary' | Color del thumb al hover |
maxHeight | string | '300px' | Altura máxima antes del scroll |
showBar | boolean | true | Mostrar barra personalizada |
Slots
| Slot | Description |
|---|---|
default | Contenido a desplazar |
Tokens usados
--font-mono, --bg, --border, --color-*