Skip to content

Commit 17f0c49

Browse files
msaelicesmsaelices
authored
Merge pull request #319 from nativescript-vue/update-spanish-translations
Update Spanish translations
2 parents 46e52fc + deb0fb1 commit 17f0c49

25 files changed

+1133
-385
lines changed

‎content/docs/es/elements/action-bar/action-bar.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
---
22
title: ActionBar
33
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
4-
contributors: [ianaya89]
4+
contributors: [ianaya89, msaelices]
55
---
66

7-
El componente ActionBar es una abstraccio4n de NativeScript del `ActionBar` de Android y el `NavigationBar` de iOS.
7+
`<ActionBar>` es un componente UI que ofrece una barra de herramientas en la parte superior de la ventana.
88

9+
El componente ActionBar es una abstraccio4n de NativeScript del `ActionBar` de Android y el `NavigationBar` de iOS.
910

1011
---
1112

@@ -48,3 +49,9 @@ Tanto en Android como en iOS, un pequeño borde es dibujado en la parte inferior
4849
| `android.icon` | `String` | El ícono para mostrar en Android.
4950
| `android.iconVisibility` | `String` | Indica cuando el ícono esta visible o no (solo Android).
5051
| `flat` | `boolean` | Elimina el borde y el filtro en iOS.<br> Valor por defecto: `false`.
52+
53+
## Componente nativo
54+
55+
| Android | iOS |
56+
|---------|-----|
57+
| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationBar`](https://developer.apple.com/documentation/uikit/uinavigationbar)

‎content/docs/es/elements/action-bar/action-item.md‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
---
22
title: ActionItem
33
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
4-
contributors: [ianaya89]
4+
contributors: [ianaya89, msaelices]
55
---
66

77
El componente ActionItem es utilizado para agregar botones (con acciones) al componente `ActionBar`.
88

99
---
1010

11-
```html
11+
#### Uso básico
12+
13+
```HTML
1214
<ActionBar title="My App">
1315
<ActionItem @tap="onTapShare"
1416
ios.systemIcon="9" ios.position="left"
@@ -21,9 +23,9 @@ El componente ActionItem es utilizado para agregar botones (con acciones) al com
2123

2224
#### Mostrando elementos con condicionales
2325

24-
Los elementos `ActionItems` pueden ser representados usando condiciones con la directiva `v-show`.
26+
Los elementos `<ActionItem>` pueden ser representados usando condiciones con la directiva `v-show`.
2527

26-
```html
28+
```HTML
2729
<ActionBar title="My App">
2830
<ActionItem @tap="onTapEdit"
2931
v-show="!isEditing"
@@ -44,8 +46,8 @@ Los elementos `ActionItems` pueden ser representados usando condiciones con la d
4446

4547
| Nombre | Tipo | Descripcioón |
4648
|------|------|-------------|
47-
| `ios.systemIcon` | `String` | Estabelece el ícono para iOS.
48-
| `android.systemIcon` | `String` | Estabelece ícono para Android.
49+
| `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).
50+
| `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)
4951
| `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.
5052
| `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.
5153

@@ -54,3 +56,9 @@ Los elementos `ActionItems` pueden ser representados usando condiciones con la d
5456
| Nombre | Descripción |
5557
|------|-------------|
5658
| `tap`| Emitido cada vez que el item es presionado.
59+
60+
## Componente nativo
61+
62+
| Android | iOS |
63+
|---------|-----|
64+
| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)

‎content/docs/es/elements/action-bar/navigation-button.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
---
22
title: NavigationButton
33
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
4-
contributors: [ianaya89]
4+
contributors: [ianaya89, msaelices]
55
---
66

7-
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.
7+
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.
8+
9+
Extiende al componente [`<ActionItem>`](/es/docs/elements/action-bar/action-item).
810

911
---
1012

@@ -28,3 +30,9 @@ El componente NavigationButton es una abstracción de NativeScript para el botó
2830
| Nombre | Descripción |
2931
|------|-------------|
3032
| `tap`| Emitido cada vez que el botón es presionado.
33+
34+
## Componente nativo
35+
36+
| Android | iOS |
37+
|---------|-----|
38+
| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)

‎content/docs/es/elements/components/frame.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: Frame
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame
4+
contributors: [msaelices]
5+
---
6+
7+
`<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.
8+
9+
---
10+
11+
#### Un único elemento Frame raíz
12+
13+
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.
14+
15+
```js
16+
new Vue({
17+
render: h => h('Frame', [ h(HomePageComponent) ])
18+
})
19+
```
20+
21+
#### Múltiples Frames
22+
23+
Si necesitas crear múltiples frames, tienes que encapsularlos en un layout, por ejemplo si quieres tener 2 frames lado a lado
24+
25+
```html
26+
<GridLayout columns="*, *">
27+
<Frame col="0"/>
28+
<Frame col="1"/>
29+
</GridLayout>
30+
```
31+
32+
#### Un frame con una página por defecto
33+
34+
```html
35+
<Frame>
36+
<Page>
37+
<ActionBar title="Default Page Title" />
38+
<GridLayout>
39+
<Label text="Default Page Content" />
40+
</GridLayout>
41+
</Page>
42+
</Frame>
43+
```
44+
45+
#### Un frame con una página por defecto de un componente externo
46+
47+
```html
48+
<Frame>
49+
<Page>
50+
<Home />
51+
</Page>
52+
</Frame>
53+
```
54+
55+
```js
56+
import Home from './Home'
57+
58+
export default {
59+
components: {
60+
Home
61+
}
62+
}
63+
```
64+
65+
## Componente Nativo
66+
67+
| Android | iOS |
68+
|---------|-----|
69+
| [`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)

‎content/docs/es/elements/components/list-view.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: ListView
33
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview
4-
contributors: [ianaya89]
4+
contributors: [ianaya89, msaelices]
55
---
66

77
`<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ó
4343
* `$index`&mdash; el índice del elemento actual
4444
* `$even`&mdash; `true` indica si el índice del elemento actual es par
4545
* `$odd`&mdash; `true` indica si el índice del elemento actual es impar
46+
* *`item`*&mdash; el elemento de la lista (el nombre corresponde al iterador en la cláusula `for`). E.g. `if="item.text == 'danger'"`
47+
48+
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`,...).
4649

4750
## Una nota importante sobre `v-for`
4851

‎content/docs/es/elements/components/page.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Page
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_page_.page
4+
contributors: [msaelices]
5+
---
6+
7+
`<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.
8+
9+
---
10+
11+
#### Una página única
12+
13+
```html
14+
<Page>
15+
<ActionBar title="My App" />
16+
<GridLayout>
17+
<Label text="My Content"/>
18+
</GridLayout>
19+
</Page>
20+
```
21+
22+
#### Usando el evento `loaded` para disparar cambios en UI
23+
24+
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:
25+
26+
```html
27+
<Page @loaded="greet">
28+
<ActionBar title="My App" />
29+
<GridLayout>
30+
<Label text="My Content"/>
31+
</GridLayout>
32+
</Page>
33+
```
34+
35+
```js
36+
export default {
37+
methods: {
38+
greet() {
39+
alert('Hello!').then(() => {
40+
console.log('Dialog closed')
41+
})
42+
}
43+
}
44+
}
45+
```
46+
47+
> **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.
48+
49+
## Props
50+
51+
| Nombre | Tipo | Descripción |
52+
|--------|------|-------------|
53+
| `actionBarHidden` | `Boolean` | Muestra u oculta el `<ActionBar>` para la página.<br/>Valor por defecto: `false`.
54+
| `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`.
55+
| `androidStatusBarBackground` | `Color` | (Sólo para Android) Obtiene o establece el color de la barra de estado en dispositivos Android.
56+
| `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`.
57+
| `statusBarStyle` | `String` | Obtiene o establece el estilo de la barra de estado.<br/>Valid values:<br/>`light`,<br/>`dark`.
58+
59+
## Eventos
60+
61+
| Nombre | Descripción |
62+
|--------|-------------|
63+
| `loaded` | Emitido después de que la página ha sido cargada.
64+
| `navigatedFrom` | Emitido después de que la app haya navegado a otra página desde la página actual.
65+
| `navigatedTo` | Emitido después de que la app haya navegado a la página actual.
66+
| `navigatingFrom` | Emitido justo antes de que la app haya navegado a otra página desde la página actual.
67+
| `navigatingTo` | Emitido justo antes de que la app haya navegado a la página actual.
68+
69+
## Componente Nativo
70+
71+
| Android | iOS |
72+
|---------|-----|
73+
| [`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)

‎content/docs/es/elements/components/placeholder.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Placeholder
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_placeholder_.placeholder
4+
contributors: [msaelices]
5+
---
6+
7+
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`.
8+
9+
---
10+
11+
```html
12+
<Placeholder @creatingView="creatingView" />
13+
```
14+
15+
#### Ejemplo con TextView en Android
16+
17+
```js
18+
methods: {
19+
creatingView: function(args) {
20+
const nativeView = new android.widget.TextView(args.context);
21+
nativeView.setSingleLine(true);
22+
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
23+
nativeView.setText("Native View - Android");
24+
args.view = nativeView;
25+
}
26+
}
27+
```
28+
29+
#### Ejemplo con UILabel en iOS
30+
31+
```js
32+
methods: {
33+
creatingView: function(args) {
34+
const nativeView = new UILabel();
35+
nativeView.text = "Native View - iOS";
36+
args.view = nativeView;
37+
}
38+
}
39+
```

‎content/docs/es/elements/components/tab-view.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
title: TabView
33
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview
4-
contributors: [ianaya89]
4+
contributors: [ianaya89, msaelices]
55
---
66

77
`<TabView>` es un componente de navegación que muestra contenido agrupado en pestañas y permite a los usuarios cambiar la pestaña visible.
88

99
---
1010

1111
```html
12-
<TabView :selectedIndex="selectedIndex">
12+
<TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
1313
<TabViewItem title="Tab 1">
1414
<Label text="Content for Tab 1" />
1515
</TabViewItem>
@@ -19,6 +19,15 @@ contributors: [ianaya89]
1919
</TabView>
2020
```
2121

22+
```js
23+
methods: {
24+
indexChange: function(args) {
25+
let newIndex = args.value
26+
console.log('Current tab index: ' + newIndex)
27+
}
28+
}
29+
```
30+
2231
**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*.
2332

2433
[> screenshots for=TabView <]
@@ -45,14 +54,15 @@ contributors: [ianaya89]
4554
| `tabTextColor` | `Color` | (Propiedad de Estilo) Obtiene o establece el color del texto para los títulos de las pestañas.
4655
| `tabBackgroundColor` | `Color` | (Propiedad de Estilo) Obtiene o establece el color de fondo de las pestañas.
4756
| `selectedTabTextColor` | `Color` | (Propiedad de Estilo) Obtiene o establece el color del texto de las pestañas.
57+
| `androidTabsPosition` | `String` | Obtiene o establece la posición del TabView en Android<br/>Valores válidos: `top` o `bottom`.
4858

4959
## Eventos
5060

5161
| Nombre | Descripción |
5262
|------|-------------|
5363
| `selectedIndexChange` | Emitido cada vez que un componente `<TabViewItem>` es presionado.
5464

55-
## Componente Nativo
65+
## Componente nativo
5666

5767
| Android | iOS |
5868
|---------|-----|

‎content/docs/es/elements/dialogs/prompt.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: PromptDialog
33
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#prompt
4-
contributors: [ianaya89]
4+
contributors: [ianaya89, msaelices]
55
---
66

77
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({
3737

3838
## Configurar el tipo de campo
3939

40-
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`
40+
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`).
4141

4242
```JavaScript
4343
inputType: dialogs.inputType.text

‎content/docs/es/elements/layouts/absolute-layout.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
title: AbsoluteLayout
33
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_
44
docRef: https://docs.nativescript.org/ui/layouts/layout-containers#absolutelayout
5-
contributors: [ianaya89]
5+
contributors: [ianaya89, msaelices]
66
---
77

88

9-
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.
9+
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.
1010
`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).
1111

1212
El contenedor `<AbsoluteLayout>` es el *layout* más simple de NativeScript
@@ -51,7 +51,7 @@ No tiene propiedades.
5151

5252
## Additional children props
5353

54-
Cuando un elemento es hijo directo de AbsoluteLayout, las siguientes propiedades pueden ser utilizadas en ese elemento hijo:
54+
Cuando un elemento es hijo directo de `<AbsoluteLayout>`, las siguientes propiedades pueden ser utilizadas en ese elemento hijo:
5555

5656
| Name | Type | Description |
5757
|------|------|-------------|

0 commit comments

Comments
 (0)