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

✨ (pagetop): Añade Flex/FlexItem para usar Flexbox

Browse source 
Container y Navbar lo adoptan vía `with_flex()`/`PropsOp::flex_item()`.
Y se elimina `ButtonSet` porque su funcionalidad queda cubierta por este
mecanismo más general. Incluye el ejemplo `examples/intro-flex.rs` con
los patrones de uso.
This commit is contained in:
Manuel Cillero 2026-09-04 01:04:53 +02:00
parent 4e4fdf7b10
commit 17e16652e4
26 changed files with 2023 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

39
examples/form-controls.rs
View file

@ -140,17 +140,22 @@ async fn form_controls(request: HttpRequest) -> Result<Markup, ErrorPage> {
.with_child(form::Hidden::field("origin", "form-selections"))
// Botonera de acciones.
.with_child(
button::ButtonSet::new()
.with_button(
Container::new()
.with_flex(
Flex::row()
.with_wrap(flex::Behavior::Wrap)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(
Button::submit(Lc::t("btn_submit", &LOC))
.with_style(button::Style::Solid(Intent::Primary)),
)
.with_button(
.with_child(
Button::reset(Lc::t("btn_reset", &LOC)).with_style(
button::Style::Outline(Intent::Neutral),
),
)
.with_button(
.with_child(
Button::plain(Lc::t("btn_cancel", &LOC))
.with_style(button::Style::Link),
),
@ -255,17 +260,22 @@ async fn form_controls(request: HttpRequest) -> Result<Markup, ErrorPage> {
.with_child(form::Hidden::field("origin", "form-text"))
// Botonera de acciones.
.with_child(
button::ButtonSet::new()
.with_button(
Container::new()
.with_flex(
Flex::row()
.with_wrap(flex::Behavior::Wrap)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(
Button::submit(Lc::t("btn_submit", &LOC))
.with_style(button::Style::Solid(Intent::Primary)),
)
.with_button(
.with_child(
Button::reset(Lc::t("btn_reset", &LOC)).with_style(
button::Style::Outline(Intent::Neutral),
),
)
.with_button(
.with_child(
Button::plain(Lc::t("btn_cancel", &LOC))
.with_style(button::Style::Link),
),
@ -430,16 +440,21 @@ fn form_lists() -> Form {
.with_child(form::Hidden::field("origin", "form-lists"))
// Botonera de acciones.
.with_child(
button::ButtonSet::new()
.with_button(
Container::new()
.with_flex(
Flex::row()
.with_wrap(flex::Behavior::Wrap)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(
Button::submit(Lc::t("btn_submit", &LOC))
.with_style(button::Style::Solid(Intent::Primary)),
)
.with_button(
.with_child(
Button::reset(Lc::t("btn_reset", &LOC))
.with_style(button::Style::Outline(Intent::Neutral)),
)
.with_button(
.with_child(
Button::plain(Lc::t("btn_cancel", &LOC)).with_style(button::Style::Link),
),
)

540
examples/intro-flex.rs Normal file
View file

@ -0,0 +1,540 @@
use pagetop::prelude::*;
include_locales!(LOC from "examples/locale");
struct IntroFlex;
#[async_trait]
impl Extension for IntroFlex {
fn dependencies(&self) -> Vec<ExtensionRef> {
vec![&pagetop_bootsier::Bootsier]
}
fn configure_router(&self, router: Router) -> Router {
router.route("/", web::get(intro_flex))
}
}
async fn intro_flex(request: HttpRequest) -> Result<Markup, ErrorPage> {
Page::new(request)
.with_assets(AssetsOp::AddStyleSheet(demo_styles()))
.with_child(
Intro::default()
.with_opening(IntroOpening::Custom)
.with_title(Lc::n("PageTop"))
.with_slogan(Lc::t("flex_slogan", &LOC))
.with_button(None::<(Lc, Route)>)
.with_child(direction_block())
.with_child(justify_block())
.with_child(align_block())
.with_child(align_self_block())
.with_child(align_content_block())
.with_child(grow_shrink_block())
.with_child(other_block()),
)
.render()
.await
}
fn direction_block() -> Block {
let mut block = Block::new().with_title(Lc::t("flex_block_title_direction", &LOC));
let direction_variants: [(&str, Flex, &str); 4] = [
("flex_title_direction_row", Flex::row(), "Flex::row()"),
(
"flex_title_direction_row_reverse",
Flex::row().with_direction(flex::Direction::RowReverse),
"Flex::row().with_direction(Direction::RowReverse)",
),
(
"flex_title_direction_column",
Flex::column(),
"Flex::column()",
),
(
"flex_title_direction_column_reverse",
Flex::column().with_direction(flex::Direction::ColumnReverse),
"Flex::column().with_direction(Direction::ColumnReverse)",
),
];
for (title_key, flex, code) in direction_variants {
block = block
.with_child(caption(Lc::t(title_key, &LOC), code))
.with_child(
demo_row(flex)
.with_child(demo_box(flex_item("1")))
.with_child(demo_box(flex_item("2")))
.with_child(demo_box(flex_item("3"))),
);
}
block
}
fn justify_block() -> Block {
let mut block = Block::new().with_title(Lc::t("flex_block_title_justify", &LOC));
let justify_variants: [(&str, flex::ContentJustify, &str); 6] = [
(
"flex_title_justify_start",
flex::ContentJustify::Start,
"Flex::row().with_justify(ContentJustify::Start)",
),
(
"flex_title_justify_center",
flex::ContentJustify::Center,
"Flex::row().with_justify(ContentJustify::Center)",
),
(
"flex_title_justify_end",
flex::ContentJustify::End,
"Flex::row().with_justify(ContentJustify::End)",
),
(
"flex_title_justify_between",
flex::ContentJustify::SpaceBetween,
"Flex::row().with_justify(ContentJustify::SpaceBetween)",
),
(
"flex_title_justify_around",
flex::ContentJustify::SpaceAround,
"Flex::row().with_justify(ContentJustify::SpaceAround)",
),
(
"flex_title_justify_evenly",
flex::ContentJustify::SpaceEvenly,
"Flex::row().with_justify(ContentJustify::SpaceEvenly)",
),
];
for (title_key, justify, code) in justify_variants {
block = block
.with_child(caption(Lc::t(title_key, &LOC), code))
.with_child(
demo_row(
Flex::row()
.with_justify(justify)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(flex_item("1")))
.with_child(demo_box(flex_item("2")))
.with_child(demo_box(flex_item("3"))),
);
}
block
}
fn align_block() -> Block {
let mut block = Block::new().with_title(Lc::t("flex_block_title_align", &LOC));
let align_variants: [(&str, flex::Align, &str); 4] = [
(
"flex_title_align_start",
flex::Align::Start,
"Flex::row().with_align(Align::Start)",
),
(
"flex_title_align_center",
flex::Align::Center,
"Flex::row().with_align(Align::Center)",
),
(
"flex_title_align_end",
flex::Align::End,
"Flex::row().with_align(Align::End)",
),
(
"flex_title_align_stretch",
flex::Align::Stretch,
"Flex::row().with_align(Align::Stretch)",
),
];
for (title_key, align, code) in align_variants {
block = block
.with_child(caption(Lc::t(title_key, &LOC), code))
.with_child(
demo_row(
Flex::row()
.with_align(align)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(sized_box(Lc::t("flex_box_tall", &LOC), "2.5rem 1rem"))
.with_child(demo_box(Lc::t("flex_box_medium", &LOC)))
.with_child(sized_box(Lc::t("flex_box_short", &LOC), "0.15rem 1rem")),
);
}
block
.with_child(caption(
Lc::t("flex_title_align_baseline", &LOC),
"Flex::row().with_align(Align::Baseline)",
))
.with_child(
demo_row(
Flex::row()
.with_align(flex::Align::Baseline)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(
sized_box(Lc::t("flex_box_tall", &LOC), "2.5rem 1rem")
.with_prop(PropsOp::add_style("font-size", "1.75rem")),
)
.with_child(demo_box(Lc::t("flex_box_medium", &LOC)))
.with_child(sized_box(Lc::t("flex_box_short", &LOC), "0.15rem 1rem")),
)
}
fn align_self_block() -> Block {
let mut block = Block::new().with_title(Lc::t("flex_block_title_align_self", &LOC));
let align_self_variants: [(&str, flex::ItemAlign, &str); 4] = [
(
"flex_title_align_self_start",
flex::ItemAlign::Start,
"FlexItem::new().with_align_self(flex::ItemAlign::Start)",
),
(
"flex_title_align_self_end",
flex::ItemAlign::End,
"FlexItem::new().with_align_self(flex::ItemAlign::End)",
),
(
"flex_title_align_self_center",
flex::ItemAlign::Center,
"FlexItem::new().with_align_self(flex::ItemAlign::Center)",
),
(
"flex_title_align_self_stretch",
flex::ItemAlign::Stretch,
"FlexItem::new().with_align_self(flex::ItemAlign::Stretch)",
),
];
for (title_key, align_self, code) in align_self_variants {
block = block
.with_child(caption(Lc::t(title_key, &LOC), code))
.with_child(
demo_row(
Flex::row()
.with_align(flex::Align::Start)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(sized_box(Lc::t("flex_box_tall", &LOC), "2.5rem 1rem"))
.with_child(demo_box(flex_item("1")).with_prop(PropsOp::flex_item(
FlexItem::new().with_align_self(align_self),
)))
.with_child(sized_box(Lc::t("flex_box_tall", &LOC), "2.5rem 1rem")),
);
}
block
.with_child(caption(
Lc::t("flex_title_align_self_baseline", &LOC),
"FlexItem::new().with_align_self(flex::ItemAlign::Baseline)",
))
.with_child(
demo_row(
Flex::row()
.with_align(flex::Align::Start)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(
sized_box(Lc::t("flex_box_tall", &LOC), "2.5rem 1rem")
.with_prop(PropsOp::add_style("font-size", "1.75rem")),
)
.with_child(demo_box(flex_item("1")).with_prop(PropsOp::flex_item(
FlexItem::new().with_align_self(flex::ItemAlign::Baseline),
)))
.with_child(sized_box(Lc::t("flex_box_tall", &LOC), "2.5rem 1rem")),
)
}
fn align_content_block() -> Block {
let mut block = Block::new().with_title(Lc::t("flex_block_title_align_content", &LOC));
let align_content_variants: [(&str, flex::AlignContent, &str); 7] = [
(
"flex_title_align_content_start",
flex::AlignContent::Start,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::Start)",
),
(
"flex_title_align_content_end",
flex::AlignContent::End,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::End)",
),
(
"flex_title_align_content_center",
flex::AlignContent::Center,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::Center)",
),
(
"flex_title_align_content_between",
flex::AlignContent::SpaceBetween,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::SpaceBetween)",
),
(
"flex_title_align_content_around",
flex::AlignContent::SpaceAround,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::SpaceAround)",
),
(
"flex_title_align_content_evenly",
flex::AlignContent::SpaceEvenly,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::SpaceEvenly)",
),
(
"flex_title_align_content_stretch",
flex::AlignContent::Stretch,
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::Stretch)",
),
];
for (title_key, align_content, code) in align_content_variants {
let mut row = demo_row(
Flex::row()
.with_wrap(flex::Behavior::Wrap)
.with_align_content(align_content)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_prop(PropsOp::add_style("max-width", "21rem"))
.with_prop(PropsOp::add_style("min-height", "11rem"));
for label in ["1", "2", "3", "4"] {
row = row.with_child(
sized_box(flex_item(label), "0.5rem 1rem")
.with_prop(PropsOp::add_style("width", "9rem")),
);
}
block = block
.with_child(caption(Lc::t(title_key, &LOC), code))
.with_child(row);
}
block
}
fn grow_shrink_block() -> Block {
Block::new()
.with_title(Lc::t("flex_block_title_grow_shrink", &LOC))
.with_child(caption(
Lc::t("flex_title_grow", &LOC),
"FlexItem::new().with_grow(flex::ItemGrow::Is1)",
))
.with_child(
demo_row(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
.with_child(demo_box(Lc::t("flex_box_fixed", &LOC)))
.with_child(
demo_box(Lc::t("flex_box_grows", &LOC)).with_prop(PropsOp::flex_item(
FlexItem::new().with_grow(flex::ItemGrow::Is1),
)),
)
.with_child(demo_box(Lc::t("flex_box_fixed", &LOC))),
)
.with_child(caption(
Lc::t("flex_title_shrink", &LOC),
"FlexItem::new().with_shrink(flex::ItemShrink::Is0)",
))
.with_child(
demo_row(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
.with_prop(PropsOp::add_style("max-width", "31rem"))
.with_child(
demo_box(flex_item("1")).with_prop(PropsOp::add_style("width", "10.5rem")),
)
.with_child(
demo_box(flex_item("2"))
.with_prop(PropsOp::add_style("width", "10.5rem"))
.with_prop(PropsOp::flex_item(
FlexItem::new().with_shrink(flex::ItemShrink::Is0),
)),
)
.with_child(
demo_box(flex_item("3")).with_prop(PropsOp::add_style("width", "10.5rem")),
),
)
}
fn other_block() -> Block {
let mut block = Block::new().with_title(Lc::t("flex_block_title_other", &LOC));
block = block
.with_child(caption(
Lc::t("flex_title_push_end", &LOC),
"FlexItem::push_end()",
))
.with_child(
demo_row(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
.with_child(demo_box(Lc::t("flex_box_start_1", &LOC)))
.with_child(demo_box(Lc::t("flex_box_start_2", &LOC)))
.with_child(demo_box(Lc::t("flex_box_end", &LOC)).with_prop(FlexItem::push_end())),
);
let mut wrap_row = demo_row(
Flex::row()
.with_wrap(flex::Behavior::Wrap)
.with_align_content(flex::AlignContent::SpaceBetween)
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_prop(PropsOp::add_style("max-width", "20rem"))
.with_prop(PropsOp::add_style("min-height", "11rem"));
for label in ["1", "2", "3", "4", "5", "6", "7", "8"] {
wrap_row = wrap_row.with_child(
sized_box(flex_item(label), "0.5rem 1rem")
.with_prop(PropsOp::add_style("width", "4rem")),
);
}
block
.with_child(caption(
Lc::t("flex_title_wrap", &LOC),
"Flex::row().with_wrap(Behavior::Wrap).with_align_content(AlignContent::SpaceBetween)",
))
.with_child(wrap_row)
.with_child(caption(
Lc::t("flex_title_order", &LOC),
"FlexItem::new().with_order(ItemOrder::First) / .with_order(ItemOrder::Last)",
))
.with_child(
demo_row(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
.with_child(demo_box(Lc::n("A")).with_prop(PropsOp::flex_item(
FlexItem::new().with_order(flex::ItemOrder::Last),
)))
.with_child(demo_box(Lc::n("B")))
.with_child(demo_box(Lc::n("C")))
.with_child(demo_box(Lc::n("D")))
.with_child(demo_box(Lc::n("E")).with_prop(PropsOp::flex_item(
FlexItem::new().with_order(flex::ItemOrder::First),
))),
)
.with_child(caption(
Lc::t("flex_title_gap_none", &LOC),
"Flex::row() (Gap::None por defecto)",
))
.with_child(
demo_row(Flex::row())
.with_child(demo_box(flex_item("1")))
.with_child(demo_box(flex_item("2")))
.with_child(demo_box(flex_item("3"))),
)
.with_child(caption(
Lc::t("flex_title_gap_some", &LOC),
"Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(1.5)))",
))
.with_child(
demo_row(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(1.5))))
.with_child(demo_box(flex_item("1")))
.with_child(demo_box(flex_item("2")))
.with_child(demo_box(flex_item("3"))),
)
.with_child(caption(
Lc::t("flex_title_grid_thirds", &LOC),
"FlexItem::new().with_size(flex::ItemSize::Percent33)",
))
.with_child(
demo_row(Flex::row())
.with_child(demo_box(Lc::n("1/3")).with_prop(PropsOp::flex_item(
FlexItem::new().with_size(flex::ItemSize::Percent33),
)))
.with_child(demo_box(Lc::n("1/3")).with_prop(PropsOp::flex_item(
FlexItem::new().with_size(flex::ItemSize::Percent33),
)))
.with_child(demo_box(Lc::n("1/3")).with_prop(PropsOp::flex_item(
FlexItem::new().with_size(flex::ItemSize::Percent33),
))),
)
.with_child(caption(
Lc::t("flex_title_grid_offset", &LOC),
"FlexItem::new().with_size(ItemSize::Percent50).with_offset(ItemOffset::Percent25)",
))
.with_child(
demo_row(Flex::row()).with_child(
demo_box(Lc::t("flex_box_half_centered", &LOC)).with_prop(PropsOp::flex_item(
FlexItem::new()
.with_size(flex::ItemSize::Percent50)
.with_offset(flex::ItemOffset::Percent25),
)),
),
)
.with_child(caption(
Lc::t("flex_title_toolbar", &LOC),
"Container con Flex anidado dentro de otro Container con Flex, y push_end()",
))
.with_child(
demo_row(Flex::row().with_align(flex::Align::Center))
.with_child(
Container::new()
.with_flex(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
.with_child(demo_box(Lc::t("flex_box_file", &LOC)))
.with_child(demo_box(Lc::t("flex_box_edit", &LOC)))
.with_child(demo_box(Lc::t("flex_box_view", &LOC))),
)
.with_child(
Container::new()
.with_prop(FlexItem::push_end())
.with_flex(Flex::row().with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
.with_child(demo_box(Lc::t("flex_box_profile", &LOC)))
.with_child(demo_box(Lc::t("flex_box_logout", &LOC))),
),
)
}
// **< HELPERS >************************************************************************************
// Aspecto fijo de las cajas y filas de muestra.
fn demo_styles() -> StyleSheet {
StyleSheet::inline("intro-flex", |_| {
util::indoc!(
r#"
.flex-demo-box {
background-color: #0d6efd;
color: #fff;
min-width: 3rem;
width: auto;
max-width: none;
margin: 0;
border-radius: 0.375rem;
text-align: center;
}
.flex-demo-row {
background-color: #f1f3f5;
width: 100%;
max-width: none;
margin: 0 0 1.5rem;
padding: 0.75rem;
}
"#
)
.to_string()
})
}
// Caja con fondo azul y relleno vertical configurable, para mostrar diferencias de altura.
fn sized_box(label: Lc, padding: &'static str) -> Container {
Container::new()
.with_prop(PropsOp::add_classes("flex-demo-box"))
.with_prop(PropsOp::add_style("padding", padding))
.with_child(Html::with(move |cx| html! { (label.using(cx)) }))
}
// Caja con el relleno vertical estandar del resto de ejemplos.
fn demo_box(label: Lc) -> Container {
sized_box(label, "0.5rem 1rem")
}
// Etiqueta "Flex item N" para las cajas que solo se distinguen por su posicion.
fn flex_item(n: impl Into<CowStr>) -> Lc {
Lc::t("flex_item_label", &LOC).with_arg("n", n)
}
// Fila de demostracion con fondo gris para visualizar los limites del propio contenedor flex.
fn demo_row(flex: Flex) -> Container {
Container::new()
.with_prop(PropsOp::add_classes("flex-demo-row"))
.with_flex(flex)
}
// Titulo y fragmento de codigo que introducen cada demostracion.
fn caption(title: Lc, code: &'static str) -> Html {
Html::with(move |cx| {
html! {
h3 { (title.using(cx)) }
p { code { (code) } }
}
})
}
#[pagetop::main]
async fn main() -> std::io::Result<()> {
Application::prepare(&IntroFlex).await.run().await
}

63
examples/locale/en-US/intro-flex.ftl Normal file
View file

@ -0,0 +1,63 @@
flex_slogan = Flexbox positioning
flex_block_title_direction = Direction
flex_block_title_justify = Justify content
flex_block_title_align = Align items
flex_block_title_align_self = Align self
flex_block_title_align_content = Align content
flex_block_title_grow_shrink = Grow and shrink
flex_block_title_other = Other examples
flex_title_direction_row = Row
flex_title_direction_row_reverse = Row reverse
flex_title_direction_column = Column
flex_title_direction_column_reverse = Column reverse
flex_title_justify_start = Justify content: start
flex_title_justify_center = Justify content: center
flex_title_justify_end = Justify content: end
flex_title_justify_between = Justify content: space between
flex_title_justify_around = Justify content: space around
flex_title_justify_evenly = Justify content: space evenly
flex_title_align_start = Align items: start
flex_title_align_center = Align items: center
flex_title_align_end = Align items: end
flex_title_align_stretch = Align items: stretch
flex_title_align_baseline = Align items: baseline
flex_title_align_self_start = Align self: start
flex_title_align_self_end = Align self: end
flex_title_align_self_center = Align self: center
flex_title_align_self_stretch = Align self: stretch
flex_title_align_self_baseline = Align self: baseline
flex_title_align_content_start = Align content: start
flex_title_align_content_end = Align content: end
flex_title_align_content_center = Align content: center
flex_title_align_content_between = Align content: space between
flex_title_align_content_around = Align content: space around
flex_title_align_content_evenly = Align content: space evenly
flex_title_align_content_stretch = Align content: stretch
flex_title_grow = Growth
flex_title_shrink = Shrink
flex_title_push_end = Automatic margin
flex_title_wrap = Line wrapping across multiple rows
flex_title_order = Visual order
flex_title_gap_none = Without spacing
flex_title_gap_some = With spacing
flex_title_grid_thirds = Column grid: three thirds
flex_title_grid_offset = Column grid: centered column with offset
flex_title_toolbar = Composite structure: toolbar
flex_item_label = Flex item { $n }
flex_box_tall = Tall
flex_box_medium = Medium
flex_box_short = Short
flex_box_fixed = Fixed
flex_box_grows = Grows to fill the space
flex_box_start_1 = Start 1
flex_box_start_2 = Start 2
flex_box_end = End
flex_box_half_centered = Half, centered
flex_box_file = File
flex_box_edit = Edit
flex_box_view = View
flex_box_profile = Profile
flex_box_logout = Sign out

63
examples/locale/es-ES/intro-flex.ftl Normal file
View file

@ -0,0 +1,63 @@
flex_slogan = Posicionamiento con Flexbox
flex_block_title_direction = Dirección
flex_block_title_justify = Justificación de contenido
flex_block_title_align = Alineación de elementos
flex_block_title_align_self = Alineación individual
flex_block_title_align_content = Alineación de contenido
flex_block_title_grow_shrink = Crecimiento y reducción
flex_block_title_other = Otros ejemplos
flex_title_direction_row = Fila
flex_title_direction_row_reverse = Fila invertida
flex_title_direction_column = Columna
flex_title_direction_column_reverse = Columna invertida
flex_title_justify_start = Justificación: inicio
flex_title_justify_center = Justificación: centro
flex_title_justify_end = Justificación: final
flex_title_justify_between = Justificación: espacio entre elementos
flex_title_justify_around = Justificación: espacio alrededor de cada elemento
flex_title_justify_evenly = Justificación: espacio repartido a partes iguales
flex_title_align_start = Alineación: inicio
flex_title_align_center = Alineación: centro
flex_title_align_end = Alineación: final
flex_title_align_stretch = Alineación: estirar
flex_title_align_baseline = Alineación: línea base
flex_title_align_self_start = Alineación individual: inicio
flex_title_align_self_end = Alineación individual: final
flex_title_align_self_center = Alineación individual: centro
flex_title_align_self_stretch = Alineación individual: estirar
flex_title_align_self_baseline = Alineación individual: línea base
flex_title_align_content_start = Alineación de contenido: inicio
flex_title_align_content_end = Alineación de contenido: final
flex_title_align_content_center = Alineación de contenido: centro
flex_title_align_content_between = Alineación de contenido: espacio entre líneas
flex_title_align_content_around = Alineación de contenido: espacio alrededor de cada línea
flex_title_align_content_evenly = Alineación de contenido: espacio repartido a partes iguales
flex_title_align_content_stretch = Alineación de contenido: estirar
flex_title_grow = Crecimiento
flex_title_shrink = Reducción
flex_title_push_end = Margen automático
flex_title_wrap = Ajuste de línea con múltiples filas
flex_title_order = Orden visual
flex_title_gap_none = Sin espaciado
flex_title_gap_some = Con espaciado
flex_title_grid_thirds = Rejilla de columnas: tres tercios
flex_title_grid_offset = Rejilla de columnas: columna centrada con desplazamiento
flex_title_toolbar = Estructura compuesta: barra de herramientas
flex_item_label = Flex ítem { $n }
flex_box_tall = Alto
flex_box_medium = Medio
flex_box_short = Bajo
flex_box_fixed = Fijo
flex_box_grows = Crece para llenar el espacio
flex_box_start_1 = Inicio 1
flex_box_start_2 = Inicio 2
flex_box_end = Final
flex_box_half_centered = Mitad, centrada
flex_box_file = Archivo
flex_box_edit = Editar
flex_box_view = Ver
flex_box_profile = Perfil
flex_box_logout = Salir

6
examples/navbar-menus.rs
View file

@ -82,10 +82,8 @@ impl Extension for SuperMenu {
))
.with_item(bs::navbar::Item::nav(
bs::Nav::new()
.with_prop(PropsOp::add_classes(class::Margin::with(
BoxSide::Start,
ScaleSize::Auto,
)))
// Empuja este menú (y lo que le siga) al extremo final de la barra.
.with_prop(FlexItem::push_end())
.with_item(bs::nav::Item::link(
Lc::t("menus_item_sign_up", &LOC),
"/auth/sign-up",