diff --git a/build/index.js b/build/index.js index b2388989..e8a58e85 100644 --- 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 index c497b00b..1c9a0273 100644 --- 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 index 005cc988..9c78b99b 100644 --- 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 new file mode 100644 index 00000000..a5475fd4 --- /dev/null +++ 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 + +``` + +#### Configurando un título con apariencia personalizada + +```html + + + + + +``` + +#### Configurando un ícono de apliación para Android + +```html + +``` + +#### 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 + +``` + +## 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.
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 new file mode 100644 index 00000000..99b0ddbf --- /dev/null +++ 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 + + + + +``` + +#### Mostrando items con condicionales + +Los elementos `ActionItems` pueden ser represantados usando condiciones con la directiva `v-show`. + +```html + + + + + +``` + +## 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.
Valores posibles:
- `left` (valor por defecto): Coloca el item en el lado izquierdo del componente ActionBar.
- `right`: Coloca el item en el lado derecho del componente ActionBar. +| `android.position` | `String` | Estabelece la posición del item en Android.
Valores posibles:
- `actionBar` (valor por defecto): Coloca el item en el componente `ActionBar`.
- `popup`: Coloca el item en el menú de opciones (el item será mostrado como texto)
- `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 new file mode 100644 index 00000000..fe1f2f23 --- /dev/null +++ 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 + + + +``` + +## 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 new file mode 100644 index 00000000..964b46a6 --- /dev/null +++ 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] +--- + +`` 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 + +``` + +[> 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) \ No newline at end of file diff --git a/content/docs/es/elements/components/button.md b/content/docs/es/elements/components/button.md new file mode 100644 index 00000000..2a2bdd12 --- /dev/null +++ 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] +--- + +` +``` + +## Vuex + +Vuex es una libreria que se encarga de resolver el patron de manejo de estado, que básicamente sirve como un almacenamiento centralizado para todo los componentes de nuestra aplicación e implementa reglas para asegurarse que el estado (la información) se modifique de una manera predecible. + + +### Instalar el plugin + + +Intala Vuex de la misma forma que lo harias en cualquier aplicación de Vue.js usando npm: + +```shell +$ npm install --save vuex +``` + +### Importar el plugin + +Abre el archivo principal de tu aplicación (*entry file*, comunmente llamado `app.js` o `main.js`) y luego agrega las siguientes lineas al comienzo del archivo: + +```js +import Vuex from 'vuex' +Vue.use(Vuex) +``` + +Una vez que hayas hecho esto, vas a poder disponer de Vuex para manejar el estado de tu aplicación móvil de forma muy similar a la implementada en tus aplicaciones web basadas en Vue. + +### Uso: Crear el *store* + +Necesitas crear una nueva constante que representa al estado e invoca las llamadas a la API de Vuex. Puedes hacer esto en el archivo de entrada de tu aplicación (luego de la declaración de la instancia de Vue) o en un nuevo directorio (generalmente llamado `/store`). + +En el siguiente ejemplo, la constante `store`, incluye el estado de un contador y registra sus mutaciones: + +```js +const store = new Vuex.Store({ + state: { + count: 0 + }, + mutations: { + increment: state => state.count++, + decrement: state => state.count-- + } +}) +``` + +### Uso: Usar el *store* + +Ahora puedes manejar el estado de la aplicación, llamando al *store* que acabas de crear. En el siguiente ejemplo, la app registra los cambios de la propiedad `count` a medida que presionamos los botons `+` o `-`. Ten en cuenta que no esta cambiando el estado de forma directa, sino con llamadas a las *mutations* que permiten incrementar/decrementar el valor de `count`. + +```javascript +new Vue({ + computed: { + count(){ + return store.state.count + } + }, + + template: ` + + + + + + + ` +}; +``` + +--- +Define la página `Detail` con un `NavigationButton`. Recuerda que en iOS, este botón te direcciona a la página anterior (de la pila de navegación). En cambio en Android necesitas agregar manualmente un evento `tap` para conseguir el mismo comportamiento: `@tap="$router.back()"` + +Dentro de `Detail`, puedes utilizar el parametro de tipo *query* llamado `user` que definiste en la página `Master`. Por ejemplo, se puede visualizar ese valor como texto dentro de un componente `Label`: `