From c179bbf0eb50d380e9c6986b30a0bb00a8ff2755 Mon Sep 17 00:00:00 2001 From: Manuel Saelices Date: Thu, 12 Dec 2019 14:08:01 +0100 Subject: [PATCH 1/8] Update Spanish translations for the elements section --- .../docs/es/elements/action-bar/action-bar.md | 11 +++++++++-- .../docs/es/elements/action-bar/action-item.md | 16 ++++++++++++---- .../es/elements/action-bar/navigation-button.md | 12 ++++++++++-- content/docs/es/elements/components/list-view.md | 5 ++++- content/docs/es/elements/components/tab-view.md | 16 +++++++++++++--- content/docs/es/elements/dialogs/prompt.md | 4 ++-- .../docs/es/elements/layouts/absolute-layout.md | 6 +++--- content/docs/es/elements/layouts/dock-layout.md | 2 +- .../docs/es/elements/layouts/flexbox-layout.md | 6 +++--- content/docs/es/elements/layouts/grid-layout.md | 2 +- content/docs/es/elements/layouts/stack-layout.md | 2 +- content/docs/es/elements/layouts/wrap-layout.md | 2 +- 12 files changed, 60 insertions(+), 24 deletions(-) diff --git a/content/docs/es/elements/action-bar/action-bar.md b/content/docs/es/elements/action-bar/action-bar.md index f77484ff..2d3b4a34 100644 --- a/content/docs/es/elements/action-bar/action-bar.md +++ b/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. +`` 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.
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 --git a/content/docs/es/elements/action-bar/action-item.md b/content/docs/es/elements/action-bar/action-item.md index e057056d..27f81da6 100644 --- a/content/docs/es/elements/action-bar/action-item.md +++ b/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 ` pueden ser representados usando condiciones con la directiva `v-show`. -```html +```HTML ` 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 [``](/en/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 --git a/content/docs/es/elements/components/list-view.md b/content/docs/es/elements/components/list-view.md index aacb3834..898a44ea 100644 --- a/content/docs/es/elements/components/list-view.md +++ b/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] --- `` 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 ``. @@ -43,6 +43,9 @@ Cuando creas condiciones para un ``, puedes usar cualquier expresió * `$index`— el índice del elemento actual * `$even`— `true` indica si el índice del elemento actual es par * `$odd`— `true` indica si el índice del elemento actual es impar +* *`item`*— 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 --git a/content/docs/es/elements/components/tab-view.md b/content/docs/es/elements/components/tab-view.md index 55e1bb52..d0624501 100644 --- a/content/docs/es/elements/components/tab-view.md +++ b/content/docs/es/elements/components/tab-view.md @@ -1,7 +1,7 @@ --- title: TabView apiRef: https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview -contributors: [ianaya89] +contributors: [ianaya89, msaelices] --- `` es un componente de navegación que muestra contenido agrupado en pestañas y permite a los usuarios cambiar la pestaña visible. @@ -9,7 +9,7 @@ contributors: [ianaya89] --- ```html - + @@ -19,6 +19,15 @@ contributors: [ianaya89] ``` +```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,6 +54,7 @@ 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
Valores válidos: `top` o `bottom`. ## Eventos @@ -52,7 +62,7 @@ contributors: [ianaya89] |------|-------------| | `selectedIndexChange` | Emitido cada vez que un componente `` es presionado. -## Componente Nativo +## Componente nativo | Android | iOS | |---------|-----| diff --git a/content/docs/es/elements/dialogs/prompt.md b/content/docs/es/elements/dialogs/prompt.md index d39e6ab4..a8b56131 100644 --- a/content/docs/es/elements/dialogs/prompt.md +++ b/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 --git a/content/docs/es/elements/layouts/absolute-layout.md b/content/docs/es/elements/layouts/absolute-layout.md index 79a83c52..46e2f3e3 100644 --- a/content/docs/es/elements/layouts/absolute-layout.md +++ b/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 `` 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 `` 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 ``, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: | Name | Type | Description | |------|------|-------------| diff --git a/content/docs/es/elements/layouts/dock-layout.md b/content/docs/es/elements/layouts/dock-layout.md index 9b052fd8..38adc0d9 100644 --- a/content/docs/es/elements/layouts/dock-layout.md +++ b/content/docs/es/elements/layouts/dock-layout.md @@ -4,7 +4,7 @@ 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 que permite ubicarlos a los costados o en el centro del contenedor. +El contenedor `` provee un mecanismo de acoplamiento para los elementos hijos que permite ubicarlos a los costados o en el centro del contenedor. `` se comporta de la siguiente forma: diff --git a/content/docs/es/elements/layouts/flexbox-layout.md b/content/docs/es/elements/layouts/flexbox-layout.md index ff02f827..a1e530e2 100644 --- a/content/docs/es/elements/layouts/flexbox-layout.md +++ b/content/docs/es/elements/layouts/flexbox-layout.md @@ -1,10 +1,10 @@ --- title: FlexboxLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_ -contributors: [ianaya89] +contributors: [ianaya89, msaelices] --- -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. +El contenedor `` 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 @@ -104,7 +104,7 @@ El siguiente ejemplo muestra como usar: ## Propiedades de elementos hijos -Cuando un elemento es hijo directo de `FlexboxLayout`, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: +Cuando un elemento es hijo directo de ``, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: | Nombre | Tipo | Descripción | |------|------|-------------| diff --git a/content/docs/es/elements/layouts/grid-layout.md b/content/docs/es/elements/layouts/grid-layout.md index 8d857aaf..993761c5 100644 --- a/content/docs/es/elements/layouts/grid-layout.md +++ b/content/docs/es/elements/layouts/grid-layout.md @@ -86,7 +86,7 @@ El siguiente ejemplo crea una grilla *responsive* con compleja con ancho y altos ## Propiedades de elementos hijos -Cuando un elemento es hijo directo de `GridLayout`, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: +Cuando un elemento es hijo directo de ``, las siguientes propiedades pueden ser utilizadas en ese elemento hijo: | Nombre | Tipo | Descripción | |------|------|-------------| diff --git a/content/docs/es/elements/layouts/stack-layout.md b/content/docs/es/elements/layouts/stack-layout.md index f85eb51c..4a6832e6 100644 --- a/content/docs/es/elements/layouts/stack-layout.md +++ b/content/docs/es/elements/layouts/stack-layout.md @@ -4,7 +4,7 @@ apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_la contributors: [ianaya89] --- -El contenedor `StackLayout` apila los elementos hijos de forma vertical (comportamiento por defecto) u horizontal. +El contenedor `` apila los elementos hijos de forma vertical (comportamiento por defecto) u horizontal. ## Ejemplos diff --git a/content/docs/es/elements/layouts/wrap-layout.md b/content/docs/es/elements/layouts/wrap-layout.md index 1427dc26..2ab23dda 100644 --- a/content/docs/es/elements/layouts/wrap-layout.md +++ b/content/docs/es/elements/layouts/wrap-layout.md @@ -4,7 +4,7 @@ apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_lay contributors: [ianaya89] --- -El contenedor `WrapLayout` permite posicionar los elementos hijos en filas o columnas, usando una propiedad de orientación. El contenedor coloca los elementos hasta que el espacio este totalmente ocupado y luego envuelve los elementos restantes en una nueva fila o columna. +El contenedor `` permite posicionar los elementos hijos en filas o columnas, usando una propiedad de orientación. El contenedor coloca los elementos hasta que el espacio este totalmente ocupado y luego envuelve los elementos restantes en una nueva fila o columna. ## Ejemplos From 9bfb09a307be8b4fedd2a3fd5b5135a85fad5311 Mon Sep 17 00:00:00 2001 From: Manuel Saelices Date: Thu, 12 Dec 2019 20:24:40 +0100 Subject: [PATCH 2/8] Update Spanish translations for the getting-started section --- .../docs/es/getting-started/1-quick-start.md | 44 +- .../getting-started/2-playground-tutorial.md | 562 ++++++++++-------- .../docs/es/getting-started/3-installation.md | 4 +- .../docs/es/getting-started/4-templates.md | 69 --- .../es/getting-started/4-upgrade-guide.md | 198 ++++++ .../docs/es/getting-started/5-vue-devtools.md | 74 +++ ...t-plugins.md => 6-nativescript-plugins.md} | 0 .../{6-vue-plugins.md => 7-vue-plugins.md} | 0 .../docs/es/getting-started/8-code-sharing.md | 153 +++++ 9 files changed, 768 insertions(+), 336 deletions(-) delete mode 100644 content/docs/es/getting-started/4-templates.md create mode 100644 content/docs/es/getting-started/4-upgrade-guide.md create mode 100644 content/docs/es/getting-started/5-vue-devtools.md rename content/docs/es/getting-started/{5-nativescript-plugins.md => 6-nativescript-plugins.md} (100%) rename content/docs/es/getting-started/{6-vue-plugins.md => 7-vue-plugins.md} (100%) create mode 100644 content/docs/es/getting-started/8-code-sharing.md diff --git a/content/docs/es/getting-started/1-quick-start.md b/content/docs/es/getting-started/1-quick-start.md index f2703d21..1befc523 100644 --- a/content/docs/es/getting-started/1-quick-start.md +++ b/content/docs/es/getting-started/1-quick-start.md @@ -1,34 +1,42 @@ --- title: Guia Rápida -contributors: [ianaya89] +contributors: [ianaya89, msaelices] --- Si no deseas lidiar con la instalación y configuración antes de poder probar NativeScript-Vue, puedes hechar un vistazo a [NativeScript Playground](/es/docs/getting-started/playground-tutorial), una herramienta *online* que te permite dar tus primeros pasos con el framework. -Para preparar tu ambiente local e instalar todo lo necesario para poder usar NativeScript, puedes seguir las instrucciones de [esta guia](https://docs.nativescript.org/angular/start/quick-setup). +Para preparar tu ambiente local e instalar todo lo necesario para poder usar NativeScript, puedes seguir las instrucciones de [esta guia](/es/docs/getting-started/installation). -Si ya cuentas con tu ambiente local listo para desarrollo nativo, puedes comenzar con este *template*: +**Funcionalidades soportadas** -```shell -$ npm i -g @vue/cli @vue/cli-init -$ vue init nativescript-vue/vue-cli-template -$ cd -$ npm i -``` +- Soporte para ficheros `.vue` +- Gestor de estados Vuex (opcional) +- Temas NativeScript +- Application presets + +> **Note**: Si eliges instalar las DevTools, no podrás usar `tns preview`, ya que la app de Preview no soporta uno de los plugins usados por las DevTools. -Luego, puedes iniciar tu aplicación escribiendo este comando: +Si [ya cuentas con tu ambiente local listo para desarrollo nativo](/es/docs/getting-started/installation), puedes comenzar con la [vue-cli-template](https://github.com/nativescript-vue/vue-cli-template): ```shell -$ npm run watch: +$ npm install -g @vue/cli @vue/cli-init +$ vue init nativescript-vue/vue-cli-template +$ cd +$ +$ npm install +$ # or +$ yarn install +$ +$ tns preview +$ # or +$ tns run ``` -> *plataforma* acepta los valores `ios` o `android`. - Esta serie de comandos ejecutan las siguientes operaciones en tu ambiente de desarrollo: - 1. Instala el [CLI de Vue](https://github.com/vuejs/vue-cli). Esto permite que puedas utilizar ambos CLI en tu sistema (el de Vue y el de NativeScript). Puedes evitar este proceso si ya tienes instalado el CLI. -1. El CLI, Obtiene de GitHub los templates necesarios y luego crea el proyecto de forma local. El template utilizado, [nativescript-vue/vue-cli-template](https://github.com/nativescript-vue/vue-cli-template), esta basado en archivos `.vue` y contiene por defecto, *routing* ([vue-router](https://router.vuejs.org/)) y manejo de estado ([Vuex](https://vuex.vuejs.org/)). En [este](/es/docs/getting-started/templates) link puedes encontrar más información sobre los templates disponibles. -1. Posicionas la terminal en el directorio donde se encuentra el nuevo proyecto (creado anteriormente). -1. Instala todas las dependencias de npm locales. -1. Compila e inicia el proyecto en cualquier dispositivo (compatible) conectado a tu computadora o en el emulador/simulador de la plataforma seleccionada. La opcion `watch` sirve para detectar cambios en el código y aplicarlos de forma automática. +2. El CLI, Obtiene de GitHub los templates necesarios y luego crea el proyecto de forma local. El template utilizado, [nativescript-vue/vue-cli-template](https://github.com/nativescript-vue/vue-cli-template), esta basado en archivos `.vue` y contiene por defecto, *routing* ([vue-router](https://router.vuejs.org/)) y manejo de estado ([Vuex](https://vuex.vuejs.org/)). En [este](/es/docs/getting-started/templates) link puedes encontrar más información sobre los templates disponibles. +3. Posicionas la terminal en el directorio donde se encuentra el nuevo proyecto (creado anteriormente). +4. Instala todas las dependencias de npm locales. +5. Si ejecutaste `tns preview`, genera un código QR que puede usarse para visualizar la App en el dispositivo. +6. Si ejecutaste `tns run`, construye y ejecuta el proyecto en todos los dispositivos conectados o en emuladores nativos. diff --git a/content/docs/es/getting-started/2-playground-tutorial.md b/content/docs/es/getting-started/2-playground-tutorial.md index d8ad7866..b8f33639 100644 --- a/content/docs/es/getting-started/2-playground-tutorial.md +++ b/content/docs/es/getting-started/2-playground-tutorial.md @@ -1,6 +1,6 @@ --- title: Playground Tutorial -contributors: [ianaya89] +contributors: [ianaya89, msaelices] --- El [NativeScript Playground](https://play.nativescript.org?template=play-vue) es un lugar en la nube donde puedas dar tus primeros pasos con **NativeScript-Vue** desde tu navegador. Simplemente ingresa al link y comienza arrastrar y soltar componentes. @@ -137,35 +137,52 @@ Comunmente, luego del elemento ``, vas a colocar componentes de neveg Usa el componente `` para crear una aplicación con dos pestañas -1. Remueve el componente `` con todo su contenido creado por defecto
Los componentes `` también son elementos de primer nivel utilizados para contenido desplazable. +1. Cambia el título del `` para reflejar el propósito de la aplicación. +1. Borra el componente `` con todo su contenido creado por defecto
Los componentes `` también son elementos de primer nivel utilizados para contenido desplazable. 1. Arrastra y suelta el componente `` donde lo quieras ubicar.
Ten en cuenta que el Playground no aplica formato de código automáticamente al insertar nuevos componentes. 1. Configura el alto (*height*) del elemento `` para rellenar toda la pantalla (`100%`).
En dispositivos iOS, el alto por defecto causa que las pestañas se muestren en el medio de la pantalla. 1. Cambia los títulos de los elementos `` y su contenido, para que reflejen el propósito de los mismos.
En este punto, el contenido de texto de las pestañas es mostrado en elementos `