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
|
||||
|
||||
The popup tab navigation component is the component that composes together the popup page and the
|
||||
bottom tab navigation footer.
|
||||
The popup tab navigation component composes together the popup page and the bottom tab navigation
|
||||
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
|
||||
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**
|
||||
|
||||
- `header`
|
||||
- Use `popup-header` component
|
||||
- Every page should have a header
|
||||
- Use `popup-header` component.
|
||||
- Every page should have a header.
|
||||
- `footer`
|
||||
- Use the `popup-footer` component
|
||||
- Not every page will have a footer
|
||||
- Use the `popup-footer` component.
|
||||
- Not every page will have a footer.
|
||||
- default
|
||||
- Whatever content you want in `main`
|
||||
- Whatever content you want in `main`.
|
||||
|
||||
Basic usage example:
|
||||
|
||||
|
@ -59,7 +59,7 @@ Basic usage example:
|
|||
**Args**
|
||||
|
||||
- `pageTitle`: required
|
||||
- Inserts title as an h1.
|
||||
- Inserts title as an `h1`.
|
||||
- `showBackButton`: optional, defaults to `false`
|
||||
- Toggles the back button to appear. The back button uses `Location.back()` to navigate back one
|
||||
page in history.
|
||||
|
@ -67,13 +67,13 @@ Basic usage example:
|
|||
**Slots**
|
||||
|
||||
- `end`
|
||||
- Use to insert one or more interactive elements
|
||||
- The header handles the spacing between elements passed to to the `end` slot.
|
||||
- Use to insert one or more interactive elements.
|
||||
- The header handles the spacing between elements passed to the `end` slot.
|
||||
|
||||
Usage example:
|
||||
|
||||
```html
|
||||
<popup-header pageTitle="Test" showBackButton="true">
|
||||
<popup-header pageTitle="Test" showBackButton>
|
||||
<ng-container slot="end">
|
||||
<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
|
||||
|
||||
Example of wrapping an extension page in the `popup-tab-navigation` component.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.PopupTabNavigation} />
|
||||
</Canvas>
|
||||
|
||||
## Extension Page
|
||||
|
||||
Examples of using just the `popup-page` component, without and with a footer.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.PopupPage} />
|
||||
</Canvas>
|
||||
|
|
|
@ -16,6 +16,17 @@ import { PopupHeaderComponent } from "./popup-header.component";
|
|||
import { PopupPageComponent } from "./popup-page.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({
|
||||
selector: "vault-placeholder",
|
||||
template: `
|
||||
|
@ -267,6 +278,7 @@ export default {
|
|||
PopupTabNavigationComponent,
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
ExtensionContainerComponent,
|
||||
MockVaultSubpageComponent,
|
||||
MockVaultPageComponent,
|
||||
MockSendPageComponent,
|
||||
|
@ -312,11 +324,11 @@ export const PopupTabNavigation: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
|
||||
<extension-container>
|
||||
<popup-tab-navigation>
|
||||
<router-outlet></router-outlet>
|
||||
</popup-tab-navigation>
|
||||
</div>
|
||||
</extension-container>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
@ -325,9 +337,9 @@ export const PopupPage: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
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>
|
||||
</div>
|
||||
</extension-container>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
@ -336,9 +348,9 @@ export const PopupPageWithFooter: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
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>
|
||||
</div>
|
||||
</extension-container>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue