Scroll Area
Scrollable area container component.
Preview
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Scrollable body text.
Arguments
scroll_area(content='<p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p>')
Usage
views.py
python
from djust import LiveView
from djust.components import ScrollArea
from django.utils.safestring import mark_safe
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.component = ScrollArea(content=mark_safe('<p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p><p>Scrollable body text.</p>'))my_template.html
django
{{ component }}Parameters
| Name | Type | Default |
|---|---|---|
| content | str | '' |
| max_height | str | '400px' |
| label | str | 'Scrollable content' |
| custom_class | str | '' |
| **kwargs | — passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state | — |
Source & styles
| File | Path | Notes |
|---|---|---|
| module | djust.components.components.scroll_area | Subclass it, or pass custom_class, to change how it renders. |
| css | djust_components/components.css | Defines 1 of this component's classes at line 1059. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |