javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(accordion): add accordion and accordion-group components (#22865)

Browse Source 
resolves #17094
This commit is contained in:
Liam DeBeasi
2021-03-24 09:17:54 -04:00
committed by GitHub
parent 2c53363901
commit 073883a098
40 changed files with 4977 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
core/src/components.d.ts vendored
View File

@ -5,11 +5,65 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface";
import { AccordionGroupChangeEventDetail, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface";
import { IonicSafeString } from "./utils/sanitization";
import { NavigationHookCallback } from "./components/route/route-interface";
import { SelectCompareFn } from "./components/select/select-interface";
export namespace Components {
interface IonAccordion {
/**
* If `true`, the accordion cannot be interacted with.
*/
"disabled": boolean;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* If `true`, the accordion cannot be interacted with, but does not alter the opacity.
*/
"readonly": boolean;
/**
* The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
*/
"toggleIcon": string;
/**
* The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.
*/
"toggleIconSlot": 'start' | 'end';
/**
* The value of the accordion. Defaults to an autogenerated value.
*/
"value": string;
}
interface IonAccordionGroup {
/**
* If `true`, the accordion group cannot be interacted with.
*/
"disabled": boolean;
/**
* Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
*/
"expand": 'compact' | 'inset';
"getAccordions": () => Promise<HTMLIonAccordionElement[]>;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* If `true`, the accordion group can have multiple accordion components expanded at the same time.
*/
"multiple"?: boolean;
/**
* If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
*/
"readonly": boolean;
"requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
/**
* The value of the accordion group.
*/
"value"?: string | string[] | null;
}
interface IonActionSheet {
/**
* If `true`, the action sheet will animate.
@ -2708,6 +2762,18 @@ export namespace Components {
}
}
declare global {
interface HTMLIonAccordionElement extends Components.IonAccordion, HTMLStencilElement {
}
var HTMLIonAccordionElement: {
prototype: HTMLIonAccordionElement;
new (): HTMLIonAccordionElement;
};
interface HTMLIonAccordionGroupElement extends Components.IonAccordionGroup, HTMLStencilElement {
}
var HTMLIonAccordionGroupElement: {
prototype: HTMLIonAccordionGroupElement;
new (): HTMLIonAccordionGroupElement;
};
interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
}
var HTMLIonActionSheetElement: {
@ -3231,6 +3297,8 @@ declare global {
new (): HTMLIonVirtualScrollElement;
};
interface HTMLElementTagNameMap {
"ion-accordion": HTMLIonAccordionElement;
"ion-accordion-group": HTMLIonAccordionGroupElement;
"ion-action-sheet": HTMLIonActionSheetElement;
"ion-alert": HTMLIonAlertElement;
"ion-app": HTMLIonAppElement;
@ -3321,6 +3389,62 @@ declare global {
}
}
declare namespace LocalJSX {
interface IonAccordion {
/**
* If `true`, the accordion cannot be interacted with.
*/
"disabled"?: boolean;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* If `true`, the accordion cannot be interacted with, but does not alter the opacity.
*/
"readonly"?: boolean;
/**
* The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
*/
"toggleIcon"?: string;
/**
* The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.
*/
"toggleIconSlot"?: 'start' | 'end';
/**
* The value of the accordion. Defaults to an autogenerated value.
*/
"value"?: string;
}
interface IonAccordionGroup {
/**
* If `true`, the accordion group cannot be interacted with.
*/
"disabled"?: boolean;
/**
* Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
*/
"expand"?: 'compact' | 'inset';
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* If `true`, the accordion group can have multiple accordion components expanded at the same time.
*/
"multiple"?: boolean;
/**
* Emitted when the value property has changed.
*/
"onIonChange"?: (event: CustomEvent<AccordionGroupChangeEventDetail>) => void;
/**
* If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
*/
"readonly"?: boolean;
/**
* The value of the accordion group.
*/
"value"?: string | string[] | null;
}
interface IonActionSheet {
/**
* If `true`, the action sheet will animate.
@ -6044,6 +6168,8 @@ declare namespace LocalJSX {
"renderItem"?: (item: any, index: number) => any;
}
interface IntrinsicElements {
"ion-accordion": IonAccordion;
"ion-accordion-group": IonAccordionGroup;
"ion-action-sheet": IonActionSheet;
"ion-alert": IonAlert;
"ion-app": IonApp;
@ -6137,6 +6263,8 @@ export { LocalJSX as JSX };
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"ion-accordion": LocalJSX.IonAccordion & JSXBase.HTMLAttributes<HTMLIonAccordionElement>;
"ion-accordion-group": LocalJSX.IonAccordionGroup & JSXBase.HTMLAttributes<HTMLIonAccordionGroupElement>;
"ion-action-sheet": LocalJSX.IonActionSheet & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
"ion-alert": LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
"ion-app": LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;