[−][src]Struct yew_styles::modal::Modal
Modal component
Features required
modal
Example
use wasm_bindgen::JsCast; use web_sys::HtmlElement; use yew::prelude::*; use yew::utils::document; use yew_prism::Prism; use yew_styles::button::Button; use yew_styles::modal::Modal; use yew_styles::styles::{get_size, Palette, Size, Style}; pub struct ModalExample { link: ComponentLink<Self>, show_modal: bool, } pub enum Msg { CloseModal, OpenModal, CloseModalByKb(KeyboardEvent), } impl Component for ModalExample { type Message = Msg; type Properties = (); fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self { Self { link, show_modal: false, } } fn update(&mut self, msg: Self::Message) -> ShouldRender { let body_style = document() .body() .unwrap() .dyn_into::<HtmlElement>() .unwrap() .style(); match msg { Msg::CloseModal(index) => { body_style.set_property("overflow", "auto").unwrap(); self.show_modal = false; } Msg::CloseModalByKb(keyboard_event) => { if keyboard_event.key_code() == 27 { body_style.set_property("overflow", "auto").unwrap(); self.show_modal = false; } } Msg::OpenModal => { body_style.set_property("overflow", "hidden").unwrap(); self.show_modal = true; } }; true } fn change(&mut self, _: Self::Properties) -> ShouldRender { false } fn view(&self) -> Html { html! { <> <Modal header=html!{ <b>{"Standard modal"}</b> } header_palette=Palette::Link body=html!{ <div class="body-content"> <p>{"This is a example modal"}</p> <Button button_palette= Palette::Info onclick_signal= self.link.callback(|_| Msg::CloseModal) >{"Accept"}</Button> </div> } body_style=Style::Outline body_palette=Palette::Link is_open=self.show_modal onclick_signal= self.link.callback(|_| Msg::CloseModal) onkeydown_signal= self.link.callback(Msg::CloseModalByKb) /> <Button button_palette= Palette::Primary onclick_signal= self.link.callback(Msg::OpenModal) >{"Standard modal"}</Button> </> } } }
Trait Implementations
impl Component for Modal
[src]
type Message = Msg
Messages are used to make Components dynamic and interactive. Simple
Component's can declare their Message type to be ()
. Complex Component's
commonly use an enum to declare multiple Message types. Read more
type Properties = Props
Properties are the inputs to a Component and should not mutated within a Component. They are passed to a Component using a JSX-style syntax. Read more
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self
[src]
fn update(&mut self, msg: Self::Message) -> ShouldRender
[src]
fn change(&mut self, props: Self::Properties) -> ShouldRender
[src]
fn rendered(&mut self, _first_render: bool)
[src]
fn view(&self) -> Html
[src]
fn destroy(&mut self)
[src]
Auto Trait Implementations
impl !RefUnwindSafe for Modal
impl !Send for Modal
impl !Sync for Modal
impl Unpin for Modal
impl !UnwindSafe for Modal
Blanket Implementations
impl<T> Any for T where
T: 'static + ?Sized,
[src]
T: 'static + ?Sized,
impl<T> Any for T where
T: Any,
T: Any,
impl<T> Borrow<T> for T where
T: ?Sized,
[src]
T: ?Sized,
impl<T> BorrowMut<T> for T where
T: ?Sized,
[src]
T: ?Sized,
pub fn borrow_mut(&mut self) -> &mut T
[src]
impl<T> From<T> for T
[src]
impl<T, U> Into<U> for T where
U: From<T>,
[src]
U: From<T>,
impl<COMP> Renderable for COMP where
COMP: Component,
[src]
COMP: Component,
impl<T, U> TryFrom<U> for T where
U: Into<T>,
[src]
U: Into<T>,
type Error = Infallible
The type returned in the event of a conversion error.
pub fn try_from(value: U) -> Result<T, <T as TryFrom<U>>::Error>
[src]
impl<T, U> TryInto<U> for T where
U: TryFrom<T>,
[src]
U: TryFrom<T>,
type Error = <U as TryFrom<T>>::Error
The type returned in the event of a conversion error.
pub fn try_into(self) -> Result<U, <U as TryFrom<T>>::Error>
[src]
impl<V, T> VZip<V> for T where
V: MultiLane<T>,
V: MultiLane<T>,