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..db7e6b4d 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 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. @@ -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 --git a/content/docs/es/elements/action-bar/navigation-button.md b/content/docs/es/elements/action-bar/navigation-button.md index 855a23fb..07b9687a 100644 --- a/content/docs/es/elements/action-bar/navigation-button.md +++ b/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 `` 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 [``](/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 --git a/content/docs/es/elements/components/frame.md b/content/docs/es/elements/components/frame.md new file mode 100644 index 00000000..d06b43fc --- /dev/null +++ b/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] +--- + +`` es un componente de UI usado para mostrar elementos [``](/es/docs/elements/components/page). Cada app necesita al menos un elemento ``, 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 + + + + +``` + +#### Un frame con una página por defecto + +```html + + + + + + + +``` + +#### Un frame con una página por defecto de un componente externo + +```html + + + + + +``` + +```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 --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/page.md b/content/docs/es/elements/components/page.md new file mode 100644 index 00000000..16795a0b --- /dev/null +++ b/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] +--- + +`` es un componente de UI que representa una pantalla de una aplicación. Las apps NativeScript típicamente consisten en una o más `` que incluyen contenido como un [``](/es/docs/elements/action-bar/action-bar) y otros elementos. + +--- + +#### Una página única + +```html + + + + + +``` + +#### 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 + + + + + +``` + +```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 [``](/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 `` para la página.
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.
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.
Valor por defecto: `true`. +| `statusBarStyle` | `String` | Obtiene o establece el estilo de la barra de estado.
Valid values:
`light`,
`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 --git a/content/docs/es/elements/components/placeholder.md b/content/docs/es/elements/components/placeholder.md new file mode 100644 index 00000000..a984535a --- /dev/null +++ b/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 `` 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 + +``` + +#### 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 --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 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 `