Ree-accordion NPM

v0.0.0

Accordion

import {AccordionModule} from '@ree/accordion'

Component selector:

<ree-accordion [input]="value" (output)="function($event)"></ree-accordion>

Parameters:

Type	Name	Description
@Input()string	string[]	openPanelByDefault	Indica el listado de paneles, de sus ids, que tienen que estar abiertos por defectos. Si seproporciona un string, se debe separa mediante comas los identificadores.
@Input()boolean	closeOthers	Indica si cada vez que se abre un panel se tienen que cerrar el resto.
@Input()boolean	versionTable	Input que habilita estilos cuando es versión tabla
@Input()boolean	showGroupForm	Indica si el modo en que se muestra el acordeón es como un agrupador de formularios.Vista mucho más simple.
@Output()EventEmitter\<Array\<IAccordionState>>	status	Cada vez que hay un cambio en los paneles, indica el estado de los paneles.

import {ReePanelDirective} from '@ree/accordion'

Indica cada uno de los paneles dentro de un acordeón..

Component selector:

<ree-panel [input]="value" (output)="function($event)"></ree-panel>

Parameters:

Type	Name	Description
@Input()string	title	Título del acordeón.
@Input()boolean	isOpen	Indica si el panel está abierto.
@Input()true	disabled	Indica si el panel está desactivado.
@Input()'left'	'center'	'right'	titlePosition	Indica la posición del título del panel._demo-css-variables-theme
@Input()string	id	Indica el id del panel. Si no se indica ninguno, se añade uno por defecto.

Misceláneo:

A la hora de usar el acordeón es necesario declarar las directivas ree-panel dentro del componente de ree-accordion pasándo todos

los inputs. Se puede acceder a los métodos del acordeon a través del idenficador reeAccordion.

Ambos ejemplos se encuentran en la pestaña de Story.

Definitions:

/**
 * @param id Identificador del acordeón.
 * @param isOpen Estado del acordeón.
 */
export interface IPanelState {
	id: string;
	isOpen: string | boolean;
}
/** Estado del acordeón.
 *
 */
export type IAccordionState = Array<IPanelState>;

tslib

1.0.0

5 years ago