nativescript-vue · rigor789 · Aug 1, 2018 · Jul 22, 2018 · Jul 22, 2018 · Jul 22, 2018
diff --git a/build/index.js b/build/index.js
@@ -40,6 +40,7 @@ Metalsmith(cwd)
     moment,
     localeMap: {
       'en': 'English',
+      'es': 'Español',
       'ko': '한국어',
       'pt-BR': 'Português do Brasil',
       'ru': 'Русский'
@@ -115,7 +116,7 @@ Metalsmith(cwd)
   })
   .use(locales({
     defaultLocale: 'en',
-    locales: ['en', 'ko', 'pt-BR', 'ru']
+    locales: ['en', 'es', 'ko', 'pt-BR', 'ru']
   }))
   .use(versions({
     versions: [

diff --git a/build/plugins/order.js b/build/plugins/order.js
@@ -13,7 +13,6 @@ function plugin() {
       if (res) {
         const data = files[file];
         data.order = res[1];
-
         data.slug = data.slug.replace(res[0], '');
 
         // rename file to not include the order

diff --git a/content/docs/en/elements/dialogs/action.md b/content/docs/en/elements/dialogs/action.md
@@ -1,6 +1,6 @@
 ---
 title: ActionDialog
-apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action 
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action
 contributors: [MisterBrownRSA, rigor789, ikoevska]
 ---
 

diff --git a/content/docs/es/elements/action-bar/action-bar.md b/content/docs/es/elements/action-bar/action-bar.md
@@ -0,0 +1,50 @@
+---
+title: ActionBar
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
+contributors: [ianaya89]
+---
+
+El componente ActionBar es una abstraccio4n de NativeScript del `ActionBar` de Android y el `NavigationBar` de iOS.
+
+
+---
+
+#### Configurando un título
+
+```html
+<ActionBar title="MyApp" />
+```
+
+#### Configurando un título con apariencia personalizada
+
+```html
+<ActionBar>
+  <StackLayout orientation="horizontal">
+    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
+    <Label text="ativeScript" fontSize="24" verticalAlignment="center" />
+  </StackLayout>
+</ActionBar>
+```
+
+#### Configurando un ícono de apliación para Android
+
+```html
+<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
+```
+
+#### Removiendo el borde
+
+Tanto en Android como en iOS, un pequeño borde es dibujado en la parte inferior del componente `ActionBar`. Además, el color de fondo del `ActionBar` de iOS is levemente diferente al que uno especifíca ya que iOS aplica un filtro. Para remover este filtro y el borde, puedes usar el atributo `flat` con el valor `true`.
+
+```html
+<ActionBar title="My App" flat="true" />
+```
+
+## Propiedades
+
+| Nombre | Tipo | Descripción |
+|------|------|-------------|
+| `title` | `String` | El título que se desea mostrar.
+| `android.icon` | `String` | El ícono para mostrar en Android.
+| `android.iconVisibility` | `String` | Indica cuando el ícono esta visible o no (solo Android).
+| `flat` | `boolean` | Remueve el borde y el filtro en iOS.<br> Valor por defecto: `false`.
diff --git a/content/docs/es/elements/action-bar/action-item.md b/content/docs/es/elements/action-bar/action-item.md
@@ -0,0 +1,56 @@
+---
+title: ActionItem
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
+contributors: [ianaya89]
+---
+
+El componente ActionItem es utilizado para agregar botones (con acciones) al componente `ActionBar`.
+
+---
+
+```html
+<ActionBar title="My App">
+  <ActionItem @tap="onTapShare"
+    ios.systemIcon="9" ios.position="left"
+    android.systemIcon="ic_menu_share" android.position="actionBar" />
+  <ActionItem @tap="onTapDelete"
+    ios.systemIcon="16" ios.position="right"
+    text="delete" android.position="popup" />
+</ActionBar>
+```
+
+#### Mostrando items con condicionales
+
+Los elementos `ActionItems` pueden ser represantados usando condiciones con la directiva `v-show`.
+
+```html
+<ActionBar title="My App">
+  <ActionItem @tap="onTapEdit"
+    v-show="!isEditing"
+    ios.systemIcon="2" ios.position="right"
+    android.systemIcon="ic_menu_edit" />
+  <ActionItem @tap="onTapSave"
+    v-show="isEditing"
+    ios.systemIcon="3" ios.position="right"
+    android.systemIcon="ic_menu_save" />
+  <ActionItem @tap="onTapCancel"
+    v-show="isEditing"
+    ios.systemIcon="1"
+    android.systemIcon="ic_menu_close_clear_cancel" />
+</ActionBar>
+```
+
+## Propiedades
+
+| Nombre | Tipo | Descripcioón |
+|------|------|-------------|
+| `ios.systemIcon` | `String` | Estabelece el ícono para iOS.
+| `android.systemIcon` | `String` | Estabelece ícono para Android.
+| `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.
+
+## Eventos
+
+| Nombre | Descripción |
+|------|-------------|
+| `tap`| Emitido cada vez que el item es presionado.
diff --git a/content/docs/es/elements/action-bar/navigation-button.md b/content/docs/es/elements/action-bar/navigation-button.md
@@ -0,0 +1,30 @@
+---
+title: NavigationButton
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
+contributors: [ianaya89]
+---
+
+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.
+
+---
+
+```html
+<ActionBar title="My App">
+  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
+</ActionBar>
+```
+
+## Propiedades
+
+| Nombre | Tipo | Descripción |
+|------|------|-------------|
+| `text` | `String` | Establece el texto que se mostrará en iOS.
+| `android.systemIcon` | `String` | Establece el ícono que se mostrará en Android.
+
+**La lista de posibles íconos para Android se puede encontrar en este [link](https://developer.android.com/reference/android/R.drawable.html), los íconos son aquellos que comienzan con el prefijo `ic_`.**
+
+## Eventos
+
+| Nombre | Descripción |
+|------|-------------|
+| `tap`| Emitido cada vez que el botón es presionado.
diff --git a/content/docs/es/elements/components/activity-indicator.md b/content/docs/es/elements/components/activity-indicator.md
@@ -0,0 +1,33 @@
+---
+title: ActivityIndicator
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
+contributors: [ianaya89]
+---
+
+`<ActivityIndicator>` es un componente de UI que muestra un indicador de progreso. Este componente permite señalar al usuario el estado de una operación que se ejecuta en segundo plano.
+
+---
+
+```html
+<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
+```
+
+[> screenshots for=ActivityIndicator <]
+
+## Propiedades
+
+| Nombre | Tipo | Descripción |
+|------|------|-------------|
+| `busy` | `Boolean` | Obtiene o establece si el indicador esta activo o no. El valor `true`, indica que esta activo.
+
+## Eventos
+
+| Nombre | Descripción |
+|------|-------------|
+| `busyChange`| Emitido cada vez que la propiedad `busy` cambia de valor.
+
+## Componente nativo
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.ProgressBar` (indeterminate = true)](https://developer.android.com/reference/android/widget/ProgressBar.html)	| [`UIActivityIndicatorView`](https://developer.apple.com/documentation/uikit/uiactivityindicatorview)
diff --git a/content/docs/es/elements/components/button.md b/content/docs/es/elements/components/button.md
@@ -0,0 +1,36 @@
+---
+title: Button
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
+contributors: [ianaya89]
+---
+
+`<Button>` es un componente de UI que muestra un botón, el cual puede reaccionar ante un gesto del usuario.
+
+Para más informacion sobre los gestos disponibles, puedes ver [la documentación oficial de NativeScript](https://docs.nativescript.org/ui/gestures).
+
+---
+
+```html
+<Button text="Button" @tap="onButtonTap" />
+```
+
+[> screenshots for=Button <]
+
+## Propiedades
+
+| Nombre | Tipo | Descripción |
+|------|------|-------------|
+| `text` | `String` | Obtiene o establece el texto del botón.
+| `textWrap` | `Boolean` | Obtiene o establece cuando el texto se ajusta o no al elemento que lo contiene.<br>Valor por defecto: `false`.
+
+## Eventos
+
+| Nombre | Descripción |
+|------|-------------|
+| `tap` | Emitido cada vez que el botón es presionado.
+
+## Componente nativo
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html) | [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton)
diff --git a/content/docs/es/elements/components/date-picker.md b/content/docs/es/elements/components/date-picker.md
@@ -0,0 +1,46 @@
+---
+title: DatePicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
+contributors: [ianaya89]
+---
+
+`<DatePicker>` es un componente de UI que permite al usuario seleccionar una fecha a partir de un rango pre-configurado.
+
+> Puedes ver también: [TimePicker](/en/docs/elements/components/time-picker).
+
+---
+
+```html
+<DatePicker @loaded="onDatePickerLoaded" @dateChange="onDateChanged" />
+```
+
+`<DatePicker>` provee enlace de datos bidireccional (*two-way data binding*) usando `v-model`.
+
+```html
+<DatePicker v-model="selectedDate" />
+```
+
+[> screenshots for=DatePicker <]
+
+## Propiedades
+
+| Nombre | Tipo | Descripción |
+|------|------|-------------|
+| `date` | `Date` | Obtiene o establece la fecha completa.
+| `minDate` | `Date` | Obtiene o establece la mínima fecha posible para seleccionar.
+| `maxDate` | `Date` | Obtiene o establece la máxima fecha posible para seleccionar.
+| `day` | `Number` | Obtiene o establece el día de la fecha.
+| `month` | `Number` | Obtiene o establece el mes de la fecha.
+| `year` | `Number` | Obtiene o establece el año de la fecha.
+
+## Eventos
+
+| Nombre | Descripción |
+|------|-------------|
+| `dateChange` | Emitido cada vez que la fecha seleccionada cambia.
+
+## Componente nativo
+
+| Android |	iOS |
+|---------|-----|
+| [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html) | [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker)
diff --git a/content/docs/es/elements/components/html-view.md b/content/docs/es/elements/components/html-view.md
@@ -0,0 +1,29 @@
+---
+title: HtmlView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview
+contributors: [ianaya89]
+---
+
+`<HtmlView>` es un component de UI que permite mostrar contenido HTML estático.
+
+Puedes ver también: [WebView](/en/docs/elements/components/web-view).
+
+---
+
+```html
+<HtmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+[> screenshots for=HtmlView <]
+
+## Props
+
+| Nombre | Tipo | Descripción |
+|------|------|-------------|
+| `html` | `String` | El contenido HTML que deseas mostrar.
+
+## Componente native
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview)
diff --git a/content/docs/es/elements/components/image.md b/content/docs/es/elements/components/image.md
@@ -0,0 +1,51 @@
+---
+title: Image
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_image_.image
+contributors: [ianaya89]
+---
+
+`<Image>` es un componente de UI que permite mostrar una imágen a partir de un [ImageSource](https://docs.nativescript.org/api-reference/modules/_image_source_) o de una URL.
+
+---
+
+#### Mostrando una imágen relativa al directorio de la aplicación
+
+```html
+<Image src="~/logo.png" stretch="none" />
+```
+
+#### Mostrando una imágen desde una URL
+
+```html
+<Image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />
+```
+
+#### Mostrando una imágen desde `App_Resources`
+
+```html
+<Image src="res://icon" stretch="none" />
+```
+
+#### Mostrando una imágen en formato `base64`
+
+```html
+<Image src="data:Image/png;base64,iVBORw..." stretch="none" />
+```
+
+[> screenshots for=Image <]
+
+## Propiedades
+
+| Nombre | Tipo | Descripcioón |
+|------|------|-------------|
+| `src` | `String` o [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | Obtiene o establece el origen de una imágen, sea como URL o *ImageSource*
+|`imageSource` | [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | Obtiene o establece el *ImageSource* de una imágen.
+| `tintColor` | `Color` | (Style property) Establece un color para teñir la imágen.
+| `stretch` | `Stretch` | (Style property) Obtiene o establece la forma en la que la imágen se acomoda para rellenar el elemento que la contiene. <br/>Posibles valores: `none`, `aspectFill`, `aspectFit`, o `fill`.<br/>Para mas información, puedes ver [Stretch](https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch).
+| `loadMode` | | Obtiene o establece la estrategia de carga para imágenes en el sistema de archivos local.<br/>Posibles valores: `sync` o `async`.<br/>Valor por defecto: `async`.<br/>Para mas información, puedes ver [loadMode](https://docs.nativescript.org/api-reference/classes/_ui_image_.image#loadmode).
+
+## Componente nativo
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.ImageView`](https://developer.android.com/reference/android/widget/ImageView.html) | [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview)