switch: add prop align_right (#137)

This commit is contained in:
Cecile Tonglet 2022-05-09 12:32:11 +01:00 committed by GitHub
parent 8f2f588e6f
commit 28f879a9a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 0 deletions

View file

@ -10,6 +10,7 @@ pub struct ExampleProps {
pub disabled: bool,
pub inline: bool,
pub large: bool,
pub align_right: bool,
}
impl Component for Example {
@ -42,12 +43,14 @@ impl Component for Example {
inline=self.props.inline
large=self.props.large
label=html!{<strong>{"Enabled"}</strong>}
align_right=self.props.align_right
/>
<Switch
disabled=self.props.disabled
inline=self.props.inline
large=self.props.large
label=html!{<em>{"Public"}</em>}
align_right=self.props.align_right
/>
<Switch
disabled=self.props.disabled
@ -55,6 +58,7 @@ impl Component for Example {
large=self.props.large
checked=true
label=html!{<u>{"Cooperative"}</u>}
align_right=self.props.align_right
/>
<Switch
disabled=self.props.disabled
@ -63,6 +67,7 @@ impl Component for Example {
label=html!{"Containing Text"}
inner_label_checked={"on".to_string()}
inner_label={"off".to_string()}
align_right=self.props.align_right
/>
</div>
}

View file

@ -21,6 +21,7 @@ impl Component for SwitchDoc {
disabled: false,
inline: false,
large: false,
align_right: false,
},
}
}
@ -92,6 +93,14 @@ crate::build_example_prop_component! {
checked=self.props.large
label=html!("Large")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
align_right: !props.align_right,
..props
})
checked=self.props.align_right
label=html!("Align right")
/>
</div>
}
}

View file

@ -24,6 +24,8 @@ pub struct SwitchProps {
pub inner_label_checked: Option<String>,
#[prop_or_default]
pub inner_label: Option<String>,
#[prop_or_default]
pub align_right: bool,
}
impl Component for Switch {
@ -85,6 +87,11 @@ impl Component for Switch {
self.props.inline.then(|| "bp3-inline"),
self.props.large.then(|| "bp3-large"),
self.props.class.clone(),
if self.props.align_right {
"bp3-align-right"
} else {
"bp3-align-left"
},
)
>
<input