docs(menu, split-pane): update contentId docs to be more clear (#23008)

This commit is contained in:
Liam DeBeasi
2021-03-03 10:40:39 -05:00
committed by GitHub
parent 38eb378d66
commit f022464cf8
5 changed files with 28 additions and 20 deletions

View File

@ -1225,7 +1225,7 @@ export namespace Components {
*/ */
"close": (animated?: boolean) => Promise<boolean>; "close": (animated?: boolean) => Promise<boolean>;
/** /**
* The content's id the menu should use. * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
*/ */
"contentId"?: string; "contentId"?: string;
/** /**
@ -2303,7 +2303,7 @@ export namespace Components {
} }
interface IonSplitPane { interface IonSplitPane {
/** /**
* The content `id` of the split-pane's main content. * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
*/ */
"contentId"?: string; "contentId"?: string;
/** /**
@ -4568,7 +4568,7 @@ declare namespace LocalJSX {
} }
interface IonMenu { interface IonMenu {
/** /**
* The content's id the menu should use. * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
*/ */
"contentId"?: string; "contentId"?: string;
/** /**
@ -5625,7 +5625,7 @@ declare namespace LocalJSX {
} }
interface IonSplitPane { interface IonSplitPane {
/** /**
* The content `id` of the split-pane's main content. * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
*/ */
"contentId"?: string; "contentId"?: string;
/** /**

View File

@ -46,7 +46,11 @@ export class Menu implements ComponentInterface, MenuI {
@State() isEndSide = false; @State() isEndSide = false;
/** /**
* The content's id the menu should use. * The `id` of the main content. When using
* a router this is typically `ion-router-outlet`.
* When not using a router, this is typically
* your main view's `ion-content`. This is not the
* id of the `ion-content` inside of your `ion-menu`.
*/ */
@Prop({ reflect: true }) contentId?: string; @Prop({ reflect: true }) contentId?: string;

View File

@ -477,15 +477,15 @@ export default defineComponent({
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | | -------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` | `undefined` | | `contentId` | `content-id` | The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`. | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` |
| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` | | `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` |
| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` | | `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` |
| `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` | | `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` |
| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` | | `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` |
| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string \| undefined` | `undefined` | | `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string \| undefined` | `undefined` |
## Events ## Events

View File

@ -187,11 +187,11 @@ export default defineComponent({
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------- | | ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------- |
| `contentId` | `content-id` | The content `id` of the split-pane's main content. | `string \| undefined` | `undefined` | | `contentId` | `content-id` | The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`. | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the split pane will be hidden. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the split pane will be hidden. | `boolean` | `false` |
| `when` | `when` | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. | `boolean \| string` | `QUERY['lg']` | | `when` | `when` | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. | `boolean \| string` | `QUERY['lg']` |
## Events ## Events

View File

@ -29,7 +29,11 @@ export class SplitPane implements ComponentInterface {
@State() visible = false; @State() visible = false;
/** /**
* The content `id` of the split-pane's main content. * The `id` of the main content. When using
* a router this is typically `ion-router-outlet`.
* When not using a router, this is typically
* your main view's `ion-content`. This is not the
* id of the `ion-content` inside of your `ion-menu`.
*/ */
@Prop({ reflect: true }) contentId?: string; @Prop({ reflect: true }) contentId?: string;