♻️ (pagetop): with_prop() acepta impl Into<PropsOp>
`FlexItem`, `Margin` y `Padding` se pasan directamente gracias a `From` hacia `PropsOp`, sin `PropsOp::flex_item()`/`margin()`/`padding()` ni `.into()` explícito. Revisadas todas las llamadas en el código para simplificarlas.
This commit is contained in:
parent
50e4b42fe4
commit
3c3ffc91e6
49 changed files with 141 additions and 165 deletions
|
|
@ -7,8 +7,8 @@
|
|||
//! [`FlexItem`] configura, en cambio, un único elemento en relación con el contenedor flex de su
|
||||
//! padre (crecimiento, reducción, alineación individual, orden, ancho y desplazamiento). No tiene
|
||||
//! un builder propio ya que puede acabar aplicándose sobre cualquier componente (no sólo los que
|
||||
//! ofrecen `with_flex()`). Por eso se aplica con [`PropsOp::flex_item()`] sobre el `with_prop()`
|
||||
//! que normalmente ya expone cualquier componente.
|
||||
//! ofrecen `with_flex()`). Por eso se aplica pasándolo directamente al `with_prop()` que
|
||||
//! normalmente ya expone cualquier componente, gracias a su `From` hacia [`PropsOp`].
|
||||
//!
|
||||
//! # Un entorno nativo autosuficiente
|
||||
//!
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
//!
|
||||
//! [Flexbox]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout
|
||||
//! [`AssetsOp::add_responsive_style()`]: crate::core::component::AssetsOp::add_responsive_style
|
||||
//! [`PropsOp::flex_item()`]: crate::html::props::PropsOp::flex_item
|
||||
//! [`PropsOp`]: crate::html::props::PropsOp
|
||||
//! [`Container`]: crate::base::component::Container
|
||||
//! [`Navbar`]: crate::base::component::Navbar
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ use crate::{AutoDefault, Getters, builder_impl, util};
|
|||
///
|
||||
/// No tiene un builder dedicado en ningún componente. De hecho, no tendría sentido porque cualquier
|
||||
/// componente puede acabar siendo hijo de un contenedor flex, y ninguno debería necesitar un campo
|
||||
/// propio para esto. Se aplica con [`PropsOp::flex_item()`] sobre el `with_prop()` que suele
|
||||
/// exponer cualquier componente.
|
||||
/// propio para esto. Se aplica sobre el `with_prop()` que suele exponer cualquier componente, que
|
||||
/// acepta `FlexItem` directamente gracias a su `From` hacia [`PropsOp`].
|
||||
///
|
||||
/// Con [`ItemSize`] y [`ItemOffset`] se pueden modelar rejillas de columnas fijas sobre Flexbox,
|
||||
/// combinando un tamaño en fracción del contenedor con un desplazamiento lateral cuando se
|
||||
|
|
@ -27,18 +27,18 @@ use crate::{AutoDefault, Getters, builder_impl, util};
|
|||
/// use pagetop::prelude::*;
|
||||
///
|
||||
/// // Crece para ocupar el espacio sobrante, partiendo de ancho cero.
|
||||
/// let panel = Button::plain(Lc::n("Panel")).with_prop(PropsOp::flex_item(
|
||||
/// let panel = Button::plain(Lc::n("Panel")).with_prop(
|
||||
/// FlexItem::new()
|
||||
/// .with_grow(flex::ItemGrow::Is1)
|
||||
/// .with_size(flex::ItemSize::Custom(UnitValue::Zero)),
|
||||
/// ));
|
||||
/// );
|
||||
///
|
||||
/// // Ocupa un tercio del ancho del contenedor, desplazado otro tercio desde el inicio.
|
||||
/// let column = Container::new().with_prop(PropsOp::flex_item(
|
||||
/// let column = Container::new().with_prop(
|
||||
/// FlexItem::new()
|
||||
/// .with_size(flex::ItemSize::Percent33)
|
||||
/// .with_offset(flex::ItemOffset::Percent33),
|
||||
/// ));
|
||||
/// );
|
||||
/// ```
|
||||
#[derive(AutoDefault, Clone, Copy, Debug, PartialEq, Getters)]
|
||||
pub struct FlexItem {
|
||||
|
|
@ -89,7 +89,7 @@ impl FlexItem {
|
|||
/// use pagetop::prelude::*;
|
||||
///
|
||||
/// let user_menu = Nav::new()
|
||||
/// .with_prop(FlexItem::push_end().into())
|
||||
/// .with_prop(FlexItem::push_end())
|
||||
/// .with_item(nav::Item::link(Lc::n("Profile"), "/profile"))
|
||||
/// .with_item(nav::Item::link(Lc::n("Sign out"), "/sign-out"));
|
||||
/// ```
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ use std::panic::Location;
|
|||
/// #[builder_impl]
|
||||
/// impl MyButton {
|
||||
/// /// Modifica identificador, clases CSS, atributos HTML o valores extra del componente.
|
||||
/// pub fn with_prop(mut self, op: PropsOp) -> Self {
|
||||
/// pub fn with_prop(mut self, op: impl Into<PropsOp>) -> Self {
|
||||
/// self.props.alter_prop(op);
|
||||
/// self
|
||||
/// }
|
||||
|
|
@ -218,9 +218,10 @@ impl Props {
|
|||
/// Modifica el identificador, las clases, los atributos o los valores extra según la operación
|
||||
/// indicada, incluido el posicionamiento Flexbox y el espaciado (`FlexItem`, `Margin`,
|
||||
/// `Padding`). El método recomendado para construir cada operación es usar los constructores de
|
||||
/// [`PropsOp`].
|
||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
||||
match op {
|
||||
/// [`PropsOp`], aunque `FlexItem`, `Margin` y `Padding` pueden pasarse directamente gracias a
|
||||
/// sus `From` hacia `PropsOp`.
|
||||
pub fn with_prop(mut self, op: impl Into<PropsOp>) -> Self {
|
||||
match op.into() {
|
||||
PropsOp::SetId(value) => {
|
||||
self.apply_id(value.as_ref());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
//! Márgenes y relleno nativos aplicados a componentes.
|
||||
//!
|
||||
//! [`Margin`] y [`Padding`] configuran márgenes externos y relleno interno por lado lógico y punto
|
||||
//! de corte. Aplican sobre cualquier componente. Se usan igual que [`FlexItem`], con
|
||||
//! [`PropsOp::margin()`] y [`PropsOp::padding()`] sobre el `with_prop()` que normalmente ya expone
|
||||
//! cualquier componente.
|
||||
//! de corte. Aplican sobre cualquier componente. Se usan igual que [`FlexItem`]: pasándolos
|
||||
//! directamente al `with_prop()` que normalmente ya expone cualquier componente, gracias a su
|
||||
//! `From` hacia [`PropsOp`].
|
||||
//!
|
||||
//! # Ejemplo
|
||||
//!
|
||||
|
|
@ -11,17 +11,14 @@
|
|||
//! use pagetop::prelude::*;
|
||||
//!
|
||||
//! // Margen exterior arriba/abajo y relleno interno por los cuatro lados.
|
||||
//! // `Margin` y `Padding` implementan `From` para `PropsOp`, así que `with_prop()`
|
||||
//! // acepta `.into()` en vez de `PropsOp::margin()`/`PropsOp::padding()`.
|
||||
//! let card = Container::new()
|
||||
//! .with_prop(Margin::new().with_y(UnitValue::RelRem(1.0)).into())
|
||||
//! .with_prop(Padding::new().with_all(UnitValue::RelRem(1.5)).into())
|
||||
//! .with_prop(Margin::new().with_y(UnitValue::RelRem(1.0)))
|
||||
//! .with_prop(Padding::new().with_all(UnitValue::RelRem(1.5)))
|
||||
//! .with_child(Button::plain(Lc::n("Aceptar")));
|
||||
//! ```
|
||||
//!
|
||||
//! [`FlexItem`]: crate::html::flex::FlexItem
|
||||
//! [`PropsOp::margin()`]: crate::html::props::PropsOp::margin
|
||||
//! [`PropsOp::padding()`]: crate::html::props::PropsOp::padding
|
||||
//! [`PropsOp`]: crate::html::props::PropsOp
|
||||
|
||||
mod margin;
|
||||
pub use margin::Margin;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ use crate::{AutoDefault, Getters, builder_impl, util};
|
|||
|
||||
/// Configuración de márgenes externos por lado lógico y punto de corte.
|
||||
///
|
||||
/// No tiene relación con Flexbox. Se aplica sobre cualquier componente, con [`PropsOp::margin()`]
|
||||
/// desde el `with_prop()` que suele exponer cualquier componente.
|
||||
/// No tiene relación con Flexbox. Se aplica sobre cualquier componente, pasándolo directamente al
|
||||
/// `with_prop()` que suele exponer cualquier componente, gracias a su `From` hacia [`PropsOp`].
|
||||
///
|
||||
/// Cada lado admite cualquier [`UnitValue`], incluido [`UnitValue::Auto`] (por ejemplo, para
|
||||
/// centrar un bloque con `margin-inline: auto`). Los lados lógicos `start`/`end` se traducen a
|
||||
|
|
@ -19,11 +19,11 @@ use crate::{AutoDefault, Getters, builder_impl, util};
|
|||
/// use pagetop::prelude::*;
|
||||
///
|
||||
/// // Centra el bloque horizontalmente y añade espacio inferior.
|
||||
/// let panel = Container::new().with_prop(PropsOp::margin(
|
||||
/// let panel = Container::new().with_prop(
|
||||
/// Margin::new()
|
||||
/// .with_x(UnitValue::Auto)
|
||||
/// .with_bottom(UnitValue::RelRem(1.5)),
|
||||
/// ));
|
||||
/// );
|
||||
/// ```
|
||||
///
|
||||
/// [`Flex`]: crate::html::flex::Flex
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ use crate::{AutoDefault, Getters, builder_impl, util};
|
|||
/// Configuración de relleno interno por lado lógico y punto de corte.
|
||||
///
|
||||
/// Mismo mecanismo y criterio de uso que [`Margin`](super::Margin): no tiene relación con Flexbox,
|
||||
/// y se aplica sobre cualquier componente vía [`PropsOp::padding()`] desde su `with_prop()`.
|
||||
/// y se aplica sobre cualquier componente pasándolo directamente a su `with_prop()`, gracias a su
|
||||
/// `From` hacia [`PropsOp`].
|
||||
///
|
||||
/// A diferencia de `Margin`, [`UnitValue::Auto`] no tiene efecto en ningún lado ya que CSS no
|
||||
/// admite `padding: auto`, así que un lado establecido a `Auto` se ignora como si no se hubiera
|
||||
|
|
@ -18,11 +19,11 @@ use crate::{AutoDefault, Getters, builder_impl, util};
|
|||
/// ```rust,no_run
|
||||
/// use pagetop::prelude::*;
|
||||
///
|
||||
/// let card = Container::new().with_prop(PropsOp::padding(
|
||||
/// let card = Container::new().with_prop(
|
||||
/// Padding::new()
|
||||
/// .with_all(UnitValue::RelRem(1.0))
|
||||
/// .with_bottom_at(Breakpoint::Md, UnitValue::RelRem(2.0)),
|
||||
/// ));
|
||||
/// );
|
||||
/// ```
|
||||
#[derive(AutoDefault, Clone, Copy, Debug, PartialEq, Getters)]
|
||||
pub struct Padding {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue