버튼을 사용하면 사용자는 한 번의 탭으로 작업을 수행하고 선택할 수 있습니다.
버튼(버튼)은 사용자가 수행할 수 있는 작업을 전달합니다. UI에 의해 아래와 같은 위치에 배치됩니다.
- 모달 창
- 양식
- 카드
- 도구 모음
- 기본버튼
버튼에는 3가지 변형이 있습니다. 텍스트(기본값), 포함됨, 그리고 설명되었습니다.
import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function BasicButtons() { return ( Text Contained Outlined ); } 텍스트 버튼
텍스트 버튼은 카드 대화 상자의 작업을 포함하여 덜 발음된 작업에 사용됩니다. 카드에서 텍스트 버튼은 카드 내용을 강조하는 데 도움이 됩니다.
import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function TextButtons() { return ( Primary Disabled Link ); } 포함된 버튼
포함된 버튼은 높이와 채우기를 사용하여 구별되며 강조점이 높습니다. 여기에는 앱에서 기본으로 사용되는 작업이 포함되어 있습니다.
Java 구문 분석 문자열을 int로
import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function ContainedButtons() { return ( Contained Disabled Link ); } Elevation 소품을 비활성화하여 고도를 제거할 수 있습니다.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } 윤곽선 버튼
윤곽선 버튼은 중간 강조 버튼입니다. 여기에는 필수 작업이 포함되어 있지만 앱의 주요 작업은 포함되어 있지 않습니다.
윤곽선 버튼은 버튼을 포함하는 하위 대안이거나 텍스트 버튼에 대한 강조가 높은 대안입니다.
import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function OutlinedButtons() { return ( Primary Disabled Link ); } 클릭 처리
모든 구성 요소는 클릭 시 루트에 적용되는 핸들러 DOM 요소.
{ alert('clicked'); }} > Click me 참고: 문서에서는 구성 요소의 API 섹션에 있는 기본 속성을 언급하지 않습니다.
색상
import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function ColorButtons() { return ( Secondary Success Error ); } 또한 기본 버튼 색상을 사용하여 사용자 정의를 추가하거나 필요하지 않은 색상을 비활성화할 수 있습니다.
크기
더 크거나 작은 버튼에 이 속성을 사용합니다.
업로드 버튼
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import PhotoCamera from '@mui/icons-material/PhotoCamera'; import Stack from '@mui/material/Stack'; const Input = styled('input')({ display: 'none', }); export default function UploadButtons() { return ( Upload ); } 라벨과 아이콘이 있는 버튼
때로는 일반 텍스트보다 로고가 더 쉽게 인식되므로 애플리케이션의 UX를 향상하기 위해 특정 버튼에 대한 아이콘이 필요할 수 있습니다.
예를 들어, 버튼을 삭제하려면 쓰레기통 아이콘으로 라벨을 지정해야 합니다.
import * as React from 'react'; import Button from '@mui/material/Button'; import DeleteIcon from '@mui/icons-material/Delete'; import SendIcon from '@mui/icons-material/Send'; import Stack from '@mui/material/Stack'; export default function IconLabelButtons() { return ( <button variant="outlined" starticon="{}"> Delete </button><button variant="contained" endicon="{}"> Send ); } </button> 아이콘 버튼
아이콘 버튼은 도구 모음과 앱 바에 있습니다. 아이콘은 선택 항목을 선택하거나 선택 취소할 수 있는 토글 버튼에 적합합니다. 예를 들어, 라벨에 항목을 추가하거나 제거하는 것입니다.
import * as React from 'react'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import DeleteIcon from '@mui/icons-material/Delete'; import AlarmIcon from '@mui/icons-material/Alarm'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; export default function IconButtons() { return ( ); } 크기
버튼의 아이콘을 더 크거나 작게 하려면 size 소품을 사용하세요.
import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import DeleteIcon from '@mui/icons-material/Delete'; export default function IconButtonSizes() { return ( ); } 그림 물감
테마 색상 팔레트를 구성 요소에 적용하려면 색상 소품을 사용하세요.
import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import Fingerprint from '@mui/icons-material/Fingerprint'; export default function IconButtonColors() { return ( ); } 맞춤화
다음은 구성요소를 사용자 정의하는 예입니다.
로딩 버튼
로딩 버튼은 로딩 상태를 표시하고 버튼의 상호 작용을 비활성화할 수 있습니다.
import * as React from 'react'; import LoadingButton from '@mui/lab/LoadingButton'; import SaveIcon from '@mui/icons-material/Save'; import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( Submit Fetch data <loadingbutton loading loadingposition="start" starticon="{}" variant="outlined"> Save ); } </loadingbutton> 관련 없는 위치 간의 전환을 보려면 로드 버튼을 전환하세요.
복잡한 버튼
아이콘 버튼, 텍스트 버튼, 포함된 버튼 및 플로팅 작업 버튼은 ButtonBase라는 단일 구성 요소에 내장되어 있습니다.
낮은 수준의 구성 요소를 사용하여 사용자 정의 상호 작용을 만들 수 있습니다.
타사 라우팅 라이브러리
서버로의 정확한 HTTP 이동 없이 클라이언트를 탐색하는 것은 독특한 사용 사례입니다. ButtonBase 구성 요소는 사용 사례를 처리하기 위한 구성 요소 속성을 제공합니다.
테두리
ButtonBase는 구성 요소 포인터 이벤트를 설정합니다. 없음; 비활성화된 커서가 나타나는 것을 방지하는 비활성화 버튼.
사용하고 싶다면 '허용되지 않음' , 두 가지 옵션이 있습니다:
CSS에만 해당: 비활성화된 상태에서 포인터 이벤트 스타일을 제거할 수 있습니다. 요소:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , 하지만,
포인터 이벤트를 추가해야 합니다: 없음; 비활성화된 요소에 대한 도구 설명을 표시해야 할 때.
자바 문자열.형식
버튼 요소 이외의 요소를 렌더링하면 커서가 변경되지 않습니다. 예를 들어, 링크 요소.
DOM 변경. 버튼을 래핑할 수 있습니다.
<span style="{{" cursor: 'not allowed' }}> disabled </span> 링크와 같은 모든 요소를 지원할 수 있습니다. 요소.
스타일이 없는
1000.00개 중 1개
구성 요소는 스타일이 지정되지 않은 버전과 함께 제공됩니다. 과도한 최적화를 수행하고 번들 크기를 줄이는 데 이상적입니다.
API
ReactJS에서 버튼 구성 요소를 사용하는 방법은 무엇입니까?
버튼을 사용하면 사용자는 한 번의 탭으로 작업을 수행하고 선택할 수 있습니다. 이 구성 요소는 React UI 콘텐츠에 사용할 수 있으며 통합이 매우 쉽습니다. 다음 접근 방식을 사용하면 ReactJS에서 버튼 구성 요소를 사용할 수 있습니다.
반응 앱 생성 및 모듈 설치:
1 단계: 아래 명령을 사용하여 React 애플리케이션을 빌드합니다.
npx create-react-app foldername
2 단계: 프로젝트 폴더를 생성한 후 주어진 명령을 사용하여 탐색할 폴더 이름을 지정합니다.
cd foldername
3단계: 설치하다 머티리얼 UI ReactJS 애플리케이션을 생성한 후 다음 명령을 사용하여 모듈을 실행합니다.
npm install @material-ui/core
프로젝트 구조: 다음과 같이 보일 것입니다.
프로젝트 구조
App.js: 이제 아래 코드를 작성해야 합니다. App.js 파일.
여기서 앱은 코드에서 작성한 기본 구성 요소입니다.
자바스크립트
import React from 'react'; import Button from '@material-ui/core/Button'; const App = () => { return ( <h3>How to use Button Component in ReactJS?</h3> <br> Default Button Primary Button Secondary Button Disabled Button Link Button ); } export default App; 애플리케이션 실행 단계:
프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.
npm start
산출: 이제 브라우저를 열고 다음으로 이동하세요. http://localhost:3000/. 아래 출력을 볼 수 있습니다.
