react-matecu
v0.0.4
Published
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) Libreria con complementos y utilidades para el desarrollo de aps
Downloads
5
Readme
React-Matecu
Libreria con complementos y utilidades para el desarrollo de aps
Instalar
npm install react-matecu
Agregar estilos para la fuente de los iconos
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>
MatecuTopbarLayout
Crea la estructura para una página que contiene un topbar en posición fija a la que se le pueden agregar botones de acciones, titulo y buscador.
El contenido de la página tiene una función que se puede llamar para realizar un desplazamiento hacia arriba.
Ejemplo básico
import { useRef, useState } from "react";
import { MatecuTopbarLayout } from "react-matecu";
import { MatecuTopbarHeaderRow } from "react-matecu";
import { MatecuTopbarHeaderColumn } from "react-matecu";
import { MatecuTopbarAction } from "react-matecu";
import { MatecuTopbarFab } from "react-matecu";
import { MatecuTopbarSearch } from "react-matecu";
import { MatecuTopbarTitle } from "react-matecu";
import { MatecuTopbarBody } from "react-matecu";
function MatecuLayout() {
const searchValueChangesHandler = (value) => {
console.log("Buscando valor", value);
};
const tobarLayout = useRef();
const [mobileStyle, setMobileStyle] = useState(false);
const resize = (width) => {
console.log("resizing", width);
};
return (
<>
<MatecuTopbarLayout
resizeHandler={resize}
ref={tobarLayout}
prominent={false}
mobileStyleHandler={setMobileStyle}
firstRow={
<MatecuTopbarHeaderRow
leftColumn={
<MatecuTopbarHeaderColumn>
<MatecuTopbarAction>
<small>NAV</small>
</MatecuTopbarAction>
<MatecuTopbarFab mobileStyle={mobileStyle}>
<button
className="fabbtn"
style={{
width: "50px",
height: "50px",
borderRadius: "50%",
}}
>
ADD
</button>
</MatecuTopbarFab>
<MatecuTopbarTitle>Título de la página</MatecuTopbarTitle>
</MatecuTopbarHeaderColumn>
}
rightColumn={
<MatecuTopbarHeaderColumn>
<MatecuTopbarSearch
mobileStyle={mobileStyle}
placeholder="Buscar..."
valueChangesHandler={searchValueChangesHandler}
clearIcon={"X"}
searchIcon={"O\\"}
/>
<MatecuTopbarAction>
<small>MENU</small>
</MatecuTopbarAction>
</MatecuTopbarHeaderColumn>
}
/>
}
body={
<MatecuTopbarBody>
Contenido de la página...
<button onClick={() => tobarLayout.current.scrollTop()}>
Scroll
</button>
</MatecuTopbarBody>
}
></MatecuTopbarLayout>
</>
);
}
export default MatecuLayout;
Componentes
MatecuTopbarLayout:
Componente principal
Variables de estilos
- --mtb-border : Borde
- --mtb-margin : Margen
- --mtb-width : Ancho
- --mtb-height : Alto
- --mtb-primary-color : Color principal (Color de la barra)
- --mtb-bar-height : Alto de la barra
- --mtb-bar-prominent-height : Alto de la barra en modo prominente
Properties
- prominent : Valor boolean que indica si la barra es prominente
- mobileWidth: Valor numérico que indica el ancho máximo que debe considerarse para aplicar estilos para dispositivos móviles
- mobileStyle: Indica si se deben aplicar estilos para dispositivos móviles
Forwards Functions
- scrollTop : Funcion que se puede llamar desde el componente padre y hace scroll del contenido hacia la parte superior
handlers
- resizeHandler: Evento que se emite cuando se redimenciona el componente y retorna el nuevo valor del ancho.
- mobileStyleHandler: Evento que se emite cuando se redimenciona el componente e indica si se deben aplicar estilos para dispositivos móviles.
MatecuTopbarHeaderRow
Crea una fila para agregar contenido en el encabezado, pueden agregarse hasta 2 filas y es necesario agregarlos en MatecuTopLayout con las propiedades firstRow o secondRow
Variables de estilos
- --mtb-row-padding
- --mtb-row-margin
- --mtb-row-width
MatecuTopbarHeaderColumn
Crea una columna para agregar contenido a una fila del encabezado es necesario agregar en el componente MatecuTopbarHeaderRow con las propiedades leftColumn o rightColumn
MatecuTopbarAction
Crea un contenedor para agregar acciones como links o botones preferentemente en formato de iconos
Variables de estilos
- --mtb-action-padding
- --mtb-action-margin
MatecuTopbarFab
Crea un contenedor para agregar un boton (FAB)
Variables de estilos
--mtb-fab-mobile-bottom-position : Posición relativa a la parte inferior del componente pricipal que se aplica cuando estan activos los estilos para dispositivos móviles.
--mtb-fab-mobile-right-position: Posición relativa a la parte inferior del componente MatecuTopbarLayout
Propiedades
- mobileStyle: Valor boolaneo que indica si se ajustan los estilos para dispositivos móviles
- display: Valor boolean que indica si se debe mostrar el componente
MatecuTopbarSearch
Crea un campo de texto para hacer búsquedas
Handlers
- valueChangesHandler: Emite un evento con el valor del texto ingresado en el campo de búsqueda
Propiedades
- mobileStyle: Valor boolaneo que indica si se ajustan los estilos para dispositivos móviles
- placeholder: Valor del Placeholder del campo de búsqueda
- value: Especifica el valor de la búsqueda
- display: Valor boolean que indica si se debe mostrar el componente
Iconos
Se pueden reemplazar los iconos por unos personalizados usando las propiedades "searchIcon" y "clearIcon" para agregar los componentes que los van a sustituir
MatecuTopbarTitle
Crea un contenedor para agregar un título a la página.
Variables de estilos
- --mtb-title-padding
- --mtb-title-margin
MatecuTopbarBody
Crea un contenedor para agregar el contenido de la página
Variables de estilos
--mtb-body-padding: Padding para el contenido --mtb-body-background: Fondo del contenido; --mtb-body-padding-button: Padding inferior (Es utilizado para asignar un espacio al Botón principal (FAB) cuando tiene asignados los estilos para dispositivos móviles)