diff --git a/content/docs/en/elements/layouts/flexbox-layout.md b/content/docs/en/elements/layouts/flexbox-layout.md index 6d3f5fde..72d7226e 100644 --- a/content/docs/en/elements/layouts/flexbox-layout.md +++ b/content/docs/en/elements/layouts/flexbox-layout.md @@ -6,9 +6,9 @@ contributors: [rigor789, ikoevska] `` is a layout container that provides a non-exact implementation of the [CSS Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically. -### Examples +## Examples -#### Default flex layout +### Default flex layout The following example creates a row of three equally-sized elements that span across the entire height of the screen. @@ -21,9 +21,9 @@ The following example creates a row of three equally-sized elements that span ac ``` -#### Column flex layout +### Column flex layout -The following example creates a column of 3 equally-sized elements that span across the entire width of the screen. +The following example creates a column of three equally-sized elements that span across the entire width of the screen. ```html @@ -34,9 +34,9 @@ The following example creates a column of 3 equally-sized elements that span acr ``` -#### Row flex layout with items aligned to `flex-start` +### Row flex layout with items aligned to `flex-start` -The following example creates a row of 3 items placed at the top of the screen. Items are placed in the order they were declared in. +The following example creates a row of three items placed at the top of the screen. Items are placed in the order they were declared in. ```html @@ -47,9 +47,9 @@ The following example creates a row of 3 items placed at the top of the screen. ``` -#### Row flex layout with custom order +### Row flex layout with custom order -The following example creates a row of 3 items placed at the top of the screen. Items are placed in a customized order. +The following example creates a row of three items placed at the top of the screen. Items are placed in a customized order. ```html @@ -60,7 +60,7 @@ The following example creates a row of 3 items placed at the top of the screen. ``` -#### Row flex layout with wrapping +### Row flex layout with wrapping The following example creates four items with enabled line wrapping. When the row runs out of space, the container wraps the last item on a new line. @@ -74,7 +74,7 @@ The following example creates four items with enabled line wrapping. When the ro ``` -#### Column flex layout with reverse order and items with a different `alignSelf` +### Column flex layout with reverse order and items with a different `alignSelf` The following example shows how to use: @@ -109,8 +109,8 @@ When an element is a direct child of ``, you can work with the fo | Name | Type | Description | |------|------|-------------| -`order` | `Number` | Sets the order in which child element appear in relation to one another. +`order` | `Number` | Sets the order in which child element appear in relation to one another. `flexGrow` | `Number` | Indicates that the child should grow in size, if necessary. Sets how much the child will grow in proportion to the rest of the child elements in the flex container. `flexShrink` | `Number` | Indicates that the child should shrink when the row runs out of space. Sets how much the flex item will shrink in proportion to the rest of the child elements in the flex container. When not specified, its value is set to `1`. `alignSelf` | `String` | (Android-only) Overrides the `alignItems` value for the child.
Valid values:
`flex-start` (cross-start margin edge of the item is placed on the cross-start line),
`flex-end` (cross-end margin edge of the item is placed on the cross-end line),
`center` (item is centered on the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (items is stretched to fill the container but respects `min-width` and `max-width`).
Default value: `stretch`. -`flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. \ No newline at end of file +`flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. \ No newline at end of file diff --git a/content/docs/en/elements/layouts/stack-layout.md b/content/docs/en/elements/layouts/stack-layout.md index e92e9b70..161378d4 100644 --- a/content/docs/en/elements/layouts/stack-layout.md +++ b/content/docs/en/elements/layouts/stack-layout.md @@ -6,9 +6,9 @@ contributors: [rigor789, ikoevska] `` is a layout container that lets you stack the child elements vertically (default) or horizontally. -### Samples +## Examples -#### Default stacking +### Default stacking The following example creates a vertical stack of 3 equally-sized elements. Items are stretched to cover the entire width of the screen. Items are placed in the order they were declared in. @@ -21,7 +21,7 @@ The following example creates a vertical stack of 3 equally-sized elements. Item ``` -#### Horizontal stacking +### Horizontal stacking The following example creates a horizontal stack of 3 equally-sized elements. Items are stretched to cover the entire height of the screen. Items are placed in the order they were declared in. @@ -34,7 +34,7 @@ The following example creates a horizontal stack of 3 equally-sized elements. It ``` -#### Stack layout with horizontally aligned children +### Stack layout with horizontally aligned children The following example creates a diagonal stack of items with responsive sizes. Items are vertically stacked. @@ -52,7 +52,7 @@ The following example creates a diagonal stack of items with responsive sizes. I ``` -#### Horizontal stack layout with vertically aligned children +### Horizontal stack layout with vertically aligned children The following example creates a diagonal stack of items with responsive sizes. Items are horizontally stacked. diff --git a/content/docs/en/elements/layouts/wrap-layout.md b/content/docs/en/elements/layouts/wrap-layout.md index 4bb513e9..556a2aee 100644 --- a/content/docs/en/elements/layouts/wrap-layout.md +++ b/content/docs/en/elements/layouts/wrap-layout.md @@ -6,9 +6,9 @@ contributors: [rigor789, ikoevska] `` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column. -### Samples +### Examples -#### Default wrap layout +### Default wrap layout The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item on a new row. @@ -23,7 +23,7 @@ The following example creates a row of equally-sized items. When the row runs ou -#### Vertical wrap layout +### Vertical wrap layout The following example creates a column of equally-sized items. When the row runs out of space, the container wraps the last item on a new column. diff --git a/content/docs/es/elements/components/image.md b/content/docs/es/elements/components/image.md index 052f223d..5cda311a 100644 --- a/content/docs/es/elements/components/image.md +++ b/content/docs/es/elements/components/image.md @@ -48,4 +48,4 @@ contributors: [ianaya89] | Android | iOS | |---------|-----| -| [`android.widget.ImageView`](https://developer.android.com/reference/android/widget/ImageView.html) | [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) \ No newline at end of file +| [`android.widget.ImageView`](https://developer.android.com/reference/android/widget/ImageView.html) | [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) diff --git a/content/docs/es/elements/components/list-view.md b/content/docs/es/elements/components/list-view.md index a041b8fc..aacb3834 100644 --- a/content/docs/es/elements/components/list-view.md +++ b/content/docs/es/elements/components/list-view.md @@ -23,7 +23,7 @@ contributors: [ianaya89] El componente [``](/en/docs/utilities/v-template) es utilizado para definir como se va a mostrar cada elemento de la lista dentro de la pantalla. -Si necesitas visualizar uno o mas elementos de manera diferente al resto, puedes ingresarlos como hijos de un componente `` y utilizar las condiciones que sean necesarias. Dentro de un ``, puedes usar todos los `` que creas necesarios. +Si necesitas visualizar uno o más elementos de manera diferente al resto, puedes ingresarlos como hijos de un componente `` y utilizar las condiciones que sean necesarias. Dentro de un ``, puedes usar todos los `` que creas necesarios. ```html diff --git a/content/docs/es/elements/components/text-view.md b/content/docs/es/elements/components/text-view.md index c3156837..6ca48a7f 100644 --- a/content/docs/es/elements/components/text-view.md +++ b/content/docs/es/elements/components/text-view.md @@ -4,7 +4,7 @@ apiRef: https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textv contributors: [ianaya89] --- -`` es un componente de UI que muestra un contenedor de texto editable o de solo-lectura. Puedes utilizarlo para permitir que el usuario ingrese grande cantidades de texto o simplemente para mostrar texto en mas de una línea. +`` es un componente de UI que muestra un contenedor de texto editable o de solo-lectura. Puedes utilizarlo para permitir que el usuario ingrese grande cantidades de texto o simplemente para mostrar texto en más de una línea. El componente `` extiende a [`TextBase`](https://docs.nativescript.org/api-reference/classes/_ui_text_base_.textbase) y a[`EditableTextBase`](https://docs.nativescript.org/api-reference/classes/_ui_editor_text_base_.editabletextbase),agregando propiedades y eventos adicionales. diff --git a/content/docs/es/elements/layouts/absolute-layout.md b/content/docs/es/elements/layouts/absolute-layout.md index 42a7e2b3..113d6898 100644 --- a/content/docs/es/elements/layouts/absolute-layout.md +++ b/content/docs/es/elements/layouts/absolute-layout.md @@ -1,15 +1,27 @@ --- title: AbsoluteLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_ +docRef: https://docs.nativescript.org/ui/layouts/layout-containers#absolutelayout contributors: [ianaya89] --- -El contenedor `AbsoluteLayout` es el *layout* mas simple de NativeScript. Usa coordenadas absolutas para posicionar los componentes hijos a partir del vértice superior izquierdo. + +El contenedor `AbsoluteLayout` es el *layout* más simple de NativeScript. Usa coordenadas absolutas para posicionar los componentes hijos a partir del vértice superior izquierdo. `AbsoluteLayout` no aplicará ninguna restricción de diseño a tus elementos hijos y tampoco los redimensionará en tiempo de ejecución (cuando cambie su tamaño). -### Ejemplos +El contenedor `` es el *layout* más simple de NativeScript + +`` se comporta de la siguiente forma: + +* Usa un par de coordinadas absolutas izquierda/derecha para posicioanr los elementos hijos. +* **No** fuerza ningún tipo de restricción de posicionamiento sobre los elementos hijos. +* **No** redimensiona los elementos hijos en tiempo de ejecución, cuando estos cambien de tamaño. + +## Ejemplos -#### Diseño de tipo grilla +### Diseño de tipo grilla + +El siguiente ejemplo crea una grilla simple. Para más información sobre *layouts* de grillas puedes ver [GridLayout](/es/docs/elements/layouts/grid-layout). ```html @@ -21,7 +33,9 @@ El contenedor `AbsoluteLayout` es el *layout* mas simple de NativeScript. Usa co ``` -#### Superponiendo elementos +### Superponiendo elementos + +El siguiente ejemplo crea un grupo de elementos que se superponen entre ellos. ```html @@ -31,16 +45,15 @@ El contenedor `AbsoluteLayout` es el *layout* mas simple de NativeScript. Usa co ``` - ## Propiedades -`AbsoluteLayout` no tiene propiedades. +No tiene propiedades. -## Propiedades de elementos hijos +## Additional children props -Cuando un elemento es hijo directo de `AbsoluteLayout`, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: +Cuando un elemento es hijo directo de AbsoluteLayout, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: -| Nombre | Tipo | Descripción | +| Name | Type | Description | |------|------|-------------| -| `top` | `Number` | Representa la distancia desde el margen superior del `AbsoluteLayout` -| `left` | `Number` | Representa la distancia desde el margen izquierdo del `AbsoluteLayout` +| `top` | `Number` | Obtiene o establece la distancia (en píxeles) entre el borde superior del elemento hijo y el borde superior del elemento padre. +| `left` | `Number` | Obtiene o establece la distancia (en píxeles) entre el borde izquierdo del elemento hijo y el borde izquierdo del elemento padre. diff --git a/content/docs/es/elements/layouts/dock-layout.md b/content/docs/es/elements/layouts/dock-layout.md index 9eae3491..8b578e48 100644 --- a/content/docs/es/elements/layouts/dock-layout.md +++ b/content/docs/es/elements/layouts/dock-layout.md @@ -4,11 +4,18 @@ apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_lay contributors: [ianaya89] --- -El contenedor `DockLayout` provee un mecanismo de acoplamiento para los elementos hijos, basado en los valores `left`, `right`, `top`, `bottom`. Para definir el tipo de acoplamiento de un elemento hijo, se puede utilizar la propiedad `dock`. Para acoplar un elemento hijo en el centro de un `DockLayout`, este deberá ser el último hijo del contenedor `DockLayout` y la propiedad de `stretchLastChild` (de `DockLayout`) deberá tener el valor `true`. +El contenedor `DockLayout` provee un mecanismo de acoplamiento para los elementos hijos que permite ubicalor a los costados o en el centro del contenedor. -### Ejemplos +`` se comporta de la siguiente forma: -#### Acoplar a cada lado sin estirar el último elemento hijo +* Usa la propiedad `dock` para ubicar los elementos con los valores: `left`, `right`, `top`, `bottom`. +* Permite acoplar un elemento hijo en el centro del contenedor. En ese caso, este deberá ser el último hijo del contenedor `` y la propiedad de `stretchLastChild` (de ``) deberá tener el valor `true`. +* Fuerza restricciones de posicionamiento sobre los elementos hijos. +* Redimensiona los elementos hijos en tiempo de ejecucion, cuando estos cambian de tamaño.Resizes its children at runtime when its size changes. + +## Ejemplos + +### Acoplar a cada lado sin estirar el último elemento hijo ```html @@ -20,7 +27,9 @@ El contenedor `DockLayout` provee un mecanismo de acoplamiento para los elemento ``` -#### Acoplar a cada lado estirando el último elemento hijo +### Acoplar a cada lado estirando el último elemento hijo + +El siguiente ejemplo muestra como la propiedad `stretchLastChild` afecta la posicion de los elementos hijos en un contenedor ``. El último elemento (con el la propiedad `dock="bottom"`), es estirado para que ocupe el resto del espacio disponible luego del posicionamiento de los primeros tres elementos. ```html @@ -32,7 +41,25 @@ El contenedor `DockLayout` provee un mecanismo de acoplamiento para los elemento ``` -#### Múltiples elementos hijos en el mismo lado +### Acoplar a ambos lados y al centro + +El siguiente ejemplo crea un contenedor `` de cinco elementos. Los primeros cuatro elementos envuelven al elemento del centro en un cuadro. + +```html + + +``` + + + +### Múltiples elementos hijos en el mismo lado + +El siguiente ejemplo crea una sola línea de posicionamiento, con cuatro elementos que se estiran a lo largo y ancho de la pantalla. ```html diff --git a/content/docs/es/elements/layouts/flexbox-layout.md b/content/docs/es/elements/layouts/flexbox-layout.md index dd2b12df..ff02f827 100644 --- a/content/docs/es/elements/layouts/flexbox-layout.md +++ b/content/docs/es/elements/layouts/flexbox-layout.md @@ -4,11 +4,13 @@ apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_ contributors: [ianaya89] --- -El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) +El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). Este contenedor, permite ubicar elemento hijos de forma horizontal y vertical. -### Ejemplos +## Ejemplos -#### Contenido flexible por defecto +### Contenido flexible por defecto + +El siguiente ejemplo crea una fila de tres elementos (equivalentes en tamaño) que se expanden a lo largo de la pantalla. ```html @@ -19,7 +21,9 @@ El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox ``` -#### Contenido flexible en columnas +### Contenido flexible en columnas + +El siguiente ejemplo crea una columna de tres elementos (equivalentes en tamaño) que se expanden a lo ancho de la pantalla. ```html @@ -30,7 +34,9 @@ El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox ``` -#### Contenido en fila con items alineados con `flex-start` +### Contenido en fila con items alineados con `flex-start` + +El siguiente ejemplo crea una fila de tres elementos ubicados en la parte superior de la pantalla. Los elementos se colocan en órden de declaración. ```html @@ -41,7 +47,9 @@ El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox ``` -#### Contenido en fila con órden personalizado +### Contenido en fila con órden personalizado + +El siguiente ejemplo crea una fila de tres elementos ubicados en la parte superior de la pantalla. Los elementos se colocan con un órden personalizado usando la propiedad `order`. ```html @@ -52,7 +60,9 @@ El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox ``` -#### Contenedor envolvemente +### Contenedor envolventes + +El siguiente ejemplo crea cuatro elementos envolventes. Cuando la fila no tiene espacio suficiente, el contenedor envuelve el ultimo elemento en una nueva línea. ```html @@ -64,11 +74,16 @@ El contenedor `FlexboxLayout` es una implementación (no exacta) de [CSS Flexbox ``` -#### Contenido en columna de forma invertida +### Contenido en columna de forma invertida + +El siguiente ejemplo muestra como usar: + +* `flexDirection` para colocar elementos en una columna, empezando por la parte inferior. +* `justifyContent` para crear espacio equivalente (vertical) entre elementos. +* `alignSelf` para modificar la posición de los elementos en base al eje horizontal. ```html - +