doc updates
This commit is contained in:
parent
2c1dd2297b
commit
e465a522a0
|
@ -9,8 +9,8 @@ when Light & Dark mode is selected. The stories are best viewed by selecting one
|
||||||
|
|
||||||
# Popup Tab Navigation
|
# Popup Tab Navigation
|
||||||
|
|
||||||
The popup tab navigation component is the component that composes together the popup page and the
|
The popup tab navigation component composes together the popup page and the bottom tab navigation
|
||||||
bottom tab navigation footer.
|
footer. This component is intended to be used a level _above_ each extension tab's page code.
|
||||||
|
|
||||||
The navigation footer contains the 4 main page links for the browser extension. It uses the Angular
|
The navigation footer contains the 4 main page links for the browser extension. It uses the Angular
|
||||||
router to determine which page is currently active, and style the button appropriately. Clicking on
|
router to determine which page is currently active, and style the button appropriately. Clicking on
|
||||||
|
@ -36,13 +36,13 @@ page looks nice when the extension is popped out.
|
||||||
**Slots**
|
**Slots**
|
||||||
|
|
||||||
- `header`
|
- `header`
|
||||||
- Use `popup-header` component
|
- Use `popup-header` component.
|
||||||
- Every page should have a header
|
- Every page should have a header.
|
||||||
- `footer`
|
- `footer`
|
||||||
- Use the `popup-footer` component
|
- Use the `popup-footer` component.
|
||||||
- Not every page will have a footer
|
- Not every page will have a footer.
|
||||||
- default
|
- default
|
||||||
- Whatever content you want in `main`
|
- Whatever content you want in `main`.
|
||||||
|
|
||||||
Basic usage example:
|
Basic usage example:
|
||||||
|
|
||||||
|
@ -59,7 +59,7 @@ Basic usage example:
|
||||||
**Args**
|
**Args**
|
||||||
|
|
||||||
- `pageTitle`: required
|
- `pageTitle`: required
|
||||||
- Inserts title as an h1.
|
- Inserts title as an `h1`.
|
||||||
- `showBackButton`: optional, defaults to `false`
|
- `showBackButton`: optional, defaults to `false`
|
||||||
- Toggles the back button to appear. The back button uses `Location.back()` to navigate back one
|
- Toggles the back button to appear. The back button uses `Location.back()` to navigate back one
|
||||||
page in history.
|
page in history.
|
||||||
|
@ -67,13 +67,13 @@ Basic usage example:
|
||||||
**Slots**
|
**Slots**
|
||||||
|
|
||||||
- `end`
|
- `end`
|
||||||
- Use to insert one or more interactive elements
|
- Use to insert one or more interactive elements.
|
||||||
- The header handles the spacing between elements passed to to the `end` slot.
|
- The header handles the spacing between elements passed to the `end` slot.
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<popup-header pageTitle="Test" showBackButton="true">
|
<popup-header pageTitle="Test" showBackButton>
|
||||||
<ng-container slot="end">
|
<ng-container slot="end">
|
||||||
<button></button>
|
<button></button>
|
||||||
<button></button>
|
<button></button>
|
||||||
|
@ -111,12 +111,16 @@ View the story source code to see examples of how to construct these types of pa
|
||||||
|
|
||||||
## Extension Tab
|
## Extension Tab
|
||||||
|
|
||||||
|
Example of wrapping an extension page in the `popup-tab-navigation` component.
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story of={stories.PopupTabNavigation} />
|
<Story of={stories.PopupTabNavigation} />
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
## Extension Page
|
## Extension Page
|
||||||
|
|
||||||
|
Examples of using just the `popup-page` component, without and with a footer.
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story of={stories.PopupPage} />
|
<Story of={stories.PopupPage} />
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -16,6 +16,17 @@ import { PopupHeaderComponent } from "./popup-header.component";
|
||||||
import { PopupPageComponent } from "./popup-page.component";
|
import { PopupPageComponent } from "./popup-page.component";
|
||||||
import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
|
import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "extension-container",
|
||||||
|
template: `
|
||||||
|
<div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
standalone: true,
|
||||||
|
})
|
||||||
|
class ExtensionContainerComponent {}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "vault-placeholder",
|
selector: "vault-placeholder",
|
||||||
template: `
|
template: `
|
||||||
|
@ -267,6 +278,7 @@ export default {
|
||||||
PopupTabNavigationComponent,
|
PopupTabNavigationComponent,
|
||||||
CommonModule,
|
CommonModule,
|
||||||
RouterModule,
|
RouterModule,
|
||||||
|
ExtensionContainerComponent,
|
||||||
MockVaultSubpageComponent,
|
MockVaultSubpageComponent,
|
||||||
MockVaultPageComponent,
|
MockVaultPageComponent,
|
||||||
MockSendPageComponent,
|
MockSendPageComponent,
|
||||||
|
@ -312,11 +324,11 @@ export const PopupTabNavigation: Story = {
|
||||||
render: (args) => ({
|
render: (args) => ({
|
||||||
props: args,
|
props: args,
|
||||||
template: /* HTML */ `
|
template: /* HTML */ `
|
||||||
<div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
|
<extension-container>
|
||||||
<popup-tab-navigation>
|
<popup-tab-navigation>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</popup-tab-navigation>
|
</popup-tab-navigation>
|
||||||
</div>
|
</extension-container>
|
||||||
`,
|
`,
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
|
@ -325,9 +337,9 @@ export const PopupPage: Story = {
|
||||||
render: (args) => ({
|
render: (args) => ({
|
||||||
props: args,
|
props: args,
|
||||||
template: /* HTML */ `
|
template: /* HTML */ `
|
||||||
<div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
|
<extension-container>
|
||||||
<mock-vault-page></mock-vault-page>
|
<mock-vault-page></mock-vault-page>
|
||||||
</div>
|
</extension-container>
|
||||||
`,
|
`,
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
|
@ -336,9 +348,9 @@ export const PopupPageWithFooter: Story = {
|
||||||
render: (args) => ({
|
render: (args) => ({
|
||||||
props: args,
|
props: args,
|
||||||
template: /* HTML */ `
|
template: /* HTML */ `
|
||||||
<div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
|
<extension-container>
|
||||||
<mock-vault-subpage></mock-vault-subpage>
|
<mock-vault-subpage></mock-vault-subpage>
|
||||||
</div>
|
</extension-container>
|
||||||
`,
|
`,
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue