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

✨ (pagetop): Añade Grid y extrae Flex de Container

Browse source
This commit is contained in:
Manuel Cillero 2026-09-18 16:49:09 +02:00
parent dfff12881f
commit 307ca6f62c
44 changed files with 2554 additions and 735 deletions
Download patch file Download diff file Expand all files Collapse all files

27
examples/form-controls.rs
View file

@ -140,12 +140,9 @@ async fn form_controls(request: HttpRequest) -> Result<Markup, ErrorPage> {
.with_child(form::Hidden::field("origin", "form-selections"))
// Botonera de acciones.
.with_child(
Container::new()
.with_flex(
Flex::new()
.with_wrap(flex::Behavior::Wrap)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
Flex::new()
.with_wrap(flex::Behavior::Wrap)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5)))
.with_child(
Button::submit(Lc::t("btn_submit", &LOC))
.with_style(button::Style::Solid(Intent::Primary)),
@ -260,12 +257,9 @@ async fn form_controls(request: HttpRequest) -> Result<Markup, ErrorPage> {
.with_child(form::Hidden::field("origin", "form-text"))
// Botonera de acciones.
.with_child(
Container::new()
.with_flex(
Flex::new()
.with_wrap(flex::Behavior::Wrap)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
Flex::new()
.with_wrap(flex::Behavior::Wrap)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5)))
.with_child(
Button::submit(Lc::t("btn_submit", &LOC))
.with_style(button::Style::Solid(Intent::Primary)),
@ -440,12 +434,9 @@ fn form_lists() -> Form {
.with_child(form::Hidden::field("origin", "form-lists"))
// Botonera de acciones.
.with_child(
Container::new()
.with_flex(
Flex::new()
.with_wrap(flex::Behavior::Wrap)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
Flex::new()
.with_wrap(flex::Behavior::Wrap)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5)))
.with_child(
Button::submit(Lc::t("btn_submit", &LOC))
.with_style(button::Style::Solid(Intent::Primary)),

6
examples/intro-flex.rs
View file

@ -530,10 +530,8 @@ fn flex_item(n: impl Into<CowStr>) -> Lc {
}
// 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)
fn demo_row(flex: Flex) -> Flex {
flex.with_prop(PropsOp::add_classes("flex-demo-row"))
}
// Titulo y fragmento de codigo que introducen cada demostracion.

544
examples/intro-grid.rs Normal file
View file

@ -0,0 +1,544 @@
use pagetop::prelude::*;
include_locales!(LOC from "examples/locale");
struct IntroGrid;
#[async_trait]
impl Extension for IntroGrid {
fn dependencies(&self) -> Vec<ExtensionRef> {
vec![&pagetop_bootsier::Bootsier]
}
fn configure_router(&self, router: Router) -> Router {
router.route("/", web::get(intro_grid))
}
}
async fn intro_grid(request: HttpRequest) -> Result<Markup, ErrorPage> {
Page::new(request)
.with_assets(demo_box_styles())
.with_assets(demo_row_styles())
.with_child(
Intro::default()
.with_opening(IntroOpening::Custom)
.with_title(Lc::n("PageTop"))
.with_slogan(Lc::t("grid_slogan", &LOC))
.with_button(None::<(Lc, Route)>)
.with_child(columns_block())
.with_child(rows_gap_block())
.with_child(placement_block())
.with_child(alignment_block())
.with_child(content_alignment_block())
.with_child(item_alignment_block())
.with_child(auto_flow_block())
.with_child(auto_tracks_block())
.with_child(responsive_block())
.with_child(layout_block()),
)
.render()
.await
}
fn columns_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_columns", &LOC))
.with_child(caption(
Lc::t("grid_title_columns_thirds", &LOC),
Lc::n("Grid::new().with_columns(Tracks::repeat(3, AxisTrack::Fraction(1.0)))"),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(3, grid::AxisTrack::Fraction(1.0)))
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3"))),
)
.with_child(caption(
Lc::t("grid_title_columns_sidebar", &LOC),
Lc::n(concat!(
"Grid::new().with_columns(Tracks::new()",
".with_track(AxisTrack::Fixed(UnitValue::Px(140)))",
".with_track(AxisTrack::Fraction(1.0)))",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(
grid::Tracks::new()
.with_track(grid::AxisTrack::Fixed(UnitValue::Px(140)))
.with_track(grid::AxisTrack::Fraction(1.0)),
)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(Lc::t("grid_box_sidebar", &LOC)))
.with_child(demo_box(Lc::t("grid_box_content", &LOC))),
)
.with_child(caption(
Lc::t("grid_title_columns_min_max", &LOC),
Lc::n(concat!(
"Grid::new().with_columns(Tracks::new()",
".with_track(AxisTrack::MinContent)",
".with_track(AxisTrack::Fraction(1.0))",
".with_track(AxisTrack::MaxContent))",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(
grid::Tracks::new()
.with_track(grid::AxisTrack::MinContent)
.with_track(grid::AxisTrack::Fraction(1.0))
.with_track(grid::AxisTrack::MaxContent),
)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(Lc::t("grid_box_min_content", &LOC)))
.with_child(demo_box(Lc::t("grid_box_fraction", &LOC)))
.with_child(demo_box(Lc::t("grid_box_max_content", &LOC))),
)
}
fn rows_gap_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_rows_gap", &LOC))
.with_child(caption(
Lc::t("grid_title_rows", &LOC),
Lc::n(concat!(
"Grid::new()",
".with_columns(Tracks::repeat(2, AxisTrack::Fraction(1.0)))",
".with_rows(Tracks::repeat(2, AxisTrack::Fixed(UnitValue::RelRem(3.0))))",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(2, grid::AxisTrack::Fraction(1.0)))
.with_rows(grid::Tracks::repeat(
2,
grid::AxisTrack::Fixed(UnitValue::RelRem(3.0)),
))
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3")))
.with_child(demo_box(grid_box("4"))),
)
.with_child(caption(
Lc::t("grid_title_gap_distinct", &LOC),
Lc::n(concat!(
"Grid::new().with_gap(align::Gap::Distinct {",
" row: UnitValue::RelRem(1.5), column: UnitValue::RelRem(0.25) })",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(3, grid::AxisTrack::Fraction(1.0)))
.with_gap(align::Gap::Distinct {
row: UnitValue::RelRem(1.5),
column: UnitValue::RelRem(0.25),
}),
)
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3")))
.with_child(demo_box(grid_box("4")))
.with_child(demo_box(grid_box("5")))
.with_child(demo_box(grid_box("6"))),
)
}
fn placement_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_placement", &LOC))
.with_child(caption(
Lc::t("grid_title_placement", &LOC),
Lc::n(concat!(
"GridItem::new().with_column(ItemPlacement::Span(2))",
" / .with_column(ItemPlacement::Range(2, 4))",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(4, grid::AxisTrack::Fraction(1.0)))
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(Lc::t("grid_box_plain", &LOC)))
.with_child(
demo_box(Lc::t("grid_box_span_2", &LOC))
.with_prop(GridItem::new().with_column(grid::ItemPlacement::Span(2))),
)
.with_child(demo_box(Lc::t("grid_box_plain", &LOC)))
.with_child(
demo_box(Lc::t("grid_box_range", &LOC)).with_prop(
GridItem::new()
.with_column(grid::ItemPlacement::Range(2, 4))
.with_row(grid::ItemPlacement::Line(2)),
),
),
)
}
fn alignment_block() -> Block {
let mut block = Block::new().with_title(Lc::t("grid_block_title_alignment", &LOC));
let variants: [(&str, grid::DefaultJustify, align::Items, &str); 4] = [
(
"grid_title_alignment_start",
grid::DefaultJustify::Start,
align::Items::Start,
concat!(
"Grid::new().with_justify_items(DefaultJustify::Start)",
".with_align_items(align::Items::Start)",
),
),
(
"grid_title_alignment_center",
grid::DefaultJustify::Center,
align::Items::Center,
concat!(
"Grid::new().with_justify_items(DefaultJustify::Center)",
".with_align_items(align::Items::Center)",
),
),
(
"grid_title_alignment_end",
grid::DefaultJustify::End,
align::Items::End,
concat!(
"Grid::new().with_justify_items(DefaultJustify::End)",
".with_align_items(align::Items::End)",
),
),
(
"grid_title_alignment_stretch",
grid::DefaultJustify::Stretch,
align::Items::Stretch,
concat!(
"Grid::new().with_justify_items(DefaultJustify::Stretch)",
".with_align_items(align::Items::Stretch)",
),
),
];
for (title_key, justify_items, align_items, code) in variants {
block = block
.with_child(caption(Lc::t(title_key, &LOC), Lc::n(code)))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(
3,
grid::AxisTrack::Fixed(UnitValue::Px(96)),
))
.with_rows(grid::Tracks::repeat(
1,
grid::AxisTrack::Fixed(UnitValue::RelRem(4.5)),
))
.with_justify_items(justify_items)
.with_align_items(align_items)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3"))),
);
}
block
}
fn content_alignment_block() -> Block {
let mut block = Block::new().with_title(Lc::t("grid_block_title_content_alignment", &LOC));
let variants: [(&str, grid::ContentJustify, &str); 4] = [
(
"grid_title_content_alignment_start",
grid::ContentJustify::Start,
"Grid::new().with_justify_content(ContentJustify::Start)",
),
(
"grid_title_content_alignment_center",
grid::ContentJustify::Center,
"Grid::new().with_justify_content(ContentJustify::Center)",
),
(
"grid_title_content_alignment_between",
grid::ContentJustify::SpaceBetween,
"Grid::new().with_justify_content(ContentJustify::SpaceBetween)",
),
(
"grid_title_content_alignment_evenly",
grid::ContentJustify::SpaceEvenly,
"Grid::new().with_justify_content(ContentJustify::SpaceEvenly)",
),
];
for (title_key, justify_content, code) in variants {
block = block
.with_child(caption(Lc::t(title_key, &LOC), Lc::n(code)))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(
3,
grid::AxisTrack::Fixed(UnitValue::Px(72)),
))
.with_justify_content(justify_content)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_prop(PropsOp::add_style("max-width", "26rem"))
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3"))),
);
}
block
}
fn item_alignment_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_item_alignment", &LOC))
.with_child(caption(
Lc::t("grid_title_item_alignment", &LOC),
Lc::n(concat!(
"GridItem::new()",
".with_justify_self(ItemJustify::End)",
".with_align_self(align::ItemSelf::End)",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(
3,
grid::AxisTrack::Fixed(UnitValue::Px(96)),
))
.with_rows(grid::Tracks::repeat(
1,
grid::AxisTrack::Fixed(UnitValue::RelRem(4.5)),
))
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(grid_box("1")))
.with_child(
demo_box(Lc::t("grid_box_overridden", &LOC)).with_prop(
GridItem::new()
.with_justify_self(grid::ItemJustify::End)
.with_align_self(align::ItemSelf::End),
),
)
.with_child(demo_box(grid_box("3"))),
)
}
fn auto_flow_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_auto_flow", &LOC))
.with_child(caption(
Lc::t("grid_title_auto_flow_row", &LOC),
Lc::n("Grid::new().with_auto_flow(AutoFlow::Row) (por defecto)"),
))
.with_child(dense_demo(grid::AutoFlow::Row))
.with_child(caption(
Lc::t("grid_title_auto_flow_dense", &LOC),
Lc::n("Grid::new().with_auto_flow(AutoFlow::RowDense)"),
))
.with_child(dense_demo(grid::AutoFlow::RowDense))
}
fn dense_demo(auto_flow: grid::AutoFlow) -> Grid {
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(4, grid::AxisTrack::Fraction(1.0)))
.with_auto_flow(auto_flow)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(
demo_box(Lc::t("grid_box_span_2", &LOC))
.with_prop(GridItem::new().with_column(grid::ItemPlacement::Span(2))),
)
.with_child(
demo_box(Lc::t("grid_box_span_2", &LOC))
.with_prop(GridItem::new().with_column(grid::ItemPlacement::Span(2))),
)
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3")))
}
fn auto_tracks_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_auto_tracks", &LOC))
.with_child(caption(
Lc::t("grid_title_auto_tracks", &LOC),
Lc::n(concat!(
"Grid::new()",
".with_columns(Tracks::repeat(3, AxisTrack::Fraction(1.0)))",
".with_auto_rows(AxisTrack::Fixed(UnitValue::RelRem(3.0)))",
)),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(3, grid::AxisTrack::Fraction(1.0)))
.with_auto_rows(grid::AxisTrack::Fixed(UnitValue::RelRem(3.0)))
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_child(demo_box(grid_box("1")))
.with_child(demo_box(grid_box("2")))
.with_child(demo_box(grid_box("3")))
.with_child(demo_box(grid_box("4")))
.with_child(demo_box(grid_box("5")))
.with_child(demo_box(grid_box("6"))),
)
}
fn responsive_block() -> Block {
let mut row = demo_grid(
Grid::new()
.with_columns(grid::Tracks::repeat(1, grid::AxisTrack::Fraction(1.0)))
.with_columns_at(
Breakpoint::Sm,
grid::Tracks::repeat(2, grid::AxisTrack::Fraction(1.0)),
)
.with_columns_at(
Breakpoint::Md,
grid::Tracks::repeat(3, grid::AxisTrack::Fraction(1.0)),
)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
);
for n in 1..=6 {
row = row.with_child(demo_box(card_label(n)));
}
Block::new()
.with_title(Lc::t("grid_block_title_responsive", &LOC))
.with_child(caption(
Lc::t("grid_title_responsive", &LOC),
Lc::n(concat!(
"Grid::new()",
".with_columns(Tracks::repeat(1, AxisTrack::Fraction(1.0)))",
".with_columns_at(Breakpoint::Sm, Tracks::repeat(2, AxisTrack::Fraction(1.0)))",
".with_columns_at(Breakpoint::Md, Tracks::repeat(3, AxisTrack::Fraction(1.0)))",
)),
))
.with_child(row)
}
fn layout_block() -> Block {
Block::new()
.with_title(Lc::t("grid_block_title_layout", &LOC))
.with_child(caption(
Lc::t("grid_title_layout", &LOC),
Lc::t("grid_desc_layout", &LOC),
))
.with_child(
demo_grid(
Grid::new()
.with_columns(
grid::Tracks::new()
.with_track(grid::AxisTrack::Fixed(UnitValue::Px(120)))
.with_track(grid::AxisTrack::Fraction(1.0))
.with_track(grid::AxisTrack::Fixed(UnitValue::Px(120))),
)
.with_rows(
grid::Tracks::new()
.with_track(grid::AxisTrack::Auto)
.with_track(grid::AxisTrack::Fraction(1.0))
.with_track(grid::AxisTrack::Auto),
)
.with_gap(align::Gap::Both(UnitValue::RelRem(0.5))),
)
.with_prop(PropsOp::add_style("min-height", "18rem"))
.with_child(
demo_box(Lc::t("grid_box_header", &LOC))
.with_prop(GridItem::new().with_column(grid::ItemPlacement::Span(3))),
)
.with_child(demo_box(Lc::t("grid_box_nav", &LOC)))
.with_child(demo_box(Lc::t("grid_box_content", &LOC)))
.with_child(demo_box(Lc::t("grid_box_aside", &LOC)))
.with_child(
demo_box(Lc::t("grid_box_footer", &LOC))
.with_prop(GridItem::new().with_column(grid::ItemPlacement::Span(3))),
),
)
}
// **< HELPERS >************************************************************************************
// Aspecto fijo de las cajas de muestra: esquinas rectas y borde claro, a diferencia de las cajas
// redondeadas de `intro-flex.rs`, para distinguir a simple vista los ejemplos de Grid de los de Flex.
fn demo_box_styles() -> AssetsOp {
AssetsOp::add_responsive_styles(
None,
"grid-demo-box",
[
("background-color", "#0d6efd"),
("color", "#fff"),
("border", "2px solid #6ea8fe"),
("min-width", "3rem"),
("width", "auto"),
("max-width", "none"),
("margin", "0"),
("text-align", "center"),
],
)
}
// Aspecto fijo de las filas de muestra.
fn demo_row_styles() -> AssetsOp {
AssetsOp::add_responsive_styles(
None,
"grid-demo-row",
[
("background-color", "#f1f3f5"),
("width", "100%"),
("max-width", "none"),
("margin", "0 0 1.5rem"),
("padding", "0.75rem"),
],
)
}
// Caja con el relleno vertical estandar del resto de ejemplos.
fn demo_box(label: Lc) -> Container {
Container::new()
.with_prop(PropsOp::add_classes("grid-demo-box"))
.with_prop(PropsOp::add_style("padding", "0.5rem 1rem"))
.with_child(Html::with(move |cx| html! { (label.using(cx)) }))
}
// Etiqueta "Box N" para las cajas que sólo se distinguen por su posición.
fn grid_box(n: impl Into<CowStr>) -> Lc {
Lc::t("grid_box_label", &LOC).with_arg("n", n)
}
// Etiqueta "Tarjeta N" para las cajas de la rejilla responsive.
fn card_label(n: usize) -> Lc {
Lc::t("grid_box_card", &LOC).with_arg("n", n.to_string())
}
// Rejilla de demostracion con fondo gris para visualizar los limites del propio contenedor grid.
fn demo_grid(grid: Grid) -> Grid {
grid.with_prop(PropsOp::add_classes("grid-demo-row"))
}
// Titulo y fragmento de codigo que introducen cada demostracion.
fn caption(title: Lc, code: Lc) -> Html {
Html::with(move |cx| {
html! {
h3 { (title.using(cx)) }
p { code { (code.using(cx)) } }
}
})
}
#[pagetop::main]
async fn main() -> std::io::Result<()> {
Application::prepare(&IntroGrid).await.run().await
}

6
examples/intro-responsive.rs
View file

@ -245,10 +245,8 @@ fn card_label(n: usize) -> Lc {
}
// 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)
fn demo_row(flex: Flex) -> Flex {
flex.with_prop(PropsOp::add_classes("flex-demo-row"))
}
// Titulo y fragmento de codigo que introducen cada demostracion.

6
examples/intro-spacing.rs
View file

@ -229,10 +229,8 @@ fn box_sample() -> Lc {
}
// Fila de demostración con fondo gris para visualizar los límites de cada caja.
fn demo_row(flex: Flex) -> Container {
Container::new()
.with_prop(PropsOp::add_classes("spacing-demo-row"))
.with_flex(flex)
fn demo_row(flex: Flex) -> Flex {
flex.with_prop(PropsOp::add_classes("spacing-demo-row"))
}
// Título y fragmento de código que introducen cada demostración.

49
examples/locale/en-US/intro-grid.ftl Normal file
View file

@ -0,0 +1,49 @@
grid_slogan = CSS Grid positioning
grid_block_title_columns = Columns
grid_block_title_rows_gap = Rows and gap
grid_block_title_placement = Item placement
grid_block_title_alignment = Align items
grid_block_title_content_alignment = Justify content
grid_block_title_item_alignment = Individual alignment
grid_block_title_auto_flow = Auto-placement algorithm
grid_block_title_auto_tracks = Implicit tracks
grid_block_title_responsive = Responsive grid
grid_block_title_layout = Composite structure: page layout
grid_title_columns_thirds = Three equal columns
grid_title_columns_sidebar = Fixed sidebar + flexible content
grid_title_columns_min_max = Min-content, fraction, max-content
grid_title_rows = Fixed-height rows
grid_title_gap_distinct = Different row and column spacing
grid_title_placement = Column spanning and explicit ranges
grid_title_alignment_start = Justify/align items: start
grid_title_alignment_center = Justify/align items: center
grid_title_alignment_end = Justify/align items: end
grid_title_alignment_stretch = Justify/align items: stretch
grid_title_content_alignment_start = Justify content: start
grid_title_content_alignment_center = Justify content: center
grid_title_content_alignment_between = Justify content: space between
grid_title_content_alignment_evenly = Justify content: space evenly
grid_title_item_alignment = Overriding the container's alignment on a single item
grid_title_auto_flow_row = Default flow, leaves a gap
grid_title_auto_flow_dense = Dense flow, fills the gap
grid_title_auto_tracks = Equal-height implicit rows
grid_title_responsive = One column on mobile, two on tablet, three on desktop
grid_title_layout = Header and footer spanning three columns, flexible content area
grid_desc_layout = Grid::new() with fixed side columns, a flexible center column and explicit spans
grid_box_label = Box { $n }
grid_box_card = Card { $n }
grid_box_sidebar = Sidebar
grid_box_content = Content
grid_box_min_content = Min-content
grid_box_fraction = 1fr
grid_box_max_content = Max-content
grid_box_plain = Plain
grid_box_span_2 = Spans 2 columns
grid_box_range = Columns 2 to 3
grid_box_overridden = Overridden
grid_box_header = Header
grid_box_nav = Navigation
grid_box_aside = Aside
grid_box_footer = Footer

49
examples/locale/es-ES/intro-grid.ftl Normal file
View file

@ -0,0 +1,49 @@
grid_slogan = Posicionamiento con CSS Grid
grid_block_title_columns = Columnas
grid_block_title_rows_gap = Filas y espaciado
grid_block_title_placement = Colocación de elementos
grid_block_title_alignment = Alineación de elementos
grid_block_title_content_alignment = Justificación de contenido
grid_block_title_item_alignment = Alineación individual
grid_block_title_auto_flow = Algoritmo de colocación automática
grid_block_title_auto_tracks = Pistas implícitas
grid_block_title_responsive = Rejilla responsive
grid_block_title_layout = Estructura compuesta: maquetación de página
grid_title_columns_thirds = Tres columnas iguales
grid_title_columns_sidebar = Barra lateral fija + contenido flexible
grid_title_columns_min_max = Contenido mínimo, fracción, contenido máximo
grid_title_rows = Filas de altura fija
grid_title_gap_distinct = Espaciado distinto entre filas y columnas
grid_title_placement = Columnas abarcadas y rangos explícitos
grid_title_alignment_start = Justificación/alineación de elementos: inicio
grid_title_alignment_center = Justificación/alineación de elementos: centro
grid_title_alignment_end = Justificación/alineación de elementos: final
grid_title_alignment_stretch = Justificación/alineación de elementos: estirar
grid_title_content_alignment_start = Justificación de contenido: inicio
grid_title_content_alignment_center = Justificación de contenido: centro
grid_title_content_alignment_between = Justificación de contenido: espacio entre elementos
grid_title_content_alignment_evenly = Justificación de contenido: espacio repartido a partes iguales
grid_title_item_alignment = Sobrescribir la alineación del contenedor en un único elemento
grid_title_auto_flow_row = Flujo por defecto, deja un hueco
grid_title_auto_flow_dense = Flujo denso, rellena el hueco
grid_title_auto_tracks = Filas implícitas de igual altura
grid_title_responsive = Una columna en móvil, dos en tableta, tres en escritorio
grid_title_layout = Cabecera y pie abarcando tres columnas, área de contenido flexible
grid_desc_layout = Grid::new() con columnas laterales fijas, una columna central flexible y abarcados explícitos
grid_box_label = Caja { $n }
grid_box_card = Tarjeta { $n }
grid_box_sidebar = Barra lateral
grid_box_content = Contenido
grid_box_min_content = Contenido mínimo
grid_box_fraction = 1fr
grid_box_max_content = Contenido máximo
grid_box_plain = Normal
grid_box_span_2 = Abarca 2 columnas
grid_box_range = Columnas 2 a 3
grid_box_overridden = Sobrescrita
grid_box_header = Cabecera
grid_box_nav = Navegación
grid_box_aside = Aparte
grid_box_footer = Pie