Ionic v4 layout documentation is not updated #594

Activity

1. anidotnet

   added

   contentIssues related to the contents of the documentation websiteIssues related to the contents of the documentation website

   on Mar 25, 2019
2. brandyscarney commented on Mar 25, 2019

   

   brandyscarney

   on Mar 25, 2019

   Member

   More actions

   Thanks for the issue! Which part is not updated?
3. anidotnet commented on Mar 25, 2019

   

   anidotnet

   on Mar 25, 2019

   Author

   More actions

   I have only seen 2, after that I stopped reading as I suspect the document is not updated. The 2 places I found are as follows:

   1. https://ionicframework.com/docs/layout/structure#tabs-layout

   <ion-tab tab="home">
     <h1>Home Content</h1>
   </ion-tab>
   <ion-tab tab="settings">
     <h1>Settings Content</h1>
   </ion-tab>

   ion-tab is not supported in v4.

   2. https://ionicframework.com/docs/layout/structure#menu-layout

   <ion-page class="ion-page" main>
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
           <ion-menu-toggle>
             <ion-button>
               <ion-icon slot="icon-only" name="menu"></ion-icon>
             </ion-button>
           </ion-menu-toggle>
         </ion-buttons>
         <ion-title>Header</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content padding>
       <h1>Main Content</h1>
       <p>Click the icon in the top left to toggle the menu.</p>
     </ion-content>
   </ion-page>

   ion-page is not supported in v4 it seems.
4. brandyscarney commented on Mar 25, 2019

   

   brandyscarney

   on Mar 25, 2019

   Member

   More actions

   Thanks for the quick reply! The examples are written in vanilla JavaScript and it looks accurate for the tabs example: https://codepen.io/brandyscarney/pen/aMMrPK

   You're right that ion-page does not exist anymore, however it should still work with that markup since the ion-page class is there: https://codepen.io/brandyscarney/pen/GeeaLR

   Are you looking for this documentation for a specific framework? If so, could you please let me know which one? 🙂
5. anidotnet commented on Mar 25, 2019

   

   anidotnet

   on Mar 25, 2019

   Author

   More actions

   I was looking to create a mobile application using angular 7 and ionic 4. When I used these markup in my ionic + angular project, the page is not getting rendered in the browser.

   In developer console I am seeing below error message:

   ERROR Error: Uncaught (in promise): Error: Template parse errors:
   'ion-tab' is not a known element:
   1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
   2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
       <ion-tabs>
           [ERROR ->]<ion-tab tab="home">
               <h1>Home Content</h1>
           </ion-tab>
   "): ng:///ListPageModule/ListPage.html@75:8
   'ion-tab' is not a known element:
   1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
   2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
               <h1>Home Content</h1>
           </ion-tab>
           [ERROR ->]<ion-tab tab="settings">
               <h1>Settings Content</h1>
           </ion-tab>
   "): ng:///ListPageModule/ListPage.html@78:8
   Error: Template parse errors:
   'ion-tab' is not a known element:
   1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
   2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
       <ion-tabs>
           [ERROR ->]<ion-tab tab="home">
               <h1>Home Content</h1>
           </ion-tab>
   "): ng:///ListPageModule/ListPage.html@75:8
   'ion-tab' is not a known element:
   1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
   2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
               <h1>Home Content</h1>
           </ion-tab>
           [ERROR ->]<ion-tab tab="settings">
               <h1>Settings Content</h1>
           </ion-tab>
   "): ng:///ListPageModule/ListPage.html@78:8
       at syntaxError (compiler.js:2430)
       at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
       at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
       at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
       at compiler.js:26101
       at Set.forEach (<anonymous>)
       at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
       at compiler.js:26011
       at Object.then (compiler.js:2421)
       at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
       at resolvePromise (zone.js:831)
       at resolvePromise (zone.js:788)
       at zone.js:892
       at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
       at Object.onInvokeTask (core.js:17289)
       at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
       at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
       at drainMicroTaskQueue (zone.js:601)
   

   Am I missing something?
6. brandyscarney commented on Mar 25, 2019

   

   brandyscarney

   on Mar 25, 2019

   Last edited by brandyscarney

   Member

   More actions

   You're correct that it won't work in Angular. The example is in vanilla JavaScript meaning no framework. 🙂

   I agree that our guide documentation needs to be updated for consistency and making it better known which framework you are viewing, we have some places in the guide where the code examples are written in Angular and others in vanilla JavaScript. You may want to look at our navigation documentation for Angular: https://ionicframework.com/docs/navigation/angular

   We have some usage examples in the API documentation where you can toggle between the frameworks:
   https://ionicframework.com/docs/api/tabs#usage
   https://ionicframework.com/docs/api/menu#usage
   https://ionicframework.com/docs/api/split-pane#usage

   I've mentioned updating the guide to the team though, so we'll keep it in mind! Thanks!

   👍React with 👍1Reacted by Anindya Chatterjee
7. liamdebeasi

   added

   triageNew issuesNew issues

   and removed

   contentIssues related to the contents of the documentation websiteIssues related to the contents of the documentation website

   on Sep 20, 2022
8. brandyscarney

   added

   contentIssues related to the contents of the documentation websiteIssues related to the contents of the documentation website

   on Oct 11, 2022
9. ionitron-bot

   removed

   triageNew issuesNew issues

   on Oct 11, 2022
10. brandyscarney

    added a commit that references this issue on Apr 5, 2023

    docs(layout): update structure docs to use new playground examples

    ...

    This issue will close once commit f1135f1 is merged into the 'main' branch.

    f1135f1
11. ghost assigned

    brandyscarney

    on Apr 5, 2023
12. brandyscarney

    closed this as completedin #2882on Apr 10, 2023
13. brandyscarney

    added a commit that references this issue on Apr 10, 2023

    docs(layout): update structure docs to use new playground examples (#…

    ...

    This issue will close once commit fe449b7 is merged into the 'main' branch.

    fe449b7
14. rdlabo

    added a commit that references this issue on Jul 25, 2023

    chore(jp): merge recent update (#2883)

    ...

    This issue will close once commit d8f8cc4 is merged into the 'main' branch.

    d8f8cc4
15. rdlabo

    added a commit that references this issue on Sep 14, 2023

    translation(jp): 20230824 updated (#3103)

    ...

    This issue will close once commit 5bbf6a7 is merged into the 'main' branch.

    5bbf6a7
16. rdlabo

    added a commit that references this issue on Oct 17, 2023

    feat(translation/jp): 20231006 update (#3174)

    ...

    This issue will close once commit 7229a94 is merged into the 'main' branch.

    7229a94