adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add class to modal (#206)

Browse source 
* add class to modal

* add class to modal

* add closable option to modal
This commit is contained in:
kandrelczyk 2024-06-10 17:30:31 +02:00 • committed by GitHub
parent cb37d9cfe9
commit a9f02ede65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo_markdown/docs/modal/mod.md
View file

@ -15,12 +15,14 @@ view! {
| Name | Type | Default | Description |
| -------------- | --------------------- | -------------------- | ------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the modal element. |
| show | `Model<bool>` | | Whether to show modal. |
| title | `MaybeSignal<String>` | `Default::default()` | Modal title. |
| width | `MaybeSignal<String>` | `600px` | Modal width. |
| z_index | `MaybeSignal<i16>` | `2000` | z-index of the modal. |
| mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. |
| close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. |
| closable | `bool` | `true` | Whether to display the close button. |
| children | `Children` | | Modal's content. |
### Modal Slots

27
thaw/src/modal/mod.rs
View file

@ -1,7 +1,7 @@
use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon, Scrollbar, ScrollbarRef};
use leptos::*;
use thaw_components::{CSSTransition, FocusTrap, OptionComp, Teleport};
use thaw_utils::{mount_style, use_click_position, ComponentRef, Model};
use thaw_components::{CSSTransition, FocusTrap, If, OptionComp, Teleport, Then};
use thaw_utils::{class_list, mount_style, use_click_position, ComponentRef, Model, OptionalProp};
#[slot]
pub struct ModalFooter {
@ -13,11 +13,13 @@ pub fn Modal(
#[prop(into)] show: Model<bool>,
#[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
#[prop(default = true, into)] close_on_esc: bool,
#[prop(default = true, into)] closable: bool,
#[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
#[prop(default = MaybeSignal::Static("600px".to_string()), into)] width: MaybeSignal<String>,
#[prop(optional, into)] title: MaybeSignal<String>,
children: Children,
#[prop(optional)] modal_footer: Option<ModalFooter>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
) -> impl IntoView {
mount_style("modal", include_str!("./modal.css"));
@ -80,6 +82,7 @@ pub fn Modal(
String::from("display: none")
}
})
comp_ref=scrollbar_ref
>
<CSSTransition
@ -106,7 +109,9 @@ pub fn Modal(
let:display
>
<div
class="thaw-modal-body"
class=class_list![
"thaw-modal-body", class.map(| c | move || c.get())
]
ref=modal_ref
role="dialog"
aria-modal="true"
@ -117,12 +122,16 @@ pub fn Modal(
<span class="thaw-model-title">{move || title.get()}</span>
</CardHeader>
<CardHeaderExtra slot>
<span
style="cursor: pointer;"
on:click=move |_| show.set(false)
>
<Icon icon=icondata_ai::AiCloseOutlined/>
</span>
<If cond=closable>
<Then slot>
<span
style="cursor: pointer;"
on:click=move |_| show.set(false)
>
<Icon icon=icondata_ai::AiCloseOutlined/>
</span>
</Then>
</If>
</CardHeaderExtra>
{children()}
<CardFooter slot if_=modal_footer.is_some()>