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.