diff --git a/assets/css/basic.css b/assets/css/basic.css index 47cb26e9..50e870c2 100644 --- a/assets/css/basic.css +++ b/assets/css/basic.css @@ -101,6 +101,7 @@ body { background-color: var(--val-color--primary); border: 1px solid var(--val-color--primary); border-radius: 0.375rem; + text-decoration: none; cursor: pointer; transition: background-color .15s ease-in-out, border-color .15s ease-in-out; } @@ -116,6 +117,15 @@ body { border: 0; } +.button-sm { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; +} +.button-lg { + padding: 0.75rem 1.5rem; + font-size: 1.25rem; +} + .button-primary, .button-neutral, .button-success, diff --git a/examples/form-controls.rs b/examples/form-controls.rs index 6b064165..8273f207 100644 --- a/examples/form-controls.rs +++ b/examples/form-controls.rs @@ -142,18 +142,17 @@ async fn form_controls(request: HttpRequest) -> Result { .with_child( button::ButtonSet::new() .with_button( - Button::submit(Lc::t("btn_submit", &LOC)).with_style( - button::ButtonStyle::Solid(Intent::Primary), - ), + Button::submit(Lc::t("btn_submit", &LOC)) + .with_style(button::Style::Solid(Intent::Primary)), ) .with_button( Button::reset(Lc::t("btn_reset", &LOC)).with_style( - button::ButtonStyle::Outline(Intent::Secondary), + button::Style::Outline(Intent::Neutral), ), ) .with_button( Button::plain(Lc::t("btn_cancel", &LOC)) - .with_style(button::ButtonStyle::Link), + .with_style(button::Style::Link), ), ), ), @@ -258,18 +257,17 @@ async fn form_controls(request: HttpRequest) -> Result { .with_child( button::ButtonSet::new() .with_button( - Button::submit(Lc::t("btn_submit", &LOC)).with_style( - button::ButtonStyle::Solid(Intent::Primary), - ), + Button::submit(Lc::t("btn_submit", &LOC)) + .with_style(button::Style::Solid(Intent::Primary)), ) .with_button( Button::reset(Lc::t("btn_reset", &LOC)).with_style( - button::ButtonStyle::Outline(Intent::Secondary), + button::Style::Outline(Intent::Neutral), ), ) .with_button( Button::plain(Lc::t("btn_cancel", &LOC)) - .with_style(button::ButtonStyle::Link), + .with_style(button::Style::Link), ), ), ), @@ -299,24 +297,22 @@ async fn form_controls(request: HttpRequest) -> Result { p { (Lc::t("dialog_delete_body", &LOC).using(cx)) } } })) - .with_footer( - Button::plain(Lc::t("btn_cancel", &LOC)) - .with_prop(PropsOp::set("data-dialog-dismiss", "modal")) - .with_style(button::ButtonStyle::Outline( - Intent::Secondary, - )), - ) .with_footer( Button::plain(Lc::t("btn_ok", &LOC)) .with_prop(PropsOp::set("data-dialog-dismiss", "modal")) - .with_style(button::ButtonStyle::Solid(Intent::Primary)), + .with_style(button::Style::Solid(Intent::Primary)), + ) + .with_footer( + Button::plain(Lc::t("btn_cancel", &LOC)) + .with_prop(PropsOp::set("data-dialog-dismiss", "modal")) + .with_style(button::Style::Outline(Intent::Neutral)), ), ) .with_child( Button::plain(Lc::t("btn_delete", &LOC)) .with_prop(PropsOp::set("data-dialog-toggle", "modal")) .with_prop(PropsOp::set("data-dialog-target", "#delete-confirm")) - .with_style(button::ButtonStyle::Solid(Intent::Danger)), + .with_style(button::Style::Solid(Intent::Severe)), ), ), ) @@ -437,14 +433,14 @@ fn form_lists() -> Form { button::ButtonSet::new() .with_button( Button::submit(Lc::t("btn_submit", &LOC)) - .with_style(button::ButtonStyle::Solid(Intent::Primary)), + .with_style(button::Style::Solid(Intent::Primary)), ) .with_button( Button::reset(Lc::t("btn_reset", &LOC)) - .with_style(button::ButtonStyle::Outline(Intent::Secondary)), + .with_style(button::Style::Outline(Intent::Neutral)), ) .with_button( - Button::plain(Lc::t("btn_cancel", &LOC)).with_style(button::ButtonStyle::Link), + Button::plain(Lc::t("btn_cancel", &LOC)).with_style(button::Style::Link), ), ) } diff --git a/src/base/component/button.rs b/src/base/component/button.rs index fdfc22ea..4bbb1787 100644 --- a/src/base/component/button.rs +++ b/src/base/component/button.rs @@ -1,7 +1,7 @@ //! Definiciones para crear botones ([`Button`]) y conjuntos de botones ([`ButtonSet`]). mod props; -pub use props::{ButtonKind, ButtonStyle}; +pub use props::{Kind, Size, Style}; mod component; pub use component::Button; diff --git a/src/base/component/button/component.rs b/src/base/component/button/component.rs index aef92e7d..34a1bb1f 100644 --- a/src/base/component/button/component.rs +++ b/src/base/component/button/component.rs @@ -7,6 +7,12 @@ use crate::prelude::*; /// - [`Button::submit()`]: botón de envío (por defecto). /// - [`Button::reset()`]: botón de restablecimiento de valores. /// - [`Button::plain()`]: botón genérico sin comportamiento predeterminado. +/// - [`Button::anchor()`]: enlace de navegación real con el aspecto de un botón. +/// +/// No confundir [`Button::anchor()`] con [`button::Style::Link`]: el primero renderiza un `` real que navega; el segundo es sólo un estilo visual (clase `button-link`) que se +/// aplica con [`with_style()`](Self::with_style) sobre cualquiera de las otras variantes, que +/// siguen siendo un `