NativeScript / NativeScript/angular

TabView not rendering

Abierto
#147 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
TypeScript
Estrellas
55
Forks
13
Merge medio
16 min
PR fusionados (30 d)
1

Descripción

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

{
 "name": "stackblitz-nativescript-angular",
 "main": "./src/main.ts",
 "version": "1.0.0",
 "private": true,
 "dependencies": {
   "@angular/animations": "~19.0.0",
   "@angular/common": "~19.0.0",
   "@angular/compiler": "~19.0.0",
   "@angular/core": "~19.0.0",
   "@angular/forms": "~19.0.0",
   "@angular/platform-browser": "~19.0.0",
   "@angular/platform-browser-dynamic": "~19.0.0",
   "@angular/router": "~19.0.0",
   "@nativescript/angular": "^19.0.0",
   "@nativescript/core": "~8.8.0",
   "rxjs": "~7.8.0",
   "zone.js": "~0.15.0"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "~19.0.0",
   "@angular/compiler-cli": "~19.0.0",
   "@nativescript/preview-cli": "^1.0.14",
   "@nativescript/stackblitz": "^0.0.8",
   "@nativescript/tailwind": "^2.1.0",
   "@nativescript/types": "~8.8.0",
   "@nativescript/webpack": "~5.0.0",
   "@ngtools/webpack": "~19.0.0",
   "tailwindcss": "~3.4.0",
   "typescript": "~5.6.0"
 }
}

Describe the bug

Adding TabView UI component doesn't render on the page.

To Reproduce

Start new project by following the docs: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular. or use this stackblitz:
https://stackblitz.com/edit/nativescript-stackblitz-templates-t6bujanb?file=src%2Fapp%2Fitem%2Fitems.component.html,src%2Fapp%2Fitem%2Fitems.component.ts,src%2Fapp%2Fapp.routes.ts&title=NativeScript%20Starter%20Angular

Modify items.component.html

<ActionBar title="My App"> </ActionBar>

<GridLayout>
  <TabView>
    <TabViewItem title="First">
      <Label
        text="First Tab Content"
        textAlignment="center"
        verticalAlignment="center"
      ></Label>
    </TabViewItem>
    <TabViewItem title="Second">
      <Label
        text="Second Tab Content"
        textAlignment="center"
        verticalAlignment="center"
      ></Label>
    </TabViewItem>
    <TabViewItem title="Third">
      <Label
        text="Third Tab Content"
        textAlignment="center"
        verticalAlignment="center"
      ></Label>
    </TabViewItem>
  </TabView>
</GridLayout>

Expected behavior
Tab views to load like the bellow:

Image

Sample project

Additional context

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el StackBlitz enlazado y la reproducción en src/app/item/items.component.html, y compárala después con el tutorial de Angular de master-detail. Ejecuta el ejemplo con las versiones de Angular y NativeScript indicadas y rastrea por qué no aparece la TabView. Se considera terminado cuando las tres pestañas se rendericen con sus etiquetas y contenido tal como se muestran en la imagen esperada.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend, mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.