@exodus-bluego/admin-ui
v0.1.6
Published
Libreria de componentes creada por y para el equipo de bluego/admin
Downloads
39
Readme
Admin UI
componentes personalizados por y para el equipo de bluego.
Contenido
- adminUI
Boton
Desarrollado por Dan Lopez
Opciones del boton
| Nombre | Tipo | Valor por defecto | Descripcion | | ----------------- | -------------------------------------------------------- | ----------------- | ------------------------------------------------------------------- | | children | ReactNode | Click Me | propiedad para insertar texto | | showIcon | ReactNode | null | propiedad para insertar un icono | | variant | contained, outlined, text | contained | propiedad para dar estilos general al boton | | btnClass | loginBtn, aceptarBtn, cancelarBtn, agregarBtn, perfilBtn | aceptarBtn | popiedad para dar estilo al boton | | size | small, medium, large | medium | propiedad que modifica el tamaño del boton | | isIcon | boolean | false | propiedad para identificar si tiene un icono o no | | startIcon | boolean | false | propiedad para identificar si el icono va antes o despues del texto | | isDisable | boolean | false | propiedad para identificar si esta de desactivado | | fullWidth | boolean | false | define si ocupara todo el espacio disponible | | radius | square | rounded | round | circle | string | number | square | Define el radius del componente | | paddingHorizontal | string | number | 10 | define el padding horizontal del componente | | onClick | MouseEventHandler | () => void | evento click del componente | | fontSize | numeric | 15 | tamaño en pixeles que tendra la letra del boton | | fontFamily | string | Roboto Medium | define el tipo de fuente que tendra el boton | | loadingIndicator | boolean | false | propiedad mostrar como cargando el boton | | sx | object | undefined | permite definir estilos css |
Ejemplo del boton
import React, { FC } from 'react';
import EBAButton from '@exodus-bluego/templete/EBAButton';
const fnButton = () => {
console.log('funcion del componente');
};
const MiComponente: React.FC = () => {
return (
<EBAButton variant="contained" btnClass="aceptarBtn" onClick={() => fnButton()}>
Texto del boton
</EBAButton>
);
};textfield
Desarrollado por Alfredo Zum
Opciones textfield
| Nombre | Tipo | Valor por defecto | Descripcion | | ------------- | ------------ | ----------------- | ---------------------------------------------------------------------------------------- | | variant | string | outlined | propiedad para definir el estilo del textfield | | size | string | medium | propiedad para definir el tamano del componente | | label | string | undefined | propiedad para el texto del textfield | | fullWidth | boolean | fakse | define si ocupara todo el espacio disponible | | disabled | boolean | false | propiedad para desactivar el textfield | | color | string | primary | propiedad para cambiar el color del textfield | | type | string | text | propiedad para definir el tipo de valor de entrada | | value | string | undefined | propiedad para definir y recuperar el valor del textfield | | radius | string | rounded | propiedad para especificar el border radius | | multiline | boolean | false | define si se convertira en un textarea | | rows | number | undefined | número de filas para mostrar cuando la opción multiline se establece en verdadero | | minRows | number | undefined | Número mínimo de filas para mostrar cuando la opción multiline se establece en verdadero | | maxRows | number | undefined | Número máximo de filas para mostrar cuando la opción multiline se establece en verdadero | | isIcon | boolean | false | propiedad para mostrar un icono a los lados | | startIcon | boolean | false | define si el icono mostrara se mostrara a la izquierda o derecha | | showIcon | ReactNode | undefined | icono que se mostrara | | helperText | string | undefined | el contenido del texto auxiliar | | referenceText | string | undefined | Muestra un texto abajo del campo de texto | | error | boolean | false | si se establece en true, la etiqueta se muestra en un estado de error | | inputProps | object | {} | establece un objecto de atributos HTMLInputElement com el los estilos css | | onChange | Change Event | () => void | evento cada vez que cambia de valor el textfield | | onClickIcon | Click Event | () => void | evento click para el icono | | onKeyPress | Change Event | () => void | evento que detecta cuando se aprieta una tecla | | isPhone | boolean | false | permite cambiar el estilo a un telefono | | inputElement | object | undefined | permite cambiar atributos como los iconos |
Ejemplo textfield
import React, { FC } from 'react';
import EBATextField from '@exodus-bluego/templete/EBATextField';
const fnChangeTextfield = event => {
console.log('Cambio el valor del textfield a :' + event.currentTarget.value);
};
const MiComponenteTextfield: React.FC = () => {
return (
<EBATextField
placeholder="Prueba placeholder"
variant="outlined"
size="medium"
label="Prueba labek"
fullWidth={false}
multiline={false}
disabled={false}
color="primary"
type="text"
value="Prueba"
onChange={fnChangeTextfield}
/>
);
};Switch
Desarrollado por Alfredo Zum
Opciones switch
| Nombre | Tipo | Valor por defecto | Descripcion | | ---------- | ------------ | ----------------- | --------------------------------------------------------- | | disabled | boolean | false | propiedad para desactivar el switch | | checked | string | undefined | propiedad para definir si e switch esta activo o inactivo | | labelLeft | string | undefined | define texto izquierdo | | labelRight | string | undefined | define texto derecho | | onChange | Change Event | () => void | evento cada vez que cambia de valor el switch |
Ejemplo switch
import React, { FC } from 'react';
import EBASwitch from '@exodus-bluego/templete/EBASwitch';
const [value, setValue] = useState(true);
const fnChangeSwitch = (event: any): void => {
event.preventDefault();
const switchValue = event.currentTarget.value;
setValue(switchValue);
};
const MiComponenteSwitch: React.FC = () => {
return <EBASwitch disabled={false} checked={value} labelLeft="Inactico" labelRight="Actico" onChange={fnChangeTextfield} />;
};Filtro Mapa
Desarrollado por Alfredo Zum
Link componente menu Link componente select Link componente button
Opciones Filtro Mapa
Se puede usar de dos maneras con un solo campo de seleccion (item) o con multiples (itemsMultiple) campos en el filtro
| Nombre | Tipo | Valor por defecto | Descripcion | | ---------------- | -------------------------------- | ----------------- | ------------------------------------------------------------------------- | | children | ReactNode | filtro | propiedad para insertar texto e icono | | itemsMultiple | array[type, title, items, value] | [] | coleccion de campos cuando se mostrara mas de uno puede ser select o date | | showCleanFilters | boolean | true | muestra un boton para limpiar todos los filtros | | isDisabled | boolean | false | deshabilita el boton para mostrar los filtros | | onClick | Click Event | () => void | evento cuando se presiona el boton para filtrar | | onChange | ChangeEventHandler | () => void | evento cada vez que cambia de valor el select | | onClose | CloseEventHandler | () => void | evento cuando se cierra el menu | | onClean | Clean Event | () => void | evento cuando se limpian los filtros |
Ejemplo Filtro Mapa
import React, { FC } from "react";
import EBAFiltroMapa from '@exodus-bluego/templete/EBAFiltroMapa'
const fnChange = (event) => {
console.log('Filtros selecionados);
}
const fnChange = (event) => {
const newValue = event.target;
console.log(`Se cambio el valor a ${newValue.value} del campo ${newValue.name}`);
}
const fnClose = (event) => {
console.log(`El resultado de los filtros son`, event.target);
}
const fnClean = () => {console.log("Se limpio los campos del formulario")}
const MiComponenteFiltroMapaMultiple: React.FC = () => {
return (
<EBAFiltroMapa
"itemsMultiple": [
{
'type': 'select',
'title': 'Columna',
'items': [
'Id',
'Nombre',
'Repartidores',
'Estatus'
],
'value': 'Id'
},
{
'type': 'date',
'title': 'Fecha',
'value': new Date('2022-01-31')
},
],
onChange={fnChange}
onClose={fnClose}
onClean={fnClean}
onClick={fnClick}
>
{<children /> | "Filtro"}
</EBAFiltroMapa>
);
};IconButton
Desarrollado por Dan Lopez
Opciones del iconbutton
| Nombre | Tipo | Valor por defecto | Descripcion | | --------- | ----------------------------------------------- | ----------------- | --------------------------------------------------------- | | children | ReactNode | Click Me | propiedad para insertar el icono a mostrar | | areaLabel | string | lblIconButton | propiedad que se usa como identificador en el codigo html | | variant | contained, outlined, text | text | propiedad para dar estilos general al boton | | iconStyle | containedBtn, outlinedBtn, textBtn, textGreyBtn | textGreyBtn | popiedad para dar estilo al boton | | size | small, medium, large | medium | propiedad que modifica el tamaño del boton | | isDisable | boolean | false | propiedad para identificar si esta de desactivado | | onClick | MouseEventHandler | () => void | evento click del componente |
Ejemplo del iconbutton
import React, { FC } from 'react';
import EBAIconButton from '@exodus-bluego/templete/EBAIconButton';
const fnButton = () => {
console.log('funcion del componente');
};
const MiComponente: React.FC = () => {
return (
<EBAButton variant="contained" onClick={() => fnButton()}>
{<Icon />}
</EBAButton>
);
};CardLogo
Desarrollado por Dan Lopez
Opciones del cardLogo
| Nombre | Tipo | Valor por defecto | Descripcion | | --------- | ----------------------------------------- | ----------------- | --------------------------------------------------------- | | showIcon | ReactNode | Click Me | propiedad para insertar el icono a mostrar | | showLogo | string | BlueGo.svg | propiedad para insertar el logo a mostrar | | areaLabel | string | areaCardLogo | propiedad que se usa como identificador en el codigo html | | onClick | MouseEventHandler | () => void | evento click del componente | | sx | object { cardStyle, iconStyle, imgStyle } | undefined | permite definir estilos css |
Ejemplo del cardLogo
import React, { FC } from 'react';
import EBACardLogo from '@exodus-bluego/templete/EBACardLogo';
const fnButton = () => {
console.log('funcion del componente');
};
const MiComponente: React.FC = () => {
return <EBACardLogo showIcon={<Icon />} onClick={() => fnButton()} />;
};DropDown
Desarrollado por Dan Lopez
Opciones del dropDown
| Nombre | Tipo | Valor por defecto | Descripcion | | ------------- | ----------------- | ----------------- | ------------------------------------------------------------- | | areaLabel | string | dropdown | propiedad que se usa como identificador en el codigo html | | selectedValue | string | null | propiedad que se usa para seleccionar un valor inicial | | currencies | [string] | null | propiedad para mostrar la lista de elementos en el componente | | isDisable | boolean | false | propiedad para identificar si esta de desactivado | | onChange | MouseEventHandler | () => void | evento change del componente |
Ejemplo del dropDown
import React, { FC } from 'react';
import EBADropDown from '@exodus-bluego/templete/EBADropDown';
const fnButton = () => {
console.log('funcion del componente');
};
const MiComponente: React.FC = () => {
return <EBADropDown currencies={estados} areaLabel="initialvalue" selectedValue="Guanajuato" />;
};OptionButton
Desarrollado por Dan Lopez
Link componente Link componente
Opciones del OptionButton
| Nombre | Tipo | Valor por defecto | Descripcion | | --------------- | ------------------------------------ | ----------------- | --------------------------------------------------------------------------- | | ariaLabelRadio | string | lblOptionButton | propiedad que se usa para identificar el label contenedor en el codigo html | | ariaLabelButton | string | btnOptionButton | propiedad que se usa para identificar el boton en el codigo html | | currencies | typeArray | null | propiedad para mostrar la lista de elementos en el componente | | defaultValue | Cyan, Pink, Green, Yellow, Blue, Red | Cyan | popiedad para seleccionar el check al iniciar | | size | small, medium | medium | propiedad que modifica el tamaño del componente | | onChange | MouseEventHandler | () => void | evento change de los radiobuttons | | onClick | MouseEventHandler | () => void | evento click del boton |
Ejemplo del OptionButton
import React, { FC } from "react";
import EBAOptionButton from '@exodus-bluego/templete/EBAOptionButton'
const newArray: typeArray (name: string, id: number, isDisable: boolean, nameStyle: "chkCyan"| "chkPink"| "chkGreen"| "chkYellow"| "chkRed"| "chkBlue") => {
return ({ "primero", 1, false, "chkCyan" },{ "segundo", 2, false, "chkGreen" })
}
const fnButton = () => {console.log("funcion del componente")}
const fnChange = () => {console.log("funcion del componente")}
const MiComponente: React.FC = () => {
return (
<EBAOptionButton
onClick={fnButton}
onChange={fnChange}
currencies={newArray}
/>
);
};Avatar
Desarrollado por Alfredo Zum
Link componente menu Link componente button Link componente avatar
Opciones Avatar
Se puede usar de dos maneras default con los campos preestablecido o agregar tus propio componentes al menu
| Nombre | Tipo | Valor por defecto | Descripcion | | ----------------- | -------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------- | | src | string | BlueGo icon | src de la imagen del avatar | | alt | string | BlueGo admin avatar | alt de la imagen | | nameAvatar | string | BlueGo | nombre del avatar / usuario | | emailAvatar | string | BlueGo | correo electronico del avatar / usuario | | enableColorOnDark | boolean | false | Cambia a darkmode cuando es true | | children | ReactNode | null | propiedad para customizar los componentes del menu despegable | | onClick | ClickEventHandler | () => void | evento de los botones del menu | | onClose | CloseEventHandler | () => void | evento cuando se cierra el menu | | sx | object { avatarBtnStyle, menuStyle, btnsMenuStyle, nameStyle, emailStyle } | undefined | permite definir estilos css |
Ejemplo Avatar
import React, { FC } from 'react';
import EBAAvatar from '@exodus-bluego/templete/EBAAvatar';
const fnClick = event => {
console.log(`Se clickeo el boton ${event.target.value}`);
};
const fnClose = event => {
console.log('Se cerro el menu');
};
const MiComponenteAvatar: React.FC = () => {
return (
<EBAAvatar
src="https://mui.com/static/images/avatar/2.jpg"
alt="BlueGo Admin"
nameAvatar="Carlos Ramirez"
emailAvatar="[email protected]"
enableColorOnDark={false}
onChange={fnClick}
onClose={fnClose}
/>
);
};
const MiComponenteCustomAvatar: React.FC = () => {
return (
<EBAAvatar src="https://mui.com/static/images/avatar/2.jpg" alt="BlueGo Admin" nameAvatar="Carlos Ramirez">
{<children /> | <p style={{ textAlign: 'center' }}>Avatar Menu</p>}
</EBAAvatar>
);
};AppBar
Desarrollado por Alfredo Zum
Link componente appbar Link componente toolbar
Opciones AppBar
| Nombre | Tipo | Valor por defecto | Descripcion | | ----------------- | ---------------- | ----------------- | ---------------------------------------------------------------------- | | color | string | default | propiedad para cambiar el color | | height | string | number | auto | define el alto del appbar | | position | string | fixed | el tipo de posicionamiento | | elevation | number | 0 | Profundidad de sombra | | enableColorOnDark | boolean | false | Cambia a darkmode cuando es true | | rightChild | ReactNode | null | Propiedad para importar un componente en la parte derecha del appbar | | middleChild | ReactNode | null | Propiedad para importar un componente en la parte central del appbar | | leftChild | ReactNode | null | Propiedad para importar un componente en la parte izquierda del appbar |
Ejemplo AppBar
import React, { FC } from 'react';
import EBAAppBar from '@exodus-bluego/templete/EBAAppBar';
const leadingComponent = () => {
return <label>Logo</label>;
};
const avatarComponent = () => {
return <label>Avatar componente</label>;
};
const MiComponente: React.FC = () => {
return (
<EBAAppBar
elevation={0}
position="fixed"
color="transparent"
enableColorOnDark={false}
rightChild={leadingComponent()}
leftChild={leadingComponent()}
/>
);
};TabMenu
Desarrollado por Dan Lopez
Opciones de TabMenu
| Nombre | Tipo | Valor por defecto | Descripcion | | ---------------- | ---------------- | ----------------- | ------------------------------------------------------------------------------------ | | currencies | [name, id] | null | propiedad para mostrar la lista de elementos en el componente | | tabInitial | number | 1 | propiedad que nos idica cual tab es la que se mostrara inicialmente | | colorSelect | string | "#276FB8" | propiedad para cambiar de color del texto del tab seleccionado | | colorIndicator | string | "#276FB8" | propiedad para cambiar de color del indicacodor del tab seleccionado | | width | string | number | "100%" | Define el tamaño del todo el tabmenu | | weightIndicator | string | "5px" | propiedad para cambiar de grosor del indicacodor del tab seleccionado | | paddingIndicator | string | "0px" | propiedad para cambiar el padding entre el texto y el indicador del tab seleccionado |
Ejemplo de TabMenu
import React, { FC } from 'react';
import EBATabMenu from '@exodus-bluego/templete/EBATabMenu';
const currencies = [
{
name: 'one',
id: 1,
},
{
name: 'two',
id: 2,
},
{
name: 'three',
id: 3,
},
{
name: 'four',
id: 4,
},
];
const MiComponente: React.FC = () => {
return <EBATabMenu currencies={currencies} />;
};DispatchInfoMenu
Desarrollado por Alfredo Zum
Link componente menu Link componente button Link componente textfield
Opciones del DispatchInfoMenu
| Nombre | Tipo | Valor por defecto | Descripcion | | --------------- | ----------------- | ----------------- | ---------------------------------------------------------------- | | children | ReactNode | null | propiedad para importar un componente donde se disparara el menu | | name | string | null | información del campo de nombre | | phone | string | null | información del campo de teléfono | | comment | string | null | información del campo de comentario | | onClick | MouseEventHandler | () => void | evento click que regresa la información del formulario | | onCancel | MouseEventHandler | () => void | evento cuando se cancela el formulario | | backgroundColor | string | "none" | propiedad para cambiar de color del fondo del componente | | borderColor | string | undefined | propiedad para cambiar de color label y el border del componente |
Ejemplo DispatchInfoMenu
import React, { FC } from 'react';
import EBADispatchInfoMenu from '@exodus-bluego/templete/EBADispatchInfoMenu';
const fnClick = () => console.log(`Se clickeo el boton darkmode`);
const fnCancel = () => console.log(`Se clickeo el boton notificacion`);
const MiComponenteAppBar: React.FC = () => {
return (
<EBADispatchInfoMenu name="Nombre" phone="Telefono" comment="Comentario" onClick={onClick} onCancel={onCancel}>
{<children /> | 'Abrir Formulario'}
</EBADispatchInfoMenu>
);
};StepperQuoteService
Desarrollado por Alfredo Zum
Opciones StepperQuoteService
| Nombre | Tipo | Valor por defecto | Descripcion | | ---------- | -------------------------------------- | -------------------------------- | ---------------------------------------------------- | | steps | array | [{ label | children | error }] | Propiedad para importar la lista de los steps | | activeStep | number | 0 | propiedad para el step activo | | completed | boolean | false | propiedad para marcar todos los step como completado | | maxWidth | string | number | null | propiedad para determinar el ancho del stepper | | expanded | boolean | true | propiedad para mostrar solo el step activo | | sx | object { label, number, numberCircle } | undefined | propiedad cambiar los estilos css de los labels |
Ejemplo StepperQuoteService
import React, { FC } from 'react';
import EBAStepperQuoteService from '@exodus-bluego/templete/EBAStepperQuoteService';
const MiComponenteStepperQuoteService: React.FC = () => {
const steps = [
{
children: <p>step 1</p>,
},
{
children: <p>step 2</p>,
},
{
children: <p>step 3</p>,
},
];
return <EBAStepperQuoteService steps={steps} />;
};StepperDragabbleQuote
Desarrollado por Alfredo Zum
Opciones StepperDragabbleQuote
| Nombre | Tipo | Valor por defecto | Descripcion | | ---------- | ------- | -------------------------------- | ---------------------------------------------------- | | steps | array | [{ label | children | error }] | Propiedad para importar la lista de los steps | | activeStep | number | 0 | propiedad para el step activo | | completed | boolean | false | propiedad para marcar todos los step como completado |
Ejemplo StepperDragabbleQuote
import React, { FC } from 'react';
import EBAStepperDraggableQuote from '@exodus-bluego/templete/EBAStepperDraggableQuote';
const MiComponenteStepperQuoteService: React.FC = () => {
const steps = [
{
id: 'step 1',
children: <p>step 1</p>,
error: false,
completed: false,
},
{
id: 'step 2',
children: <p>step 2</p>,
error: false,
completed: false,
},
{
id: 'step 3',
children: <p>step 3</p>,
error: false,
completed: false,
},
];
return <EBAStepperDraggableQuote steps={steps} />;
};StepperCreateService
Desarrollado por Alfredo Zum
Opciones StepperCreateService
| Nombre | Tipo | Valor por defecto | Descripcion | | -------------- | -------------------------------- | -------------------------------- | ---------------------------------------------------- | | steps | array | [{ label | children | error }] | Propiedad para importar la lista de los steps | | activeStep | number | 0 | propiedad para el step activo | | completed | boolean | false | propiedad para marcar todos los step como completado | | expanded | boolean | false | propiedad para mostrar solo el step activo | | sx | object { title, label, address } | undefined | propiedad cambiar los estilos css de los labels | | isDragDisabled | boolean | false | propiedad para deshabilitar el componente | | isDropDisabled | boolean | false | propiedad para deshabilitar el ordenamiento | | onChange | Change Event | () => void | evento que regresa la lista cada vez que se ordena |
Ejemplo StepperCreateService
import React, { FC } from 'react';
import EBAStepperCreateService from '@exodus-bluego/templete/EBAStepperCreateService';
const MiComponenteStepperCreateService: React.FC = () => {
const steps = [
{
title: 'Recolección',
label: 'Lugar de recolección',
address: 'Plaza aleira Avenida Juan Gil Preciado, parques Zapopan',
children: <p>step 1</p>,
},
{
title: 'Entrega 1',
label: 'Lugar de entrega',
address: 'Plaza aleira Avenida Juan Gil Preciado, parques Zapopan',
children: <p>step 2</p>,
},
{
title: 'Entrega 2',
label: 'Lugar de entrega',
address: 'Plaza aleira Avenida Juan Gil Preciado, parques Zapopan',
children: <p>step 3</p>,
},
];
return <EBAStepperCreateService steps={steps} />;
};NumberTextfield
Desarrollado por Alfredo Zum
Link componente textfield Link componente iconbutton
Opciones NumberTextfield
| Nombre | Tipo | Valor por defecto | Descripcion | | ---------------- | ----------------- | ----------------- | ----------------------------------------------------------------------- | | value | number | 0 | propiedad para el valor del textfield | | increase | number | 1 | propiedad para definir la cantidad con que se va a incrementar el valor | | decrease | number | -1 | propiedad para definir la cantidad con que se va a decrementar el valor | | showIconClean | boolean | false | Muestra un icono para limpiar el total a 0 | | isNegativeNumber | boolean | false | Permite numeros negativos | | error | boolean | false | Si es true se muestra como error el campo | | helperText | string | null | Permite agregar un texto de ayuda | | width | string | number | 50px | Define el tamaño del textfield | | size | small | medium | small | Define el ancho del componente | | onClick | ClickEventHandler | () => void | Evento click cuando se cambia el valor del textfield |
Ejemplo NumberTextfield
import React, { FC } from 'react';
import EBANumberTextfield from '@exodus-bluego/templete/EBANumberTextfield';
const MiComponenteNumberTextfield: React.FC = () => {
const fnClick = (value: number) => console.log(`El valor es ${value}`);
return <EBANumberTextfield value={0} onClick={fnClick} />;
};Modal
Desarrollado por Alfredo Zum
Opciones Modal
| Nombre | Tipo | Valor por defecto | Descripcion | | --------------- | ----------------- | ----------------- | ------------------------------------------------------- | | children | ReactNode | null | propiedad para agregar elementos al modal | | open | boolean | false | Si es {true}, se muestra el modal. | | width | string | auto | propiedad ancho del modal | | height | string | auto | propiedad alto del modal | | sx | object | {} | Propieda para definir estilos css | | color | string | lightMode | Define el color del componente ( lightMode o darkmode ) | | ariaTitle | string | empty | Arial para el titulo del modal | | ariaDescription | string | empty | Arial para la descripción del modal | | onClose | ClickCloseHandler | () => void | Evento que se dispara cuando el modal se oculta |
Ejemplo Modal
import React, { FC } from 'react';
import EBAModal from '@exodus-bluego/templete/EBAModal';
const fnCloseModal = (_, reason) => console.log(`Se cerro el modal mediante: ${reason}`);
const MiComponenteModal: React.FC = () => {
return (
<EBAModal open={true} width="600px" heigth="80vh" onClose={fnCloseModal}>
{<children /> | 'Modal componente'}
</EBAModal>
);
};Pagination
Desarrollado por Alfredo Zum
Opciones Pagination
| Nombre | Tipo | Valor por defecto | Descripcion | | ------------------- | -------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------- | | count | number | 1 | El número total de filas | | page | strnumbering | fixed | el indice de la pagina actual | | rowsPerPage | number | 10 | El número de filas por página | | rowsPerPageOptions | number[] | [10, 25, 50, 100] | Personaliza las opciones del campo de selección de filas por página | | showFirstButton | boolean | false | Si es {true}, muestra el botón de la primera página | | showLastButton | boolean | false | Si es {true}, muestra el botón de la ultima página | | color | string | inherit | Cambia el color de las letras | | onPageChange | ChangeEventHandler | () => void | Evento cuando se cambia la pagina | | onRowsPerPageChange | ChangeEventHandler | () => void | Evento cuando se cambia el numero de filas por pagina | | sx | object { selectLabelStyle, selectStyle, displayedRowsStyle, iconSelectStyle, disabledStyle } | undefined | permite definir estilos css |
Ejemplo Pagination
import React, { FC } from 'react';
import EBAPagination from '@exodus-bluego/templete/EBAPagination';
const onPageChange = (event, newPage) => console.log(`Se cambio a la pagina ${newPage}`);
const onRowsPerPageChange = event => console.log(`Se mostraran ${event.target.value} elementos por tabla`);
const MiComponenteAppBar: React.FC = () => {
return <Pagination count={100} page={0} rowsPerPage={10} onPageChange={onPageChange} onRowsPerPageChange={onRowsPerPageChange} />;
};Card
Desarrollado por Alfredo Zum
Opciones de Card
| Nombre | Tipo | Valor por defecto | Descripcion | | ----------------- | -------------------------------------------------------- | ----------------- | ------------------------------------------------------------ | | children | ReactNode | null | Propiedad para importar un componente en el resto de la card | | height | string | number | auto | Define el alto de la card | | minHeight | string | number | null | Define el alto minimo de la card | | maxHeight | string | number | null | Define el alto maximo de la card | | width | string | number | null | Define el ancho de la card | | minWidth | string | number | null | Define el ancho minimo de la card | | maxWidth | string | number | null | Define el ancho maximo de la card | | radius | square | rounded | round | circle | string | number | square | Define el radius del componente | | elevation | number | 1 | Profundidad de sombra | | variant | elevation | outlined | elevation | Define si el componente estara sombreado | | padding | string | number | '12px | Define el padding de la card | | enableColorOnDark | boolean | false | Cambia a darkmode cuando es true |
Ejemplo de Card
import React, { FC } from 'react';
import EBACard from '@exodus-bluego/templete/EBACard';
const MiComponenteCard: React.FC = () => {
return <EBACard>{<children /> | 'Card componente'}</EBACard>;
};DrawerPerfil
Desarrollado por Alfredo Zum
Link componente list Link componente modal
Opciones de DrawerPerfil
| Nombre | Tipo | Valor por defecto | Descripcion | | --------- | --------------------------- | ----------------- | --------------------------------------------- | | title | string | Mi cuenta | Titulo del componente | | listItems | [ title | page | active ] | [] | lista de los opciones del menu | | height | string | number | 480 | define el alto del menu | | onClick | ClickEventHandler | () => void | evento cuando se cambia una opcion del menu | | onLogout | CloseEventHandler | () => void | evento cuando se cierra la sesión del usuario |
Ejemplo de DrawerPerfil
import React, { FC } from 'react';
import EBADrawerPerfil from '@exodus-bluego/templete/DrawerPerfil';
const listItems = [
{
title: 'Mis datos',
page: '/my-data',
active: true,
},
{
title: 'Contacto',
page: '/contact',
},
];
const fnOnClick = (page: string, index: number) => console.log(`Se cambio a la pagina a ${page}`);
const fnOnLogout = () => console.log(`Se cerro el modal mediante la sesión`);
const MiComponenteDrawerPerfil: React.FC = () => {
return <EBADrawerPerfil listItems={listItems} onClick={fnOnClick} onLogout={fnOnLogout} />;
};DrawerMenu
Desarrollado por Alfredo Zum
Link componente listItem Link componente grid
Opciones DrawerMenu
| Nombre | Tipo | Valor por defecto | Descripcion | | ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------- | ------------------------------------------------------------------ | | open | boolean | true | Propiedad que define si se mostrar el menu | | variant | permanent | persistent | temporary | permanent | Propiedad que define si el menu sera permanente o se podra ocultar | | anchor | left | right | left | Muestra la posicion donde se vera el menu | | listItems | array[] | [] | lista de los opciones del menu | | showIcon | boolean | false | propiedad para mostrar texto o solo iconos | | enableColorOnDark | boolean | false | Cambia a darkmode cuando es true | | colorSelect | boolean | true | propiedad para cambiar de color el bg de la pagina activa | | marginVertical | number | 0 | propiedad para agregar el margen vertical | | onClick | ClickEventHandler | () => void | Evento click cuando se selecciona una pagina | | sx | object { drawerStyle, listItemStyle, listItemActiveStyle, listItemTextStyle, listItemTextActiveStyle } | undefined | permite definir estilos css |
Ejemplo DrawerMenu
import React, { FC } from 'react';
import EBADrawerMenu from '@exodus-bluego/templete/EBADrawerMenu';
import MUIHomeIcon from '@mui/icons-material/Home';
const fnClick = (page: string, index: number) => console.log(`Se cambio el valor a la pagina ${page}`);
const listItems = [
{
title: 'INICIO',
icon: <MUIHomeIcon />,
page: '/inicio',
active: true,
},
];
const MiComponenteDrawerMenu: React.FC = () => {
return <EBADrawerMenu listItems={listItems} onClick={fnClick} />;
};Tooltip
Desarrollado por Dan Lopez
Opciones del tooltip
| Nombre | Tipo | Valor por defecto | Descripcion | | -------- | --------- | ----------------- | --------------------------------------------------------------------------- | | children | ReactNode | null | propiedad para insertar un componente el cual queremos que tenga el tooltip | | title | string | null | propiedad para insertar el texto a mostrar como tooltip |
Ejemplo del tooltip
import React, { FC } from 'react';
import EBAToolTip from '@exodus-bluego/templete/EBAToolTip';
const MiComponente: React.FC = () => {
return (
<EBAToolTip title="tooltip del componente">
<span>componente</span>
</EBAToolTip>
);
};