El objetivo de este repositorio con componentes customizados es facilitar el desarrollo de aplicaciones web/movil en un corto periodo de tiempo.
Tabla de Contenido
### Requisitos
Esta librería está desarrollada con tailwind, para su correcto funcionamiento es necesario tener instalada esta librería.
```sh
npm install tailwindcss autoprefixer postcss-cli
```
### Instalación
Usando NPM:
```sh
npm i --save @symlab/react-ui
```
Usando Yarn
```sh
yarn add @symlab/react-ui
```
### Componentes de tabla
A continuación se mencionan los componentes existentes en la actualidad con soporte de formulario:
| nombre | componente | soporte ligth/dark | atributos |
| :--- | :--- | :---: | :---: |
| Table | `
## Uso
### Configurar tailwind
Para configurar nuestra librería en su proyecto, debemos dirigirnos al archivo de configuración de tailwind **tailwind.config**
En caso de no contar con este archivo, debemos crearlo
```sh
npx tailwindcss init
```
Obtendremos lo siguiente
```js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
```
Dentro de esta configuración básica que nos genera tailwind, agregaremos las siguientes líneas
```js
module.exports = {
content: ['./node_modules/@symlab/react-ui/dist/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms'), require('./node_modules/@symlab/react-ui/dist/tailwind.config.cjs')],
}
```
Listo, ahora ya podemos trabajar con los componentes.
### Paleta de colores
Los componentes se desarrollaron en base a colores predefinidos, para conocer cuáles son, existe el componente ``
Importe el componente
```jsx
import { Pallete } from "@symlab/react-ui";
function Component() {
return (
<>
);
}
export default Component;
```
### Configurar la paleta de colores
Para realizar un cambio customizado en los colores, es necesario fijarse en la paleta de colores su brand (todos con prefijo `sym-`).
Por ejemplo, el brand `sym-primary`, su valor por defecto es el color primario de symlab. Si lo deseamos cambiar, es necesario usar este brand y sustituir su valor.
Esta configuración es posible dentro del archivo de configuración de tailwind.
Sigue estos pasos:
1. Ir al archivo `docs/tailwind.config.cjs`
2. Dentro de esa configuración, buscaremos el atributo extend
```js
theme: {
extend: {
....
```
3. Sobreescribir el valor del brand sym-primary
```js
module.exports = {
content: ['./node_modules/@symlab/react-ui/dist/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'sym-primary': '#9474ff', // <-- actualizamos el valor del brand sym-primary
}
},
},
plugins: [require('@tailwindcss/forms'), require('./node_modules/@symlab/react-ui/dist/tailwind.config.cjs')],
}
```
Listo!
### Componente Loading
Importaremos el componente desde nuestro archivo
```js
import { Loading } from '@symlab/react-ui';
```
Mandaremos por el children lo que se mostrará dentro del Loading
```js
import { Loading } from '@symlab/react-ui';
export default function LoadingPage() {
return (
<>
);
}
```
Si lo que buscamos es cambiar el fondo de nuestro loading a un color rojo, lo podremos hacer de la siguiente manera:
Agregaremos el atributo className en Loading
```js
Nuevo loading
```
```js
import { Loading } from '@symlab/react-ui';
export default function LoadingPage() {
return (
<>
// <-- atributo className
);
}
```
Y listo!
### Componente logo
Este componente se encuentra dentro de los componentes de navegación, lo usaremos dentro del componente `` para mayor ilustración
1. Importar los componentes
```js
import { Logo, NavBar} from '@symlab/react-ui';
```
2. Trabajaremos con Navbar para mostrar la barra de navegación y dentro de sus atributos enviaremos al logo
```js
import { Logo, NavBar} from '@symlab/react-ui';
const LogoElement = () => (
);
export default function Navbar() {
return (
<>
}
>
);
}
```
Y listo!
### Configurar la paleta de colores
Para realizar un cambio customizado en los colores, es necesario fijarse en la paleta de colores su brand (todos con prefijo `sym-`).
Por ejemplo, el brand `sym-primary`, su valor por defecto es el color primario de symlab. Si lo deseamos cambiar, es necesario usar este brand y sustituir su valor.
Esta configuración es posible dentro del archivo de configuración de tailwind.
Sigue estos pasos:
1. Ir al archivo `docs/tailwind.config.cjs`
2. Dentro de esa configuración, buscaremos el atributo extend
```js
theme: {
extend: {
....
```
3. Sobreescribir el valor del brand sym-primary
```js
module.exports = {
content: ['./node_modules/@symlab/react-ui/dist/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'sym-primary': '#9474ff', // <-- actualizamos el valor del brand sym-primary
}
},
},
plugins: [require('@tailwindcss/forms'), require('./node_modules/@symlab/react-ui/dist/tailwind.config.cjs')],
}
```
Listo!
### Componente Loading
Importaremos el componente desde nuestro archivo
```js
import { Loading } from '@symlab/react-ui';
```
Mandaremos por el children lo que se mostrará dentro del Loading
```js
import { Loading } from '@symlab/react-ui';
export default function LoadingPage() {
return (
<>