docs(select): add new section on rich content options#4512
docs(select): add new section on rich content options#4512brandyscarney wants to merge 7 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| * example: `{ innerHTMLTemplatesEnabled: true }`. Merges with the active | ||
| * preview `mode` when opening the editor. | ||
| */ | ||
| ionicConfig?: IonicConfig; |
There was a problem hiding this comment.
I decided to add this as a config object instead of adding innerHTMLTemplatesEnabled as a boolean because this will allow us to enhance the Config documentation if desired by adding playgrounds passing different config options.
| * Ionic app configuration. See [IonicConfig](/docs/developing/config#ionicconfig). | ||
| * Playground only injects serializable values (string, number, boolean) into StackBlitz. | ||
| */ | ||
| export type IonicConfig = Record<string, unknown>; |
There was a problem hiding this comment.
I was going to import the type from Ionic but then we would have a dependency on @ionic/core and I don't know if we want that.
|
|
||
| ## Ionic Config | ||
|
|
||
| Pass an [IonicConfig](/docs/developing/config#ionicconfig) object so generated StackBlitz projects bootstrap with the same settings. This is merged with the active preview `mode` when opening the editor. Only string, number, and boolean values are injected into generated code: |
There was a problem hiding this comment.
I chose this rather than adding an entire file for each framework to pass the config like Vue but if we prefer that approach I can revert this.
| const formatInterfaceLabel = (selectInterface) => { | ||
| return selectInterface | ||
| .split('-') | ||
| .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) | ||
| .join(' '); | ||
| }; | ||
|
|
||
| /* Dynamically create the different Select components */ | ||
| const selectInterfaces = ['alert', 'action-sheet', 'modal', 'popover']; |
There was a problem hiding this comment.
Originally I defined the interface array like this:
const selectInterfaces = [{
label: 'Alert',
value: 'alert',
}, {
label: 'Action Sheet',
value: 'action-sheet',
}, {
label: 'Modal',
value: 'modal',
}, {
label: 'Popover',
value: 'popover',
}];but I removed it in favor of using the single string and converting it to the label. If we think this is too much for the demo, I can go back to the object array.
| /* The interfaceOptions property is for demonstration purposes only. */ | ||
| /* It is not required for the rich options to work. */ | ||
| select.interfaceOptions = { | ||
| header: 'Travel mode', | ||
| }; |
There was a problem hiding this comment.
This is just to make the demo look nicer but can be removed if desired.
brandyscarney
requested review from
gnbm and
thetaPC
and removed request for
a team and
gnbm
1 participant
Adds the following:
ionicConfigwhich allows you to pass config options that get merged withmodein the Playground example.Preview