1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
use derive_more::Display;
use yew::prelude::*;
#[derive(Clone, Debug, Properties, PartialEq)]
pub struct HeroProps {
/// Extra classes for the hero container.
#[prop_or_default]
pub classes: Classes,
/// The contents of the hero-head section.
#[prop_or_default]
pub head: Option<Html>,
/// Optional classes to add to the hero-head container.
#[prop_or_default]
pub head_classes: Classes,
/// The contents of the hero-body section.
pub body: Html,
/// Optional classes to add to the hero-body container.
#[prop_or_default]
pub body_classes: Classes,
/// The contents of the hero-foot section.
#[prop_or_default]
pub foot: Option<Html>,
/// Optional classes to add to the hero-foot container.
#[prop_or_default]
pub foot_classes: Classes,
/// If you are using a [fixed navbar](https://bulma.io/documentation/components/navbar/#fixed-navbar),
/// you can use the `fixed_nav=true` modifier on the hero for it to occupy the viewport height minus
/// the navbar height.
///
/// https://bulma.io/documentation/layout/hero/#fullheight-with-navbar
#[prop_or_default]
pub fixed_nav: bool,
/// Generate a subtle gradient for the hero.
#[prop_or_default]
pub bold: bool,
/// The size for this hero.
#[prop_or_default]
pub size: Option<HeroSize>,
}
/// An imposing hero banner to showcase something.
///
/// [https://bulma.io/documentation/layout/hero/](https://bulma.io/documentation/layout/hero/)
#[function_component(Hero)]
pub fn hero(props: &HeroProps) -> Html {
let class = classes!(
"hero",
props.classes.clone(),
props.fixed_nav.then_some("is-fullheight-with-navbar"),
props.bold.then_some("is-bold"),
props.size.as_ref().map(|size| size.to_string()),
);
// Build the header section.
let head = if let Some(head) = &props.head {
let class = classes!("hero-head", props.head_classes.clone());
html! {<div {class}>{head.clone()}</div>}
} else {
html! {}
};
// Build the footer section.
let foot = if let Some(foot) = &props.foot {
let class = classes!("hero-foot", props.foot_classes.clone());
html! {<div {class}>{foot.clone()}</div>}
} else {
html! {}
};
let body_classes = classes!("hero-body", props.body_classes.clone());
html! {
<section {class}>
{head}
<div class={body_classes}>{props.body.clone()}</div>
{foot}
</section>
}
}
/// The 4 sizes available for heroes.
///
/// [https://bulma.io/documentation/layout/hero/#sizes](https://bulma.io/documentation/layout/hero/#sizes)
#[derive(Clone, Debug, Display, PartialEq, Eq)]
#[display(fmt = "is-{}")]
pub enum HeroSize {
#[display(fmt = "medium")]
Medium,
#[display(fmt = "large")]
Large,
#[display(fmt = "fullheight")]
Fullheight,
#[display(fmt = "fullheight-with-navbar")]
FullheightWithNavbar,
}