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

View file

@ -21,6 +21,7 @@ impl Component for SwitchDoc {
disabled: false, disabled: false,
inline: false, inline: false,
large: false, large: false,
align_right: false,
}, },
} }
} }
@ -92,6 +93,14 @@ crate::build_example_prop_component! {
checked=self.props.large checked=self.props.large
label=html!("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> </div>
} }
} }

View file

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