mirror of
				https://github.com/avatao-content/frontend-tutorial-framework
				synced 2025-11-04 01:02:54 +00:00 
			
		
		
		
	Document layout settings
This commit is contained in:
		
							
								
								
									
										20
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										20
									
								
								README.md
									
									
									
									
									
								
							@@ -87,7 +87,25 @@ Note that you must set `config.dashboard.iframeUrl` to an empty string(`''`) to
 | 
				
			|||||||
### Dashboard
 | 
					### Dashboard
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The dashboard is the component that composes all others and organises them into layouts.
 | 
					The dashboard is the component that composes all others and organises them into layouts.
 | 
				
			||||||
It also exposes a frontend API to dynamically change layouts any time using a message format as such:
 | 
					
 | 
				
			||||||
 | 
					Edit `src/app/config.ts` to change the layout settings.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					Set `config.dashboard.currentLayout` to the layout you want to display by default.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					You can specify the layouts you allow in `config.dashboard.enabledLayouts` (the user can switch between them using a sidebar).
 | 
				
			||||||
 | 
					This list must include the value of `currentLayout`.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					Available layouts– with self explaining names:
 | 
				
			||||||
 | 
					- `terminal-ide-web`
 | 
				
			||||||
 | 
					- `terminal-ide-vertical`
 | 
				
			||||||
 | 
					- `erminal-ide-horizontal`
 | 
				
			||||||
 | 
					- `terminal-only`
 | 
				
			||||||
 | 
					- `terminal-web`
 | 
				
			||||||
 | 
					- `ide-web-vertical`
 | 
				
			||||||
 | 
					- `ide-only`
 | 
				
			||||||
 | 
					- `web-only`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					It also exposes a frontend API to dynamically change layouts any time using a message format as such (note that the layout you switch to must be enabled):
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
{ 
 | 
					{ 
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -12,16 +12,6 @@ export const config = {
 | 
				
			|||||||
      'ide-only',
 | 
					      'ide-only',
 | 
				
			||||||
      'web-only'
 | 
					      'web-only'
 | 
				
			||||||
      ],
 | 
					      ],
 | 
				
			||||||
    allLayouts: [
 | 
					 | 
				
			||||||
      'terminal-ide-web',
 | 
					 | 
				
			||||||
      'terminal-ide-vertical',
 | 
					 | 
				
			||||||
      'terminal-ide-horizontal',
 | 
					 | 
				
			||||||
      'terminal-only',
 | 
					 | 
				
			||||||
      'terminal-web',
 | 
					 | 
				
			||||||
      'ide-web-vertical',
 | 
					 | 
				
			||||||
      'ide-only',
 | 
					 | 
				
			||||||
      'web-only'
 | 
					 | 
				
			||||||
    ],
 | 
					 | 
				
			||||||
    iframeUrl: '/webservice',
 | 
					    iframeUrl: '/webservice',
 | 
				
			||||||
    hide_messages: false
 | 
					    hide_messages: false
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user