mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-13 05:59:49 -04:00
feat: variant replace type_
This commit is contained in:
parent
867e8f693d
commit
63197db239
6 changed files with 23 additions and 23 deletions
|
@ -17,7 +17,7 @@ pub fn SiteHeader() -> impl IntoView {
|
|||
"Melt UI"
|
||||
</span>
|
||||
<Button
|
||||
type_=ButtonType::TEXT
|
||||
variant=ButtonVariant::TEXT
|
||||
on:click=move |_| {
|
||||
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
|
||||
}
|
||||
|
|
|
@ -10,25 +10,25 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
<h1>"Button"</h1>
|
||||
<Demo>
|
||||
<Space>
|
||||
<Button type_=ButtonType::PRIMARY>"PRIMARY"</Button>
|
||||
<Button type_=ButtonType::SOLID>"SOLID"</Button>
|
||||
<Button type_=ButtonType::TEXT>"TEXT"</Button>
|
||||
<Button type_=ButtonType::LINK>"LINK"</Button>
|
||||
<Button variant=ButtonVariant::PRIMARY>"PRIMARY"</Button>
|
||||
<Button variant=ButtonVariant::SOLID>"SOLID"</Button>
|
||||
<Button variant=ButtonVariant::TEXT>"TEXT"</Button>
|
||||
<Button variant=ButtonVariant::LINK>"LINK"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
r#"
|
||||
<Button type_=ButtonType::PRIMARY>
|
||||
<Button variant=ButtonVariant::PRIMARY>
|
||||
"PRIMARY"
|
||||
</Button>
|
||||
<Button type_=ButtonType::SOLID>
|
||||
<Button variant=ButtonVariant::SOLID>
|
||||
"SOLID"
|
||||
</Button>
|
||||
<Button type_=ButtonType::TEXT>
|
||||
<Button variant=ButtonVariant::TEXT>
|
||||
"TEXT"
|
||||
</Button>
|
||||
<Button type_=ButtonType::LINK>
|
||||
<Button variant=ButtonVariant::LINK>
|
||||
"LINK"
|
||||
</Button>
|
||||
"#,
|
||||
|
|
|
@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
|
|||
navigate("/components/menu", Default::default());
|
||||
}>"Read the docs"</Button>
|
||||
<Button
|
||||
type_=ButtonType::TEXT
|
||||
variant=ButtonVariant::TEXT
|
||||
on:click=move |_| {
|
||||
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ pub fn InputPage() -> impl IntoView {
|
|||
<h1>"Input"</h1>
|
||||
<Demo>
|
||||
<Input value/>
|
||||
<Input value type_=InputType::PASSWORD/>
|
||||
<Input value variant=InputVariant::PASSWORD/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
|
@ -19,7 +19,7 @@ pub fn InputPage() -> impl IntoView {
|
|||
let value = create_rw_signal(String::from("o"));
|
||||
|
||||
<Input value/>
|
||||
<Input value type_=InputType::PASSWORD />
|
||||
<Input value variant=InputVariant::PASSWORD />
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
|
|
|
@ -5,7 +5,7 @@ use leptos::*;
|
|||
pub use theme::ButtonTheme;
|
||||
|
||||
#[derive(Default, PartialEq, Clone, Copy)]
|
||||
pub enum ButtonType {
|
||||
pub enum ButtonVariant {
|
||||
#[default]
|
||||
PRIMARY,
|
||||
SOLID,
|
||||
|
@ -53,7 +53,7 @@ impl ButtonColor {
|
|||
#[component]
|
||||
pub fn Button(
|
||||
#[prop(optional, into)] style: MaybeSignal<String>,
|
||||
#[prop(optional, into)] type_: MaybeSignal<ButtonType>,
|
||||
#[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
|
||||
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
|
||||
#[prop(optional, into)] round: MaybeSignal<bool>,
|
||||
#[prop(optional, into)] icon: Option<Icon>,
|
||||
|
@ -69,7 +69,7 @@ pub fn Button(
|
|||
let bg_color = color.get().theme_color(&theme);
|
||||
let bg_color_hover = color.get().theme_color_hover(&theme);
|
||||
let bg_color_active = color.get().theme_color_active(&theme);
|
||||
if type_.get() == ButtonType::PRIMARY {
|
||||
if variant.get() == ButtonVariant::PRIMARY {
|
||||
css_vars.push_str(&format!("--background-color: {bg_color};"));
|
||||
css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
|
||||
css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
|
||||
|
@ -113,8 +113,8 @@ pub fn Button(
|
|||
view! {
|
||||
<button
|
||||
class:melt-button=true
|
||||
class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
|
||||
class=("melt-button--link", move || type_.get() == ButtonType::LINK)
|
||||
class=("melt-button--text", move || variant.get() == ButtonVariant::TEXT)
|
||||
class=("melt-button--link", move || variant.get() == ButtonVariant::LINK)
|
||||
class=("melt-button--round", move || round.get())
|
||||
class=("melt-button--disabled", move || disabled.get())
|
||||
style=move || format!("{}{}", css_vars.get(), style.get())
|
||||
|
|
|
@ -8,17 +8,17 @@ use leptos::*;
|
|||
pub use theme::InputTheme;
|
||||
|
||||
#[derive(Default, Clone)]
|
||||
pub enum InputType {
|
||||
pub enum InputVariant {
|
||||
#[default]
|
||||
TEXT,
|
||||
PASSWORD,
|
||||
}
|
||||
|
||||
impl InputType {
|
||||
impl InputVariant {
|
||||
pub fn as_str(&self) -> &'static str {
|
||||
match self {
|
||||
InputType::TEXT => "text",
|
||||
InputType::PASSWORD => "password",
|
||||
InputVariant::TEXT => "text",
|
||||
InputVariant::PASSWORD => "password",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -26,7 +26,7 @@ impl InputType {
|
|||
#[component]
|
||||
pub fn Input(
|
||||
#[prop(into)] value: RwSignal<String>,
|
||||
#[prop(optional, into)] type_: MaybeSignal<InputType>,
|
||||
#[prop(optional, into)] variant: MaybeSignal<InputVariant>,
|
||||
) -> impl IntoView {
|
||||
let theme = use_theme(Theme::light);
|
||||
mount_style("input", include_str!("./input.css"));
|
||||
|
@ -50,7 +50,7 @@ pub fn Input(
|
|||
view! {
|
||||
<div class:melt-input=true style=move || css_vars.get()>
|
||||
<input
|
||||
type=move || type_.get().as_str()
|
||||
type=move || variant.get().as_str()
|
||||
prop:value=move || value.get()
|
||||
ref=input_ref
|
||||
class="melt-input__input-el"
|
||||
|
|
Loading…
Add table
Reference in a new issue