Updated README.md

Signed-off-by: Nikita Karpukhin <nikita.karpukhin@scout24.com>
2022-10-31 15:29:37 +01:00
parent a27892953b
commit a350001484
1 changed files with 40 additions and 0 deletions
@@ -93,3 +93,43 @@ make sure you use a similar component structure as the other tabs.
 You can take a look at
 [the example extra tab](https://github.com/backstage/backstage/blob/master/packages/app/src/components/advancedSettings/AdvancedSettings.tsx)
 we have created in Backstage's demo app.
+
+To change the layout altogether, create a custom page in `packages/app/src/components/user-settings/SettingsPage.tsx`:
+```typescript jsx
+import React from 'react';
+import {
+  SettingsLayout,
+  UserSettingsGeneral,
+} from '@backstage/plugin-user-settings';
+import { AdvancedSettings } from './advancedSettings';
+
+export const SettingsPage = () => {
+  return (
+    <SettingsLayout>
+      <SettingsLayout.Route path="general" title="General">
+        <UserSettingsGeneral />
+      </SettingsLayout.Route>
+      <SettingsLayout.Route path="advanced" title="Advanced">
+        <AdvancedSettings />
+      </SettingsLayout.Route>
+    </SettingsLayout>
+  );
+};
+
+export const settingsPage = <SettingsPage />;
+```
+
+Now register the new settings page in `packages/app/src/App.tsx`:
+
+```typescript jsx
+ import { settingsPage } from './components/settings/settingsPage';
+
+const routes = (
+  <FlatRoutes>
+-    <Route path="/settings" element={<UserSettingsPage />} />
+    <Route path="/settings" element={<UserSettingsPage />}>
+      {settingsPage}
+    </Route>
+  </FlatRoutes>
+);
+```