catalog:
name: "LBC (Leptos Bulma Components) AI Reference"
version: "0.1.0"
framework: "Leptos 0.8.15 (prelude)"
styling: "Bulma 1.0.4"
context:
imports:
- "leptos::prelude::*"
- "lbc::prelude::*"
common_types:
Size: "Small | Normal | Medium | Large"
Alignment: "Centered | Right"
ButtonColor: "Primary | Link | Info | Success | Warning | Danger | White | Light | Dark | Black | Text"
TagColor: "same as ButtonColor"
global_js_deps:
- "bulma-calendar-js@7.1.2"
- "@creativebulma/bulma-tagsinput@1.0.3"
- "bulma-accordion@2.0.1"
components:
- id: "button"
name: "Button"
props:
color: "Option<ButtonColor>"
size: "Option<Size>"
outlined: "bool"
inverted: "bool"
light: "bool"
loading: "Signal<bool>"
disabled: "Signal<bool>"
classes: "Option<Signal<String>>"
on_click: "Option<Callback<MouseEvent>>"
r#type: "Option<Signal<String>>"
usage: |
view! { <Button color=ButtonColor::Primary on_click=move |_| set_count.update(|n| *n += 1)>"Click"</Button> }
- id: "buttons"
name: "Buttons (Group)"
props:
size: "Option<Size>"
addons: "Signal<bool>"
alignment: "Option<Alignment>"
classes: "Option<Signal<String>>"
usage: |
view! { <Buttons addons=true><Button>"Yes"</Button><Button>"No"</Button></Buttons> }
- id: "notification"
name: "Notification"
props:
toast: "Signal<bool>"
open: "Signal<bool>"
set_open: "Option<Callback<bool>>"
auto_hide_ms: "Signal<i32>"
classes: "Signal<String>"
usage: |
view! {
<Notification classes=Signal::derive(move || "is-info".into())> "Msg" </Notification>
<Notification toast=true open=open set_open=cb auto_hide_ms=5000> "Toast" </Notification>
}
- id: "tag"
name: "Tag"
props:
color: "Option<TagColor>"
size: "Option<Size>"
light: "bool"
rounded: "bool"
classes: "Option<Signal<String>>"
usage: |
view! { <Tag color=TagColor::Success rounded=true>"Active"</Tag> }
- id: "icon"
name: "Icon"
notes: "Wraps FontAwesome. Requires <link> to FA in index.html."
usage: |
view! { <span class="icon"><i class="fas fa-home"></i></span> }
- id: "progress"
name: "Progress"
props:
value: "Signal<Option<u32>>"
max: "Signal<u32>"
color: "Option<TagColor>"
size: "Option<Size>"
usage: |
view! { <Progress value=Signal::derive(move || Some(45)) max=100.into() /> }
- id: "table"
name: "Table"
props:
striped: "bool"
bordered: "bool"
hoverable: "bool"
fullwidth: "bool"
narrow: "bool"
usage: |
view! { <Table striped=true><thead>...</thead><tbody>...</tbody></Table> }
- id: "modal"
name: "Modal / ModalCard"
props:
id: "String (unique)"
open: "Option<Signal<bool>>"
set_open: "Option<WriteSignal<bool>>"
trigger: "Children (button to open)"
usage: |
view! {
<ModalCard id="m1".into() title="Title".into() trigger=|| view! { <Button>"Open"</Button> } footer=|| ()>
"Body content"
</ModalCard>
}
- id: "navbar"
name: "Navbar"
props:
fixed: "Option<NavbarFixed::Top|Bottom>"
transparent: "Signal<bool>"
brand: "Option<Children>"
start: "Option<Children>"
end: "Option<Children>"
usage: |
view! { <Navbar brand=|| view! { <NavbarItem href="/".into()>"Home"</NavbarItem> } /> }
- id: "pagination"
name: "Pagination"
props:
size: "Option<Size>"
alignment: "Option<Alignment>"
rounded: "Signal<bool>"
on_previous: "Option<Callback<()>>"
on_next: "Option<Callback<()>>"
usage: |
view! {
<Pagination>
<PaginationItem item_type=PaginationItemType::Link label="1".into() current=true.into() />
</Pagination>
}
- id: "tabs"
name: "Tabs"
props:
alignment: "Option<Alignment>"
size: "Option<Size>"
boxed: "Signal<bool>"
toggle: "Signal<bool>"
rounded: "Signal<bool>"
fullwidth: "Signal<bool>"
usage: |
view! { <Tabs boxed=true.into()><ul><li class="is-active"><a>"Tab 1"</a></li></ul></Tabs> }
- id: "dropdown"
name: "Dropdown"
props:
hoverable: "Signal<bool>"
button: "Children (trigger)"
usage: |
view! { <Dropdown button=|| view! { "Click" }> <a class="dropdown-item">"Item"</a> </Dropdown> }
- id: "card"
name: "Card"
usage: |
view! { <Card><CardHeader>"Title"</CardHeader><CardContent>"Content"</CardContent></Card> }
- id: "message"
name: "Message"
props:
closable: "Signal<bool>"
usage: |
view! { <Message><MessageHeader>"Hi"</MessageHeader><MessageBody>"Text"</MessageBody></Message> }
- id: "panel"
name: "Panel"
props:
heading: "Option<Signal<String>>"
usage: |
view! { <Panel heading=Some("Title".into())><PanelBlock>"Item"</PanelBlock></Panel> }
- id: "breadcrumb"
name: "Breadcrumb"
props:
separator: "Option<Arrow|Bullet|Dot|Succeeds>"
usage: |
view! { <Breadcrumb><ul><li><a>"Home"</a></li></ul></Breadcrumb> }
- id: "accordion"
name: "Accordion"
usage: |
view! { <Accordions><AccordionItem title="Title" open=true on_toggle=cb> "Body" </AccordionItem></Accordions> }
- id: "calendar"
name: "Calendar"
props:
date: "Signal<String>"
update: "Callback<String>"
date_format: "Signal<String>"
usage: |
view! { <Calendar id="c1".into() date=date set_date=cb /> }
- id: "form_field"
name: "Field"
props:
label: "Option<Signal<String>>"
help: "Option<Signal<String>>"
help_has_error: "Signal<bool>"
horizontal: "Signal<bool>"
addons: "Signal<bool>"
grouped: "Signal<bool>"
usage: |
view! { <Field label=Some("Name".into())><Input ... /></Field> }
- id: "form_input"
name: "Input"
props:
name: "Signal<String>"
value: "Signal<String>"
update: "Callback<String>"
r#type: "Option<InputType::Text|Password|Email|Tel|Number>"
placeholder: "Signal<String>"
size: "Option<Size>"
rounded: "Signal<bool>"
loading: "Signal<bool>"
disabled: "Signal<bool>"
readonly: "Signal<bool>"
r#static: "Signal<bool>"
usage: |
view! { <Input value=name set_name=cb placeholder="Type here...".into() /> }
- id: "form_checkbox"
name: "Checkbox"
props:
checked: "Signal<bool>"
update: "Option<Callback<bool>>"
usage: |
view! { <Checkbox checked=agreed update=set_agreed>"I agree"</Checkbox> }
- id: "form_select"
name: "Select"
usage: |
view! { <div class="select"><select><option>"1"</option></select></div> }
- id: "form_autocomplete"
name: "Autocomplete"
notes: "Requires bulma-tagsinput JS."
usage: |
view! { <Autocomplete on_update=cb /> }
- id: "columns"
name: "Columns"
usage: |
view! { <div class="columns"><div class="column">"1"</div><div class="column">"2"</div></div> }
- id: "container"
name: "Container"
usage: |
view! { <div class="container">...</div> }
- id: "hero"
name: "Hero"
usage: |
view! { <section class="hero is-primary"><div class="hero-body"><p class="title">"Hero"</p></div></section> }