Appearance

Change Badge appearance using the following functions as_primary() , as_secondary() , as_success() , as_warning() , as_danger() , as_info() , as_light() , and as_dark() .

from bootwrap import Panel, Badge
panel = Panel(
  Badge("Primary").as_primary(),
  Badge("Secondary").as_secondary(),
  Badge("Success").as_success(),
  Badge("Warning").as_warning(),
  Badge("Danger").as_danger(),
  Badge("Info").as_info(),
  Badge("Light").as_light(),
  Badge("Dark").as_dark()
)
for anchor in panel:
  anchor.mb(1)
panel

Appearance

Change Button appearance using the following functions as_primary() , as_secondary() , as_success() , as_warning() , as_danger() , as_info() , as_light() , and as_dark() .

from bootwrap import Panel, Button
panel = Panel(
  Button("Primary").link("#").as_primary(),
  Button("Secondary").link("#").as_secondary(),
  Button("Success").link("#").as_success(),
  Button("Warning").link("#").as_warning(),
  Button("Danger").link("#").as_danger(),
  Button("Info").link("#").as_info(),
  Button("Light").link("#").as_light(),
  Button("Dark").link("#").as_dark()
)
for anchor in panel:
  anchor.mb(1)
panel

Outline

Make Button without filling with surrounded by color border using the following function as primary() .

from bootwrap import Panel, Button
panel = Panel(
  Button("Primary").link("#").as_primary().as_outline(),
  Button("Secondary").link("#").as_secondary().as_outline(),
  Button("Success").link("#").as_success().as_outline(),
  Button("Warning").link("#").as_warning().as_outline(),
  Button("Danger").link("#").as_danger().as_outline(),
  Button("Info").link("#").as_info().as_outline(),
  Button("Light").link("#").as_light().as_outline(),
  Button("Dark").link("#").as_dark().as_outline()
)
for anchor in panel:
  anchor.mb(1)
panel

Disable

But default the Button always enabled. Use the as_disabled() function to make the Button disabled. Disable status prevent user to initiate any action assigned to the Button .

from bootwrap import Panel, Button
Panel(
  Button("Enabled").as_primary(),
  Button("Disabled").as_primary().as_disabled()
)

Link Resource

Associate Button with a hyperlink using the link() function.

from bootwrap import Panel, Button
Panel(
    Button("Google Search").as_primary().link("https://www.google.com/")
)

Open Dialog

Use Button to open a dialog using the toggle() function.

from bootwrap import Panel, Dialog, Button
dialog = Dialog(
  "Greeting",
  "Hello World!"
)
button = Button("Say Hello").as_primary().toggle(dialog)
Panel(dialog, button)

Close Dialog

Use Button to close a dialog using the dismiss() function.

from bootwrap import Panel, Dialog, Button
dialog = Dialog(
  "Greeting",
  "Hello World!",
  Button("Bye").as_primary().dismiss()
)
button = Button("Say Hello").as_primary().toggle(dialog)  
Panel(dialog, button)

Expand/Collapse Panel

Use Button to expand/collapse a panel using the toggle() function.

from bootwrap import Panel, Button
quote = Panel(
  "Sometimes life is going to hit you in " +
  "the head with a brick. Don’t lose faith."
).as_collapse()
Panel(
  Button("Steve Jobs Quote").as_primary().toggle(quote),
  quote
)

Submit Action

Use Button to submit form content using the submit() function.

Note: to make a form submit do not forget to use the Form function on_submit() , which specifies a URL that handles the post request. For more information view the Form documentation.

from bootwrap import Form, TextInput, Button
Form(
  TextInput("Email", "email", "my@email.com").for_email(),
  Button("Send").as_primary().submit()
)

As check boxes

Group a series of buttons together, which act as check boxes.

from bootwrap import CheckboxInput, ButtonGroup

button1 = CheckboxInput('One', 'opt1').as_button().as_secondary()
button2 = CheckboxInput('Two', 'opt2').as_button().as_secondary()
button3 = CheckboxInput('Three', 'opt3').as_button().as_secondary()

ButtonGroup(button1, button2, button3)

As radio buttons

Group a series of buttons together, which act as radio buttons.

from bootwrap import CheckboxInput, ButtonGroup

button1 = CheckboxInput('One', 'opt').as_radio(1).as_button().as_secondary()
button2 = CheckboxInput('Two', 'opt').as_radio(2).as_button().as_secondary()
button3 = CheckboxInput('Three', 'opt').as_radio(3).as_button().as_secondary()

ButtonGroup(button1, button2, button3)

Question Dialog

An example of how Dialog can be used for confirming a specific action. Make sure that you provide a correct URL, which Confirm Button linked to. You can specify define this URL something like this local/file_system?file_id=1234567&action=delete

from bootwrap import Panel, Dialog, Button

dialog = Dialog(
  "Delete File",
  "Are you sure that you want to delete this file?",
  Button("Confirm").as_danger().dismiss(),
  Button("Cancel").dismiss()
).as_danger()

button = Button("Delete").as_danger().toggle(dialog)   

Panel(dialog, button)

Complex Dialog

An example of how Dialog can be used for buying shares. It contains a web Form where a user can specify an amount (in Dollars) for buying shares. When the user presses the Buy Button , the form will be submitted to the server (at url/to/act ). If the user selects Cancel , the dialog will be closed, discarding the buying action.

from bootwrap import Panel, Form, NumericInput, Dialog, Button

dialog = Dialog(
    "Buy Company Shares",
    Form(
        NumericInput(
            "Amount($)",
            "amount",
            placeholder="enter an amount for buying shares"
        ),
        Button("Cancel").add_classes("float-right").dismiss(),
        Button("Buy").add_classes("float-right").me(2).as_success().
          dismiss()
    )
)
button = Button("Buy Shares").as_primary().toggle(dialog)   

Panel(dialog, button)

jQuery

Use Javascript for creating interactive web content with the help of jQuery.

from bootwrap import Panel, Javascript, Button, Text

label = Text("Answer:").as_strong()
answer = Text("unknown").me(2).ms(2)
btn_yes = Button("Yes").as_success()
btn_no = Button("No").as_danger()

action = Javascript(
  script='''
    $("#btn_yes").on("click",function(){
      $("#answer").text("Yes");
    });
    $("#btn_no").on("click",function(){
      $("#answer").text("No");
    });
  ''',
  submap={
    "answer": answer,
    "btn_yes": btn_yes,
    "btn_no": btn_no
  }
)
Panel(
  label, answer, btn_yes, btn_no, action
)

Appearance

Change Panel appearance using the following functions as_primary() , as_secondary() , as_success() , as_warning() , as_danger() , as_info() , as_light() , and as_dark() .

from bootwrap import Panel, Text
panel = Panel(
  Panel(Text("Primary")).as_primary(),
  Panel(Text("Secondary")).as_secondary(),
  Panel(Text("Success")).as_success(),
  Panel(Text("Warning")).as_warning(),
  Panel(Text("Danger")).as_danger(),
  Panel(Text("Info")).as_info(),
  Panel(Text("Light")).as_light(),
  Panel(Text("Dark").as_light()).as_dark()
)
for anchor in panel:
  anchor.mb(1)
panel

Outline

Make Panel without filling with surrounded by color border using the following function as_outline() .

from bootwrap import Panel, Text
panel = Panel(
  Panel(Text("Primary").as_primary()).as_primary().as_outline(),
  Panel(Text("Secondary").as_secondary()).as_secondary().as_outline(),
  Panel(Text("Success").as_success()).as_success().as_outline(),
  Panel(Text("Warning").as_warning()).as_warning().as_outline(),
  Panel(Text("Danger").as_danger()).as_danger().as_outline(),
  Panel(Text("Info").as_info()).as_info().as_outline(),
  Panel(Text("Light").as_light()).as_light().as_outline(),
  Panel(Text("Dark").as_dark()).as_dark().as_outline()
)
for anchor in panel:
  anchor.mb(1)
panel

Default

Make Toast with and without title .

from bootwrap import Panel, Toast, Button, Icon, Text, Javascript

tst_with_title = Toast(
    title="Bootwrap",
    description="Hello, world! This is a toast message.",
    marker="11 mins ago",
    figure=Icon("fa-solid fa-info"),
)
tst_without_title = Toast(
    description="Hello, world! This is a toast message.",
)

btn_show_toast_with_title = Button("Show toast with title")
btn_show_toast_without_title = Button("Show toast without title")

action = Javascript(
    script='''
    $("#btn_show_toast_with_title").on("click",function(){
        $("#tst_with_title").toast("show");
    });
    $("#btn_show_toast_without_title").on("click",function(){
        $("#tst_without_title").toast("show");
    });
    ''',
    submap={
        "tst_with_title": tst_with_title,
        "tst_without_title": tst_without_title,
        "btn_show_toast_with_title": btn_show_toast_with_title,
        "btn_show_toast_without_title": btn_show_toast_without_title,
    }
)

Panel(
    tst_with_title,
    tst_without_title,
    btn_show_toast_with_title,
    btn_show_toast_without_title,
    action
)

Appearance

Change Toast appearance using the one of the following functions as_primary() , as_secondary() , as_success() , as_warning() , as_danger() , as_info() , as_light() , and as_dark() .

from bootwrap import Panel, Toast, Button, Icon, Text, Javascript

tst_with_title = Toast(
    title="Bootwrap",
    description="Hello, world! This is a toast message.",
    marker="11 mins ago",
    figure=Icon("fa-solid fa-info"),
).as_primary()
tst_without_title = Toast(
    description="Hello, world! This is a toast message.",
).as_primary()

btn_show_toast_with_title = Button("Show toast with title").as_primary()
btn_show_toast_without_title = Button("Show toast without title").as_primary()

action = Javascript(
    script='''
    $("#btn_show_toast_with_title").on("click",function(){
        $("#tst_with_title").toast("show");
    });
    $("#btn_show_toast_without_title").on("click",function(){
        $("#tst_without_title").toast("show");
    });
    ''',
    submap={
        "tst_with_title": tst_with_title,
        "tst_without_title": tst_without_title,
        "btn_show_toast_with_title": btn_show_toast_with_title,
        "btn_show_toast_without_title": btn_show_toast_without_title,
    }
)

Panel(
    tst_with_title,
    tst_without_title,
    btn_show_toast_with_title,
    btn_show_toast_without_title,
    action
)

Outline

Make Toast without filling with surrounded by color border using the following function as_outline() .

from bootwrap import Panel, Toast, Button, Icon, Text, Javascript

tst_with_title = Toast(
    title="Bootwrap",
    description="Hello, world! This is a toast message.",
    marker="11 mins ago",
    figure=Icon("fa-solid fa-info"),
).as_success().as_outline()
tst_without_title = Toast(
    description="Hello, world! This is a toast message.",
).as_success().as_outline()

btn_show_toast_with_title = Button("Show toast with title").as_success().as_outline()
btn_show_toast_without_title = Button("Show toast without title").as_success().as_outline()

action = Javascript(
    script='''
    $("#btn_show_toast_with_title").on("click",function(){
        $("#tst_with_title").toast("show");
    });
    $("#btn_show_toast_without_title").on("click",function(){
        $("#tst_without_title").toast("show");
    });
    ''',
    submap={
        "tst_with_title": tst_with_title,
        "tst_without_title": tst_without_title,
        "btn_show_toast_with_title": btn_show_toast_with_title,
        "btn_show_toast_without_title": btn_show_toast_without_title,
    }
)

Panel(
    tst_with_title,
    tst_without_title,
    btn_show_toast_with_title,
    btn_show_toast_without_title,
    action
)

Delay

Make Toast with custom delay.

from bootwrap import Panel, Toast, Button, Icon, Text, Javascript

tst_example = Toast(
    title="Bootwrap",
    description="Hello, world! This is a toast message will hide in 5 sec.",
    marker="11 mins ago",
    figure=Icon("fa-solid fa-info"),
    hide_delay=5000
)
btn_show_toast = Button("Show toast")

action = Javascript(
    script='''
    $("#btn_show_toast").on("click",function(){
        $("#tst_example").toast("show");
    });
    ''',
    submap={
        "tst_example": tst_example,
        "btn_show_toast": btn_show_toast,
    }
)

Panel(
    tst_example,
    btn_show_toast,
    action
)