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
use yew::prelude::*;
#[derive(Clone, Debug, Properties, PartialEq)]
pub struct MessageProps {
#[prop_or_default]
pub children: Children,
#[prop_or_default]
pub classes: Classes,
}
/// Colored message blocks, to emphasize part of your page.
///
/// [https://bulma.io/documentation/components/message/](https://bulma.io/documentation/components/message/)
#[function_component(Message)]
pub fn message(props: &MessageProps) -> Html {
html! {
<article class={classes!("message", props.classes.clone())}>
{props.children.clone()}
</article>
}
}
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
#[derive(Clone, Debug, Properties, PartialEq)]
pub struct MessageHeaderProps {
#[prop_or_default]
pub children: Children,
#[prop_or_default]
pub classes: Classes,
}
/// An optional message header that can hold a title and a delete element.
///
/// [https://bulma.io/documentation/components/message/](https://bulma.io/documentation/components/message/)
#[function_component(MessageHeader)]
pub fn message_header(props: &MessageHeaderProps) -> Html {
html! {
<div class={classes!("message-header", props.classes.clone())}>
{props.children.clone()}
</div>
}
}
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
#[derive(Clone, Debug, Properties, PartialEq)]
pub struct MessageBodyProps {
#[prop_or_default]
pub children: Children,
#[prop_or_default]
pub classes: Classes,
}
/// A container for the body of a message.
///
/// [https://bulma.io/documentation/components/message/](https://bulma.io/documentation/components/message/)
#[function_component(MessageBody)]
pub fn message_body(props: &MessageBodyProps) -> Html {
html! {
<div class={classes!("message-body", props.classes.clone())}>
{props.children.clone()}
</div>
}
}