♻️ Atributos class e id explícitos en html!

Se usa `class="..."` e `id="..."` en lugar de `div.a #x`. El HTML
generado es idéntico.
This commit is contained in:
Manuel Cillero 2026-09-26 07:05:59 +02:00
parent 58d1fef4f1
commit 3f3634fdab
21 changed files with 80 additions and 74 deletions

View file

@ -57,7 +57,7 @@ impl Component for Breadcrumb {
Ok(html! {
nav (self.props().unpack(cx)) aria-label=[Lc::l("breadcrumb_label").lookup(cx)] {
ol.breadcrumb {
ol class="breadcrumb" {
@for crumb in self.crumbs() {
(crumb.render_crumb(cx))
}

View file

@ -77,7 +77,7 @@ impl Component for Template {
}
Ok(html! {
div.wrapper {
div class="wrapper" {
(body)
}
})

View file

@ -240,7 +240,7 @@ impl Component for Pager {
@let items_per_page = self.items_per_page().max(1);
@let first = (page - 1) * items_per_page + 1;
@let last = (page * items_per_page).min(self.total_items());
span.pager-summary {
span class="pager-summary" {
(Lc::l("pager_summary")
.with_arg("first", first.to_string())
.with_arg("last", last.to_string())
@ -248,14 +248,16 @@ impl Component for Pager {
.using(cx))
}
}
ul.pagination {
ul class="pagination" {
@if show_prev_next {
li.page-item.page-previous.disabled[first_disabled] {
a.page-link
a class="page-link"
href=[(!first_disabled).then(|| Self::page_route(&route, page - 1))]
aria-disabled=[first_disabled.then_some("true")]
aria-label=[Lc::l("pager_previous_aria_label").lookup(cx)] {
span.page-link-icon { (Lc::l("pager_previous_label").using(cx)) }
span class="page-link-icon" {
(Lc::l("pager_previous_label").using(cx))
}
}
}
}
@ -264,7 +266,7 @@ impl Component for Pager {
PageItem::Number(n) => {
@let href = Self::page_route(&route, n);
li.page-item.active[n == page] {
a.page-link
a class="page-link"
href=(href)
aria-current=[(n == page).then_some("page")] {
(n.to_string())
@ -272,19 +274,21 @@ impl Component for Pager {
}
}
PageItem::Ellipsis => {
li.page-item.page-ellipsis.disabled aria-hidden="true" {
span.page-link { "…" }
li class="page-item page-ellipsis disabled" aria-hidden="true" {
span class="page-link" { "…" }
}
}
}
}
@if show_prev_next {
li.page-item.page-next.disabled[last_disabled] {
a.page-link
a class="page-link"
href=[(!last_disabled).then(|| Self::page_route(&route, page + 1))]
aria-disabled=[last_disabled.then_some("true")]
aria-label=[Lc::l("pager_next_aria_label").lookup(cx)] {
span.page-link-icon { (Lc::l("pager_next_label").using(cx)) }
span class="page-link-icon" {
(Lc::l("pager_next_label").using(cx))
}
}
}
}

View file

@ -80,7 +80,7 @@ impl Component for Table {
let colspan = self.columns().len().max(1).to_string();
Ok(html! {
div.table-responsive {
div class="table-responsive" {
table (self.props().unpack(cx)) {
@if !self.columns().is_empty() {
thead {
@ -108,7 +108,7 @@ impl Component for Table {
{
tbody {
tr {
td.table-empty colspan=(colspan) { (empty) }
td class="table-empty" colspan=(colspan) { (empty) }
}
}
}

View file

@ -312,8 +312,8 @@ pub trait Theme: Extension + Send + Sync {
/// cx: &mut Context,
/// ) -> Option<Result<Markup, ComponentError>> {
/// render_component!(component, {
/// Button => |btn| Ok(html! { button.btn.btn-primary { (btn.label()) } }),
/// Heading => |h| Ok(html! { h2.display-4 { (h.text()) } }),
/// Button => |btn| Ok(html! { button class="btn btn-primary" { (btn.label()) } }),
/// Heading => |h| Ok(html! { h2 class="display-4" { (h.text()) } }),
/// })
/// }
/// ```
@ -487,13 +487,13 @@ macro_rules! setup_component {
/// cx: &mut Context,
/// ) -> Option<Result<Markup, ComponentError>> {
/// render_component!(component, {
/// Button => |btn| { Ok(html! { button.btn.btn-primary { (btn.label()) } }) },
/// Button => |btn| { Ok(html! { button class="btn btn-primary" { (btn.label()) } }) },
/// Heading => |h| self.render_heading(h, cx),
/// })
/// }
///
/// fn render_heading(&self, h: &Heading, cx: &mut Context) -> Result<Markup, ComponentError> {
/// Ok(html! { h2.display-4 { (h.text()) } })
/// Ok(html! { h2 class="display-4" { (h.text()) } })
/// }
/// ```
///