/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; import { Helmet } from 'react-helmet'; import './radio-button-group.css'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; interface RadioProps { value: string; } const Details: React.FC<{}> = () => { const [selectedValue, setSelectedValue] = React.useState('1'); const Radio: React.FC = ({ value, children }) => { const click = () => setSelectedValue(value); return ( ); }; return (
...
`} css={` .container { display: flex; /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; height: 32px; } .container__label { /* Center the content */ align-items: center; display: inline-flex; border-right: 1px solid rgba(0, 0, 0, 0.3); padding: 8px; /* For not selected radio */ background-color: transparent; color: #CCC; } .container__label:last-child { /* Remove the right border from the last label */ border-right-color: transparent; } .container__label--selected { /* For selected radio */ background-color: #00449E; color: #FFF; } .container__input { /* Hide it */ display: none; } `} >
); }; export default Details;