Add Toggler widget to iced_web

This commit is contained in:
Kaiden42 2020-10-03 18:26:31 +02:00 committed by Héctor Ramón
parent c0cfd9d5cf
commit e00fca6372
3 changed files with 215 additions and 0 deletions

View file

@ -14,6 +14,9 @@ pub enum Rule {
/// Spacing between elements
Spacing(u16),
/// Toggler input for a specific size
Toggler(u16),
}
impl Rule {
@ -23,6 +26,7 @@ impl Rule {
Rule::Column => String::from("c"),
Rule::Row => String::from("r"),
Rule::Spacing(spacing) => format!("s-{}", spacing),
Rule::Toggler(size) => format!("toggler-{}", size),
}
}
@ -55,6 +59,46 @@ impl Rule {
class
)
.into_bump_str(),
Rule::Toggler(size) => bumpalo::format!(
in bump,
".toggler-{} {{ display: flex; cursor: pointer; justify-content: space-between; }} \
.toggler-{} input {{ display:none; }} \
.toggler-{} span {{ background-color: #b1b1b1; position: relative; display: inline-flex; width:{}px; height: {}px; border-radius: {}px;}} \
.toggler-{} span > span {{ background-color: #FFFFFF; width: {}px; height: {}px; border-radius: 50%; top: 1px; left: 1px;}} \
.toggler-{}:hover span > span {{ background-color: #f1f1f1 !important; }} \
.toggler-{} input:checked + span {{ background-color: #00FF00; }} \
.toggler-{} input:checked + span > span {{ -webkit-transform: translateX({}px); -ms-transform:translateX({}px); transform: translateX({}px); }}
",
// toggler
size,
// toggler input
size,
// toggler span
size,
size*2,
size,
size,
// toggler span > span
size,
size-2,
size-2,
// toggler: hover + span > span
size,
// toggler input:checked + span
size,
// toggler input:checked + span > span
size,
size,
size,
size
)
.into_bump_str(),
}
}
}