toggle button react ile nasıl olur

Question

Merhaba, böyle bi toggle yapmaya çalışıyorum. buttonda olabilir ama tam nasıl yapacağımı anlamadım button ile. tailwind ile yaptım ama bu sefer tailwind kendi renklerini kullandırtmaya çalıştığı için toggle yapısı bozuluyor renkleri kaldırınca. çıkamadım işin içinden. nasıl yapabilirim sizce ?

canyucel · Answer

Birisi active olunca olan classlara sahipken diğeri olmayacak. Diğerine tıkladığında ise olanları ilkinden kaldırıp tıklanana ekleyecek yani. Yaşadığınız sorunu detaylı yazarsanız daha iyi yönlendirme sağlayabiliriz.

PremiumTR · Answer

import React, { useState } from 'react';

function ToggleButton() {
const [isToggled, setIsToggled] = useState(false);

const handleToggle = () => {
setIsToggled(!isToggled);
};

return (
<button onClick={handleToggle}>
{isToggled ? 'Açık' : 'Kapalı'}
</button>
);
}

export default ToggleButton;

tolgahanbora · Answer

canyucel adlı üyeden alıntı: mesajı görüntüle

Birisi active olunca olan classlara sahipken diğeri olmayacak. Diğerine tıkladığında ise olanları ilkinden kaldırıp tıklanana ekleyecek yani. Yaşadığınız sorunu detaylı yazarsanız daha iyi yönlendirme sağlayabiliriz.

Tailwind buna izin vermiyor. default css ile yapmaya çalışıyorum

PremiumTR adlı üyeden alıntı: mesajı görüntüle

import React, { useState } from 'react';

function ToggleButton() {
const [isToggled, setIsToggled] = useState(false);

const handleToggle = () => {
setIsToggled(!isToggled);
};

return (
<button onClick={handleToggle}>
{isToggled ? 'Açık' : 'Kapalı'}
</button>
);
}

export default ToggleButton;

gönderdiğiniz şey düz toggle ? mesele on konumu off yapmak değil. tasarım olarak bunu yapmak

canyucel · Answer

Misafir adlı üyeden alıntı:						mesajı görüntüle									Tailwind buna izin vermiyor. default css ile yapmaya çalışıyorum

gönderdiğiniz şey düz toggle ? mesele on konumu off yapmak değil. tasarım olarak bunu yapmak 		React kullanıyorsanız state ile classları toggle edebilirsiniz. Normal cssde ise zaten checkbox üzerinden ilerlersiniz, pek bir farkı olmaz.