manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ (base): Añade componentes Nav y Navbar

Browse source 
Dropdown incorpora tamaño y estilo de botón configurables
(`button::Size`/`Style`), reutilizados también por Navbar. El tema Basic
sirve `basic.min.css` y añade el JS de inicialización de Navbar.
This commit is contained in:
Manuel Cillero 2026-08-28 18:24:43 +02:00
parent da959183f6
commit 35ae5bb6a8
22 changed files with 1695 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/base/component/dropdown/component.rs
View file

@ -31,6 +31,12 @@ pub struct Dropdown {
title: Lc,
/// Devuelve si el botón se desdobla (*split*) en botón de acción más *toggle*.
button_split: bool,
/// Devuelve el tamaño visual del botón.
#[getters(copy)]
button_size: button::Size,
/// Devuelve el estilo visual del botón.
#[getters(copy)]
button_style: button::Style,
/// Devuelve la lista de elementos del menú.
items: Children,
}
@ -65,15 +71,44 @@ impl Component for Dropdown {
});
}
// Sin tamaño ni estilo (caso más común), evita construir dinámicamente las clases.
let (button_classes, toggle_classes): (CowStr, CowStr) =
if matches!(self.button_size(), button::Size::None)
&& matches!(self.button_style(), button::Style::None)
{
(
CowStr::from("dropdown-button"),
CowStr::from("dropdown-toggle"),
)
} else {
use button::{Size, Style};
let size_class = match self.button_size() {
Size::None => "",
Size::Small => " button-sm",
Size::Large => " button-lg",
};
let style_class = match self.button_style() {
Style::None => String::new(),
Style::Solid(intent) => util::join!(" button-", intent.color(cx)),
Style::Outline(intent) => util::join!(" button-outline-", intent.color(cx)),
Style::Link => " button-link".to_string(),
};
(
util::join!("dropdown-button", size_class, &style_class).into(),
util::join!("dropdown-toggle", size_class, &style_class).into(),
)
};
let toggle_label = Lc::l("dropdown_toggle").using(cx);
Ok(html! {
div (self.props()) {
@if *self.button_split() {
button type="button" class="dropdown-button" { (&title) }
button type="button" class=(&button_classes) { (&title) }
button
type="button"
class="dropdown-toggle"
class=(&toggle_classes)
aria-haspopup="true"
aria-expanded="false"
{
@ -82,7 +117,7 @@ impl Component for Dropdown {
} @else {
button
type="button"
class="dropdown-toggle"
class=(&toggle_classes)
aria-haspopup="true"
aria-expanded="false"
{
@ -126,6 +161,20 @@ impl Dropdown {
self
}
/// Establece el tamaño visual del botón (usa [`button::Size::None`] para quitarlo).
#[builder_fn]
pub fn with_button_size(mut self, size: button::Size) -> Self {
self.button_size = size;
self
}
/// Establece el estilo visual del botón (usa [`button::Style::None`] para quitarlo).
#[builder_fn]
pub fn with_button_style(mut self, style: button::Style) -> Self {
self.button_style = style;
self
}
/// Añade un nuevo elemento al menú o modifica la lista de elementos del menú con una operación
/// [`TypedOp`].
///