Настройка внешнего вида метки RadioGroup в React - PullRequest
Новая
       45

Настройка внешнего вида метки RadioGroup в React

0 голосов
/ 03 августа 2020

Я использую material-ui RadioGroup. Индивидуальные метки назначаются динамически. В родительском компоненте я устанавливаю width = '50px'. Проблема в том, что если длина метки превышает 50 пикселей, растягивается вся ширина компонента. Я хотел бы предотвратить это и обрезать или обрезать метку и предоставить всплывающую подсказку с полным значением метки. Как мне это сделать в следующем коде?: 

const useStyles = makeStyles({
  root: {
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
  icon: {
    borderRadius: '50%',
    width: 16,
    height: 16,
    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
    backgroundColor: '#f5f8fa',
    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
    '$root.Mui-focusVisible &': {
      outline: '2px auto rgba(19,124,189,.6)',
      outlineOffset: 2,
    },
    'input:hover ~ &': {
      backgroundColor: '#ebf1f5',
    },
    'input:disabled ~ &': {
      boxShadow: 'none',
      background: 'rgba(206,217,224,.5)',
    },
  },
  checkedIcon: {
    backgroundColor: '#137cbd',
    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
    '&:before': {
      display: 'block',
      width: 16,
      height: 16,
      backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
      content: '""',
    },
    'input:hover ~ &': {
      backgroundColor: '#106ba3',
    },
  },
});

// Inspired by blueprintjs
function StyledRadio(props) {
  const classes = useStyles();

  return (
    <Radio
      className={classes.root}
      disableRipple
      color="default"
      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
      icon={<span className={classes.icon} />}
      {...props}
    />
  );
}

export default function CustomizedRadios(props) {
  
    const onChange = (event) => {
      console.log(event.target.value)
        props.onChange(event.target.value)
    }
    
  return (
    <FormControl component="fieldset">
      <FormLabel component="legend"></FormLabel>
      <RadioGroup defaultValue={props.currentBookmark} aria-label="gender" name="customized-radios" onChange={onChange}>
          {props.bookmarkList.map(function (bookmark, index)  {return (<FormControlLabel key={index} value={bookmark.name} checked={(bookmark.name == props.currentBookmark)? true:false} editable={1} control={<StyledRadio />} label={bookmark.name} /> )})}
      </RadioGroup>
    </FormControl>
  );
}

1 Ответ

0 голосов
/ 04 августа 2020

Поэкспериментировав в ожидании предложений, я пришел к такому подходу. Я применил форматирование стиля непосредственно к компоненту - чтобы обрезать текст, я использовал свойство переполнения и пробел «nowrap». Кроме того, с помощью всплывающей подсказки я поддерживаю видимость полной метки при наведении курсора на радио. Вот фрагмент кода: 

return (
    <FormControl style={{"float": 'left'}} component="fieldset">
      <FormLabel style={{"float": 'left'}} component="legend"></FormLabel>
      <RadioGroup style={{"float": 'left'}} defaultValue={props.currentBookmark} aria-label="gender" name="customized-radios" onChange={onChange}>
          {props.bookmarkList.map(function (bookmark, index)  {return (<Tooltip title={bookmark.name} placement="left"><FormControlLabel key={index} value={bookmark.name} checked={(bookmark.name == props.currentBookmark)? true:false} editable={1} style={{ "font-family": 'Calibri, sans-serif', "white-space": 'nowrap', float: "left", width:'90px', paddingLeft: "6px", paddingBottom:"0px",paddingTop:"0px", border: "0px", marginBottom: "0px", overflow:'crop'}} control={<StyledRadio />} label={<span style={{"font-family": 'Calibri, sans-serif'}}>{bookmark.name}</span>} /></Tooltip> )})}
      </RadioGroup>
    </FormControl>
  );
...