Bootstrap 5 widgets for Lona
Project description
This package contains Lona nodes and widgets for Bootstrap 5.
Supported components:
Grid System
Upstream documentation: Link
from lona_bootstrap_5 import ColMd6, Col, Row
Row(
ColMd6('foo'),
ColMd6('bar'),
)
Row(
Col('foo'),
Col('bar'),
Col('baz'),
)
TextInputs and TextAreas
Upstream documentation: Link
TextInput and TextArea work exactly like Lona TextInputs and are just styled by Bootstrap.
from lona_bootstrap_5 import TextInput, TextAreas
Spinners
Upstream documentation: Link
The first argument will be shown to screen readers, if no arguments are passed the default is “Loading…”
from lona_bootstrap_5 import (
GrowPrimarySpinner,
GrowSecondarySpinner,
GrowSuccessSpinner,
GrowDangerSpinner,
GrowWarningSpinner,
GrowInfoSpinner,
GrowLightSpinner,
GrowDarkSpinner,
BorderPrimarySpinner,
BorderSecondarySpinner,
BorderSuccessSpinner,
BorderDangerSpinner,
BorderWarningSpinner,
BorderInfoSpinner,
BorderLightSpinner,
BorderDarkSpinner,
)
GrowPrimarySpinner("Loading the page...")
Alerts
Upstream documentation: Link
from lona_bootstrap_5 import (
PrimaryAlert,
SecondaryAlert,
SuccessAlert,
DangerAlert,
WarningAlert,
InfoAlert,
LightAlert,
DarkAlert,
)
Badges
Upstream documentation: Link
from lona_bootstrap_5 import (
PrimaryBadge,
SecondaryBadge,
SuccessBadge,
DangerBadge,
WarningBadge,
InfoBadge,
LightBadge,
DarkBadge,
)
Modal
Upstream documentation: Link
from lona_bootstrap_5 import Modal
Modal(fade=True, scrollable=False, centered=False)
Properties
Modal.fade: (bool) If True modal is animated
Modal.centered: (bool) If True modal is vertically centred
Modal.scrollable: (bool) If True modal is scrollable
Modal.buttons: (list) Contains all buttons added using Modal.set_buttons()
Methods
Modal.show(): Makes the modal visible (modals are invisible by default)
Modal.hide(): Makes the modal invisible (modals are invisible by default)
Modal.set_title(*nodes): Sets the modal title
Modal.set_body(*nodes): Sets the modal body
Modal.set_buttons(*buttons): Sets the modal buttons (set buttons are available in Modal.buttons)
Example
from lona_bootstrap_5 import Modal, PrimaryButton
from lona import LonaView, LonaApp
from lona.html import HTML, H1
app = LonaApp(__file__)
@app.route('/')
class MyModalView(LonaView):
def handle_request(self, request):
modal = Modal()
html = HTML(
H1('My Modal'),
PrimaryButton('Open Modal', _id='open-modal'),
modal,
)
self.show(html)
# wait for button to be clicked
self.await_click()
# button was clicked; show modal
with html.lock:
modal.set_title('My Modal')
modal.set_body('Lorem Ipsum')
modal.set_buttons(
PrimaryButton('Close')
)
modal.show()
self.show(html)
# wait for modal button to be clicked
self.await_click(modal.buttons)
# modal button was clicked; hide modal
modal.hide()
return html
app.run(port=8080)
Progress
Upstream documentation: Link
from lona_bootstrap_5 import Progress
Progress(*label, background=None, value=None, percentage=None,
striped=False, animated=False)
Properties
Modal.background: (str) [‘’|success|info|warning|danger]
Modal.value: (int) Current progress value between 0 and 100
Modal.striped: (bool) Enables Bootstraps striped style
Modal.animated: (bool) Enables Bootstrap animations
Methods
Modal.set_labal(*nodes): Sets label
Modal.set_percentage(percentage): Sets the value the given value and calls Modal.set_label()
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.