#javascript #reactjs #material-ui
Вопрос:
Мне нужен пример коллапса. пожалуйста, покажите мне простой материал-сворачивание пользовательского интерфейса.
lt;Button color="primary" startIcon={lt;LocalGroceryStoreOutlined /gt;}gt; Credit chargelt;/Buttongt; lt;Collapse gt;testlt;/Collapsegt; Ответ №1:
const { useState } = React; const { Button, Collapse, colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Box, SvgIcon, Link, } = MaterialUI; const Credit = (props) =gt; { const {id} = props; const [open, setOpen] = useState(false); return ( lt;div className="my-4"gt; lt;divgt; lt;Button color="primary" onClick={() =gt; setOpen(state =gt; !open)}gt; click melt;/Buttongt; lt;/divgt; lt;divgt; lt;Collapse in={open}gt;testlt;/Collapsegt; lt;/divgt; lt;/divgt; ); }; ReactDOM.render(lt;Credit /gt;, document.getElementById("root")); lt;bodygt; lt;div id="root"gt;lt;/divgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossOrigin="anonymous"gt;lt;/scriptgt; lt;script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossOrigin="anonymous"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700amp;display=swap" /gt; lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons" /gt; lt;/bodygt;