♻️ 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:
parent
58d1fef4f1
commit
3f3634fdab
21 changed files with 80 additions and 74 deletions
|
|
@ -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))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ impl Component for Template {
|
|||
}
|
||||
|
||||
Ok(html! {
|
||||
div.wrapper {
|
||||
div class="wrapper" {
|
||||
(body)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()) } })
|
||||
/// }
|
||||
/// ```
|
||||
///
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue