Düğmeler, kullanıcıların tek bir dokunuşla işlem yapmasına ve seçim yapmasına olanak tanır.

Java karakterini tam sayıya dönüştürme

Bunlar (düğmeler) kullanıcıların gerçekleştirebileceği eylemleri iletir. Kullanıcı arayüzünüz tarafından aşağıdaki gibi yerlere yerleştirilir:

• Kalıcı pencereler
• Formlar
• Kartlar
• Araç Çubukları
• Temel Düğme

Düğmenin 3 çeşidi vardır: metin (varsayılan), içerilen, Ve özetlenen.

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

Metin düğmesi

Metin düğmeleri, kart diyaloglarındakiler de dahil olmak üzere daha az telaffuz edilen eylemler için kullanılır. Kartlarda metin düğmeleri, kart içeriğine vurgu yapmamıza yardımcı olacaktır.

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

İçerdiği Düğme

İçerdiği düğmeler yüksek vurgulu olup, yükseltme ve doldurma kullanımıyla ayırt edilir. Uygulamamızda birincil olarak kullanılan eylemleri içerir.

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

Yükseklik özelliğini devre dışı bırakarak yüksekliği kaldırabilirsiniz.

 import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } 

Özetlenen düğme

Ana hatlarıyla belirtilen düğmeler orta vurgulu düğmelerdir. Temel eylemleri içerirler ancak uygulamadaki ana eylemi içermezler.

Ana hatlarıyla belirtilen düğmeler, düğmeleri içeren alt alternatiftir veya metin düğmelerine göre daha yüksek vurgulu bir alternatiftir.

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

Tıklamaları yönetme

Tüm bileşenler bir kabul eder tıklamada köke uygulanan işleyici DOM eleman.

 { alert('clicked'); }} > Click me 

Not: Belgeler, bileşenlerin API bölümünde yerel desteklerden bahsetmekten kaçınır.

Renk

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

Ayrıca, varsayılan düğme renklerini kullanarak özel düğme renkleri ekleyebilir veya ihtiyacınız olmayanları devre dışı bırakabilirsiniz.

Boyut

Bu özelliği daha büyük veya daha küçük düğmeler için kullanın.

Yükle düğmesi

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

Etiketli ve simgeli düğmeler

Bazen, logoların düz metinden daha kolay olduğunu kabul ettiğimizden, uygulamanın kullanıcı deneyimini geliştirmek için belirli düğmeler için simgelere sahip olmak isteyebilirsiniz.

Örneğin, Düğmeyi silmek istiyorsak onu bir çöp kutusu simgesiyle etiketlemelisiniz.

 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>

Simge düğmesi

Simge düğmeleri araç çubuklarında ve uygulama çubuklarında bulunur. Simgeler, seçimlerin seçilmesine veya seçiminin kaldırılmasına olanak tanıyan geçiş düğmeleri için uygundur. Beğenin, etikete herhangi bir öğe ekleyin veya çıkarın.

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

Boyutlar

Düğmedeki daha büyük veya daha küçük simge için boyut desteğini kullanın.

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

Renkler

Tema renk paletini bileşene uygulamak için renk özelliğini kullanın.

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

Özelleştirme

Aşağıda bileşenimizi özelleştirme örnekleri verilmiştir.

alt çizgi

Yükleme düğmesi

Yükleme düğmeleri yükleme durumunu gösterebilir ve düğmenin etkileşimlerini devre dışı bırakabilir.

 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>

İlgisiz konumlar arasındaki geçişi görmek için yükleme düğmesini açın.

Karmaşık düğme

Simge düğmesi, Metin düğmesi, içerilen düğmeler ve kayan eylem düğmeleri, ButtonBase adı verilen tek bir bileşene yerleştirilmiştir.

Özel etkileşimler oluşturmak için daha düşük seviyeli bileşeni alabilirsiniz.

Üçüncü taraf Yönlendirme kitaplıkları

Sunucuya tam bir HTTP gezisi yapmadan istemcide gezinmek benzersiz bir kullanım durumudur. ButtonBase bileşeni, kullanım durumunu işlemek için bileşen özellikleri sağlar.

Kenarlıklar

ButtonBase bileşen pointer-events'i ayarlar: none; devre dışı bırakılmış imlecin görünmesini engelleyen devre dışı bırak Düğmesinde.

Kullanmak istiyorsanız 'izin verilmedi' , iki seçeneğiniz var:

Yalnızca CSS: İşaretçi olayı stilini devre dışı bırakılmış durumda kaldırabilirsiniz. eleman:

 .uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , 

Rağmen,

düşmanca arama

pointer-events eklemelisiniz: none; devre dışı bırakılan öğelerle ilgili araç ipuçlarını görüntülemeniz gerektiğinde.

Düğme öğesi dışında herhangi bir şeyi oluşturursanız imleç değişmeyecektir. Örneğin, bir bağlantı eleman.

DOM'da değişiklik. Düğmeyi sarabilirsiniz:

 <span style="{{" cursor: 'not allowed' }}> disabled </span> 

Herhangi bir öğeyi, örneğin bir bağlantıyı destekleyebilir eleman.

tarzsız

Bileşen, stillendirilmemiş sürümle birlikte gelir. Ağır optimizasyonlar yapmak ve paket boyutunu azaltmak için idealdir.

API'si

ReactJS'de düğme bileşeni nasıl kullanılır?

Düğmeler, kullanıcıların tek bir dokunuşla eylemlerini gerçekleştirmesine ve seçim yapmasına olanak tanır. Bu bileşen React UI içeriği için elimizde mevcuttur ve entegrasyonu oldukça kolaydır. Aşağıdaki yaklaşımı kullanarak ReactJS'de buton bileşenini kullanabiliriz.

Reaksiyon uygulaması oluşturma ve modülleri yükleme:

Aşama 1: Aşağıdaki komutu kullanarak bir React uygulaması oluşturun:

 npx create-react-app foldername 

Adım 2: Proje klasörünü ve klasörün adını oluşturduktan sonra verilen komutu kullanarak içinde gezinebilirsiniz:

 cd foldername 

Aşama 3: Yükle Malzeme Kullanıcı Arayüzü ReactJS uygulamasını oluşturduktan sonra aşağıdaki komutu kullanarak modül:

 npm install @material-ui/core 

Proje Yapısı: Aşağıdaki gibi görünecektir.

proje yapısı

App.js: Şimdi aşağıdaki kodu yazmanız gerekiyor. App.js dosya.

Burada Uygulama, kodumuzda yazdığımız varsayılan bileşendir.

alfa beta budama örneği

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; 

Uygulamayı çalıştırma adımları:

Projenin kök dizinindeki komutu kullanarak uygulamayı çalıştırın:

 npm start 

Çıktı: Şimdi tarayıcınızı açın ve şuraya gidin: http://localhost:3000/. Aşağıdaki çıktıyı görebilirsiniz: