Como fazer para criar um Tab component (abas) no React ? Preciso organizar os atributos de um form já existente em abas (tabs).
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como fazer para criar um Tab component (abas) no React ? Preciso organizar os atributos de um form já existente em abas (tabs).
Opa, tudo bem? Cara teria como colocar o código que você tem para entender melhor a sua questão.
Oi Nathan, obrigado pela resposta ! Consegui ajuda para fazer esta tarefa, vou colocar uma parte do codigo aqui :
import { Button, Grid, Typography, AppBar, Tabs, Tab } from '@material-ui/core';
import { TabPanel } from '@material-ui/lab';
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { clearForm, clearErrors } from '../../actions/formActions';
import PrivateInputWrapper from '../../components/inputs/PrivateInputWrapper';
import useSubmitForm from '../../components/useSubmitForm';
import scheme from './scheme';
import schemetabs from './scheme-tabs';
import { useFormStyles } from './styles';
import { makeStyles } from '@material-ui/core/styles';
import axios from '../../utils/axios';
import { openSnackBar } from '../../actions/snackBarAction';
import { useHistory } from 'react-router-dom';
import DateFnsUtils from '@date-io/date-fns';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import Box from '@material-ui/core/Box';
import PropTypes from 'prop-types';
import './Formulario.css';
const Formulario = ({ template }) => {
const classes = useFormStyles();
const history = useHistory();
const submitForm = useSubmitForm();
const dispatch = useDispatch();
let [holidayList, setholidayList] = useState([]);
const handleSave = async values => {
try {
const id = template?.id;
scheme.concat(schemetabs);
const payload = createParameter(values, scheme);
console.log(payload);
if (id) {
await axios.put(`/v1/mdc/template/${id}`, payload);
} else {
await axios.post('/v1/mdc/template', payload);
}
dispatch(clearForm());
setholidayList([{ date: null }]);
dispatch(clearErrors());
dispatch(openSnackBar('Sucesso ao salvar', 'success'));
history.push('/templates');
} catch (e) {
dispatch(openSnackBar('Falha ao salvar', 'error'));
}
};