הלחצנים מאפשרים למשתמשים לבצע פעולות ולבצע בחירות בלחיצה אחת.

הם (כפתורים) מתקשרים את הפעולות שמשתמשים יכולים לבצע. הוא ממוקם על ידי ממשק המשתמש שלך במקומות כמו להלן:

• חלונות מודאליים
• טפסים
• קלפים
• סרגלי כלים
• כפתור בסיסי

הכפתור מגיע ב-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 ); } 

כפתור מכיל

הלחצנים הכלולים הם בעלי דגש גבוה, מובחנים בשימוש בהגבהה ובמילוי. הוא מכיל פעולות המשמשות בעיקר באפליקציה שלנו.

 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 ); } 

אתה יכול להסיר את ההגבהה עם השבתת אבזר הגובה.

 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 &apos;react&apos;; import Button from &apos;@mui/material/Button&apos;; import DeleteIcon from &apos;@mui/icons-material/Delete&apos;; import SendIcon from &apos;@mui/icons-material/Send&apos;; import Stack from &apos;@mui/material/Stack&apos;; 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 ( ); } 

מידות

השתמש באביזר הגודל עבור סמל גדול או קטן יותר בלחצן.

 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 &apos;react&apos;; import LoadingButton from &apos;@mui/lab/LoadingButton&apos;; import SaveIcon from &apos;@mui/icons-material/Save&apos;; import Stack from &apos;@mui/material/Stack&apos;; 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> 

זה יכול לתמוך בכל אלמנט, למשל, קישור אֵלֵמֶנט.

לא מעוצב

הרכיב יגיע עם הגרסה הלא מעוצבת. זה אידיאלי לביצוע אופטימיזציות כבדות והקטנת גודל החבילה.

ממשק API

כיצד להשתמש ברכיב הכפתור ב-ReactJS?

הלחצנים מאפשרים למשתמשים לבצע את הפעולות שלהם ולבצע בחירות בלחיצה אחת. רכיב זה זמין לנו עבור תוכן ממשק המשתמש של React, וקל מאוד לשלב אותו. אנו יכולים להשתמש ברכיב הכפתור ב-ReactJS על ידי שימוש בגישה הבאה.

יצירת אפליקציית React והתקנת מודולים:

שלב 1: בנו אפליקציית React באמצעות הפקודה הבאה:

 npx create-react-app foldername 

שלב 2: לאחר יצירת תיקיית הפרויקט, ושם התיקיה כדי לנווט בה באמצעות הפקודה הנתונה:

 cd foldername 

שלב 3: התקן את חומר-UI מודול באמצעות הפקודה הבאה, לאחר יצירת יישום ReactJS:

משחקי imessage עם אנדרואיד

 npm install @material-ui/core 

מבנה הפרויקט: זה ייראה כמו הבא.

מבנה הפרויקט

App.js: כעת, עליך לכתוב את הקוד שלהלן ב- App.js קוֹבֶץ.

כאן, האפליקציה היא רכיב ברירת המחדל שבו כתבנו בקוד שלנו.

JavaScript

 import React from &apos;react&apos;; import Button from &apos;@material-ui/core/Button&apos;; const App = () =&gt; { 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/. אתה יכול לראות את הפלט שלהלן: