Merge pull request #319 from nativescript-vue/update-spanish-translations

Update Spanish translations

Author: msaelices

Diff for: content/docs/es/elements/action-bar/action-bar.md

@@ -1,11 +1,12 @@
 ---
 title: ActionBar
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
-contributors: [ianaya89]
+contributors: [ianaya89, msaelices]
 ---
 
-El componente ActionBar es una abstraccio4n de NativeScript del `ActionBar` de Android y el `NavigationBar` de iOS.
+`<ActionBar>` es un componente UI que ofrece una barra de herramientas en la parte superior de la ventana. 
 
+El componente ActionBar es una abstraccio4n de NativeScript del `ActionBar` de Android y el `NavigationBar` de iOS.
 
 ---
 
@@ -48,3 +49,9 @@ Tanto en Android como en iOS, un pequeño borde es dibujado en la parte inferior
 | `android.icon` | `String` | El ícono para mostrar en Android.
 | `android.iconVisibility` | `String` | Indica cuando el ícono esta visible o no (solo Android).
 | `flat` | `boolean` | Elimina el borde y el filtro en iOS.<br> Valor por defecto: `false`.
+
+## Componente nativo
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html)	| [`UINavigationBar`](https://developer.apple.com/documentation/uikit/uinavigationbar)

Diff for: content/docs/es/elements/action-bar/action-item.md

@@ -1,14 +1,16 @@
 ---
 title: ActionItem
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
-contributors: [ianaya89]
+contributors: [ianaya89, msaelices]
 ---
 
 El componente ActionItem es utilizado para agregar botones (con acciones) al componente `ActionBar`.
 
 ---
 
-```html
+#### Uso básico
+
+```HTML
 <ActionBar title="My App">
   <ActionItem @tap="onTapShare"
     ios.systemIcon="9" ios.position="left"
@@ -21,9 +23,9 @@ El componente ActionItem es utilizado para agregar botones (con acciones) al com
 
 #### Mostrando elementos con condicionales
 
-Los elementos `ActionItems` pueden ser representados usando condiciones con la directiva `v-show`.
+Los elementos `<ActionItem>` pueden ser representados usando condiciones con la directiva `v-show`.
 
-```html
+```HTML
 <ActionBar title="My App">
   <ActionItem @tap="onTapEdit"
     v-show="!isEditing"
@@ -44,8 +46,8 @@ Los elementos `ActionItems` pueden ser representados usando condiciones con la d
 
 | Nombre | Tipo | Descripcioón |
 |------|------|-------------|
-| `ios.systemIcon` | `String` | Estabelece el ícono para iOS.
-| `android.systemIcon` | `String` | Estabelece ícono para Android.
+| `ios.systemIcon` | `Number` | Obtiene o establece el ícono para iOS. El valor debe ser un número de la [enumeración `UIBarButtonSystemItem`](https://developer.apple.com/documentation/uikit/uibarbuttonitem/systemitem).
+| `android.systemIcon` | `String` | Obtiene o Establece el ícono para Android. El valor debe ser el nombre de un [recurso drawable](https://developer.android.com/guide/topics/resources/drawable-resource)
 | `ios.position` | `String` | Estabelece la posición del item en iOS.<br>Valores posibles:<br>- `left` (valor por defecto): Coloca el item en el lado izquierdo del componente ActionBar.<br>- `right`: Coloca el item en el lado derecho del componente ActionBar.
 | `android.position` | `String` | Estabelece la posición del item en Android.<br>Valores posibles:<br>- `actionBar` (valor por defecto): Coloca el item en el componente `ActionBar`.<br>- `popup`: Coloca el item en el menú de opciones (el item será mostrado como texto)<br>- `actionBarIfRoom`: Coloca el item en el componente `ActionBar`, siempre y cuando haya espacio suficiente. De lo contrario, coloca el item en el menú de opciones.
 
@@ -54,3 +56,9 @@ Los elementos `ActionItems` pueden ser representados usando condiciones con la d
 | Nombre | Descripción |
 |------|-------------|
 | `tap`| Emitido cada vez que el item es presionado.
+
+## Componente nativo
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)

Diff for: content/docs/es/elements/action-bar/navigation-button.md

@@ -1,10 +1,12 @@
 ---
 title: NavigationButton
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
-contributors: [ianaya89]
+contributors: [ianaya89, msaelices]
 ---
 
-El componente NavigationButton es una abstracción de NativeScript para el botón de Navegación de Android y el botón "atrás" de iOS.
+El componente `<NavigationButton>` es una abstracción de NativeScript para el botón de Navegación de Android y el botón `atrás` de iOS.
+
+Extiende al componente [`<ActionItem>`](/es/docs/elements/action-bar/action-item).
 
 ---
 
@@ -28,3 +30,9 @@ El componente NavigationButton es una abstracción de NativeScript para el botó
 | Nombre | Descripción |
 |------|-------------|
 | `tap`| Emitido cada vez que el botón es presionado.
+
+## Componente nativo
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)

Diff for: content/docs/es/elements/components/frame.md

@@ -0,0 +1,69 @@
+---
+title: Frame
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame
+contributors: [msaelices]
+---
+
+`<Frame>` es un componente de UI usado para mostrar elementos [`<Page>`](/es/docs/elements/components/page). Cada app necesita al menos un elemento `<Frame>`, que normalmente se establece como elemento raíz.
+
+---
+
+#### Un único elemento Frame raíz
+
+Si estás migrando desde nativescript 3.x y quieres preservar el antiguo comportamiento, el siguiente fragmento de código en tu fichero de entrada JS creará un elemento raíz de tipo frame y renderizará tu página por defecto.
+
+```js
+new Vue({
+  render: h => h('Frame', [ h(HomePageComponent) ])
+})
+```
+
+#### Múltiples Frames
+
+Si necesitas crear múltiples frames, tienes que encapsularlos en un layout, por ejemplo si quieres tener 2 frames lado a lado
+
+```html
+<GridLayout columns="*, *">
+  <Frame col="0"/>
+  <Frame col="1"/>
+</GridLayout>
+```
+
+#### Un frame con una página por defecto
+
+```html
+<Frame>
+  <Page>
+    <ActionBar title="Default Page Title" />
+    <GridLayout>
+      <Label text="Default Page Content" />
+    </GridLayout>
+  </Page>
+</Frame>
+```
+
+#### Un frame con una página por defecto de un componente externo
+
+```html
+<Frame>
+  <Page>
+    <Home />
+  </Page>
+</Frame>
+```
+
+```js
+import Home from './Home'
+
+export default {
+  components: {
+    Home
+  }
+}
+```
+
+## Componente Nativo
+
+| Android | iOS |
+|---------|-----|
+| [`org.nativescript.widgets.ContentLayout`](https://github.com/NativeScript/tns-core-modules-widgets/blob/master/android/widgets/src/main/java/org/nativescript/widgets/ContentLayout.java) | [`UINavigationController`](https://developer.apple.com/documentation/uikit/uinavigationcontroller)

Diff for: content/docs/es/elements/components/list-view.md

@@ -1,7 +1,7 @@
 ---
 title: ListView
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview
-contributors: [ianaya89]
+contributors: [ianaya89, msaelices]
 ---
 
 `<ListView>` es un componente de UI que muestra elementos en una lista verticalmente desplazable. Para estableceer como la lista muestra cada uno de los elementos puedes usar el componente `<v-template>`.
@@ -43,6 +43,9 @@ Cuando creas condiciones para un `<v-template>`, puedes usar cualquier expresió
 * `$index`&mdash; el índice del elemento actual
 * `$even`&mdash; `true` indica si el índice del elemento actual es par
 * `$odd`&mdash; `true` indica si el índice del elemento actual es impar
+* *`item`*&mdash; el elemento de la lista (el nombre corresponde al iterador en la cláusula `for`). E.g. `if="item.text == 'danger'"`
+
+Sólo las variables anteriormente descritas están disponibles en este ámbito, es decir, que actualmente no tienes acceso al ámbito del componente (estado, propiedades `computed`,...).
 
 ## Una nota importante sobre `v-for`
 

Diff for: content/docs/es/elements/components/page.md

@@ -0,0 +1,73 @@
+---
+title: Page
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_page_.page
+contributors: [msaelices]
+---
+
+`<Page>` es un componente de UI que representa una pantalla de una aplicación. Las apps NativeScript típicamente consisten en una o más `<Page>` que incluyen contenido como un [`<ActionBar>`](/es/docs/elements/action-bar/action-bar) y otros elementos.
+
+---
+
+#### Una página única
+
+```html
+<Page>
+  <ActionBar title="My App" />
+  <GridLayout>
+    <Label text="My Content"/>
+  </GridLayout>
+</Page>
+```
+
+#### Usando el evento `loaded` para disparar cambios en UI
+
+Un escenario típico es realizar cambios en la interfaz después de que la página se ha cargado. La forma recomendada de hacer esto es usando el evento `loaded`, disparado por NativeScript cuando la página está totalmente cargada:
+
+```html
+<Page @loaded="greet">
+  <ActionBar title="My App" />
+  <GridLayout>
+    <Label text="My Content"/>
+  </GridLayout>
+</Page>
+```
+
+```js
+export default {
+  methods: {
+    greet() {
+      alert('Hello!').then(() => {
+        console.log('Dialog closed')
+      })
+    }
+  }
+}
+```
+
+> **NOTA**: Los desarrolladores que vienen de un entorno web generalmente usarían el hook de ciclo de vida `mounted` que Vue proporciona, sin embargo en NativeScript la aplicación, y ciertos elementos podrían no estar cargados aún cuando el hook `mounted` es disparado, de ahí que ciertas acciones como mostrar ventanas de diálogo, navegaciones, etc. no son posible dentro del hook `mounted`. Para solucionar esta limitación, se puede usar el evento `loaded`, el cual sólo se dispara después de que la aplicación está lista. En este caso, estamos usando el evento `loaded` del elemento [`<Page>`](/es/docs/elements/components/page), pero este evento está disponible en todos los elementos NativeScript.
+
+## Props
+
+| Nombre | Tipo | Descripción |
+|--------|------|-------------|
+| `actionBarHidden` | `Boolean` | Muestra u oculta el `<ActionBar>` para la página.<br/>Valor por defecto: `false`.
+| `backgroundSpanUnderStatusBar` | `Boolean` | Obtiene o establece si el fondo de la pantalla  Gets or sets whether the background of the page sitúa también bajo la barra de estado.<br/>Valor por defecto: `false`.
+| `androidStatusBarBackground` | `Color` | (Sólo para Android) Obtiene o establece el color de la barra de estado en dispositivos Android.
+| `enableSwipeBackNavigation` | `Boolean` | (Sólo para iOS) Obtiene o establece si la página puede ser deslizado (swiped) en iOS para volver atrás.<br/>Valor por defecto: `true`.
+| `statusBarStyle` | `String` | Obtiene o establece el estilo de la barra de estado.<br/>Valid values:<br/>`light`,<br/>`dark`.
+
+## Eventos
+
+| Nombre | Descripción |
+|--------|-------------|
+| `loaded` | Emitido después de que la página ha sido cargada.
+| `navigatedFrom` | Emitido después de que la app haya navegado a otra página desde la página actual.
+| `navigatedTo` | Emitido después de que la app haya navegado a la página actual.
+| `navigatingFrom` | Emitido justo antes de que la app haya navegado a otra página desde la página actual.
+| `navigatingTo` | Emitido justo antes de que la app haya navegado a la página actual.
+
+## Componente Nativo
+
+| Android | iOS |
+|---------|-----|
+| [`org.nativescript.widgets.GridLayout`](https://github.com/NativeScript/tns-core-modules-widgets/blob/master/android/widgets/src/main/java/org/nativescript/widgets/GridLayout.java) | [`UIViewController`](https://developer.apple.com/documentation/uikit/uiviewcontroller)

Diff for: content/docs/es/elements/components/placeholder.md

@@ -0,0 +1,39 @@
+---
+title: Placeholder
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_placeholder_.placeholder
+contributors: [msaelices]
+---
+
+El elemento `<Placeholder>` te permite añadir cualquier widget nativo a tu aplicación. Para hacer eso, necesitas añadir un Placeholder donde sea en la jerarquía de tu interfaz y entonces crear y configurar el widget nativo que quieres que aparezca allí. Finalmente, pasa la vista del widget nativo como vista en los argumentos del evento `creatingView`.
+
+---
+
+```html
+<Placeholder @creatingView="creatingView" />
+```
+
+#### Ejemplo con TextView en Android
+
+```js
+methods: {
+  creatingView: function(args) {
+      const nativeView = new android.widget.TextView(args.context);
+      nativeView.setSingleLine(true);
+      nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
+      nativeView.setText("Native View - Android");
+      args.view = nativeView;
+  }
+}
+```
+
+#### Ejemplo con UILabel en iOS
+
+```js
+methods: {
+  creatingView: function(args) {
+      const nativeView = new UILabel();
+      nativeView.text = "Native View - iOS";
+      args.view = nativeView;
+  }
+}
+```

Diff for: content/docs/es/elements/components/tab-view.md

@@ -1,15 +1,15 @@
 ---
 title: TabView
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview
-contributors: [ianaya89]
+contributors: [ianaya89, msaelices]
 ---
 
 `<TabView>` es un componente de navegación que muestra contenido agrupado en pestañas y permite a los usuarios cambiar la pestaña visible.
 
 ---
 
 ```html
-<TabView :selectedIndex="selectedIndex">
+<TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
   <TabViewItem title="Tab 1">
     <Label text="Content for Tab 1" />
   </TabViewItem>
@@ -19,6 +19,15 @@ contributors: [ianaya89]
 </TabView>
 ```
 
+```js
+methods: {
+  indexChange: function(args) {
+      let newIndex = args.value
+      console.log('Current tab index: ' + newIndex)
+  }
+}
+```
+
 **NOTA:** Actualmente, el componente `TabViewItem` espera recibir un solo elemento hijo. En la mayoría de los casos, necesitas envolver tu contenido en un componente contenedor o *layout*.
 
 [> screenshots for=TabView <]
@@ -45,14 +54,15 @@ contributors: [ianaya89]
 | `tabTextColor` | `Color` | (Propiedad de Estilo) Obtiene o establece el color del texto para los títulos de las pestañas.
 | `tabBackgroundColor` | `Color` | (Propiedad de Estilo) Obtiene o establece el color de fondo de las pestañas.
 | `selectedTabTextColor` | `Color` | (Propiedad de Estilo) Obtiene o establece el color del texto de las pestañas.
+| `androidTabsPosition` | `String` | Obtiene o establece la posición del TabView en Android<br/>Valores válidos: `top` o `bottom`.
 
 ## Eventos
 
 | Nombre | Descripción |
 |------|-------------|
 | `selectedIndexChange` | Emitido cada vez que un componente `<TabViewItem>` es presionado.
 
-## Componente Nativo
+## Componente nativo
 
 | Android | iOS |
 |---------|-----|

Diff for: content/docs/es/elements/dialogs/prompt.md

@@ -1,7 +1,7 @@
 ---
 title: PromptDialog
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#prompt
-contributors: [ianaya89]
+contributors: [ianaya89, msaelices]
 ---
 
 El método `prompt()` muestra en pantalla un diálogo que permite al usuario ingresar información en un campo de texto.
@@ -37,7 +37,7 @@ prompt({
 
 ## Configurar el tipo de campo
 
-También puedes configurar que tipo de campo deseas mostrar usando la propiedad `inputType`. Puedes optar entre los valores `text` (valor por defecto), `email` y `password`
+También puedes configurar que tipo de campo deseas mostrar usando la propiedad `inputType`. Puedes optar por texto plano (`text`) que es el valor por defecto, input para correo electrónico (`email`) y input que oculta el texto para constraseñas (`password`).
 
 ```JavaScript
 inputType: dialogs.inputType.text

Diff for: content/docs/es/elements/layouts/absolute-layout.md

@@ -2,11 +2,11 @@
 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]
+contributors: [ianaya89, msaelices]
 ---
 
 
-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.
+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).
 
 El contenedor `<AbsoluteLayout>` es el *layout* más simple de NativeScript
@@ -51,7 +51,7 @@ No tiene propiedades.
 
 ## 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:
 
 | Name | Type | Description |
 |------|------|-------------|