0
165
Visualizaçõesclick anywhere in Card on a Antd radio button wrapped inside a Card to change border and background on select
I have a antd radio button that I wrapped it around a card to make it more custom. What I am trying to do is be able to click anywhere and make the radio button selectable as well as change the card border-color and background color when selected Here is my code.
<Card hoverable style={{ borderRadius: '10px', borderColor: 'lightgray'}} bordered>
<Meta
style={{float: 'left'}}
avatar={<Avatar shape="square" src='/resources/images/document.png' />}
/>
<Radio value="Subscription Docs">Subscription Docs</Radio>
</Card>
any ideas on the best approach?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Check the following code using state to change the css class
Demo.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Card, Radio, Avatar } from 'antd';
const Demo = () => {
const { Meta } = Card;
const [cardselected, setCardselected] = useState(false);
const onChange = (e) => {
console.log(e.target.checked);
if (e.target.checked) {
setCardselected(true);
} else {
setCardselected(false);
}
};
return (
<Card
hoverable
className={cardselected ? 'card-selected' : 'card-notselected'}
bordered
>
<Meta
style={{ float: 'left' }}
avatar={<Avatar shape="square" src="/resources/images/document.png" />}
/>
<Radio value={cardselected} onChange={onChange}>
Subscription Docs
</Radio>
</Card>
);
};
index.css
.card-notselected {
border-radius: 10px;
border-color: lightgray;
}
.card-selected {
border-radius: 10px;
background-color: #575ae9;
border-color: #2412c7;
}
When radio button is not selected
When radio button is selected
·
Juan Pablo Isaza
Relatório
Responde à pergunta