Markdown docs
ScrollView
This is the Twig implementation of the ScrollView component.
Basic example usage:
<ScrollView data-spirit-toggle="scrollView">ScrollView</ScrollView>Advanced example usage:
<ScrollView direction="horizontal" overflowDecorators="both" data-spirit-toggle="scrollView"
>ScrollView content</ScrollView
>Without lexer:
{% embed "@spirit/scrollView.twig" with { props: {
direction: 'horizontal',
overflowDecorators: 'both',
data-spirit-toggle: 'scrollView'
}} %}
{% block content %}
ScrollView content
{% endblock %}
{% endembed %}JavaScript Plugin
For full functionality, you need to provide Spirit JavaScript:
<script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>Please consult the main README for how to include JavaScript plugins.
Or, feel free to write the controlling script yourself.
👉 Check the component's docs in the web package to see the full documentation and API of the plugin.
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| direction | [horizontal | vertical] | vertical | ✕ | Direction of the scroll |
| isScrollbarDisabled | bool | false | ✕ | If true, the Scrollbar is disabled |
| overflowDecorators | [borders | shadows | both] | shadows | ✕ | Type of overflow decorators |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.