Какова цель логических значений для свойств точки останова (xs, sm, md) в material-ui

Я изо всех сил пытаюсь найти документацию (или результаты путем экспериментов с кодом), для чего нужны логические значения в качестве значений для реквизитов точки останова для компонента сетки в material-ui. Просмотр документации по API-интерфейсу показывает, что логические значения являются допустимыми значениями для свойств точки останова lg, md, sm. , xl, xs.

Я понимаю, что если я скажу sm={3}, я получу компонент, который изменится, чтобы занять 3 единицы столбца сетки, когда ширина отображения увеличится за пределы точки останова xs (600 пикселей), но я понятия не имею о передаче логического значения в качестве значения:

Например, какова причина предоставления xs={true} или md={false} be? И как я мог узнать причину самостоятельно? (есть ли какие-то фундаментальные знания, которых мне не хватает?)


reactjs material-ui code-documentation
person 45674567    schedule 11.02.2019    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Например, какова причина предоставления xs = {true} или md = {false} be? И как я мог узнать причину самостоятельно? (есть ли какие-то фундаментальные знания, которых мне не хватает?)

По правде говоря, библиотеки и фреймворки в основном придерживаются мнения. Невозможно легко определить причины каждого решения, если они сами не объяснят это. В то время как в некоторых случаях рассуждение может быть выведено с умеренными усилиями, другие случаи слишком узки, чтобы в большинстве случаев требовать подробного объяснения. Вы можете и должны открыть проблему на странице проекта на github (сначала выполните поиск!), Чтобы узнать логику, стоящую за ней, что часто может привести к улучшениям с точки зрения документации.

Теперь о причинах этого. Это требует некоторого изучения исходного кода, который может быть обнаружен / пропущен в зависимости от того, насколько хорошо вы понимаете язык и насколько хорошо они его написали.

Внизу страницы написано:

... < strong> реализация компонента для более подробной информации ...

После перехода по ссылке показано, как задаются стили в зависимости от переданного значения. Для true это будет

if (size === true) {
  // For the auto layouting
  styles[key] = {
    flexBasis: 0,
    flexGrow: 1,
    maxWidth: '100%',
  };
  return;
}

и false не покрывается, что, вероятно, означает, что это помешает полностью применить эти стили.

Надеюсь, это поможет!

person Keno Clayton    schedule 11.02.2019
comment
Спасибо! Я даже не заметил эту ссылку на реализацию, то, что я пробовал, проходил через git вину на изменения документации, чтобы увидеть, есть ли какие-либо проницательные комментарии к фиксации, но не нашел ни одного - person 45674567; 11.02.2019

arrow_upward
2
arrow_downward

Согласно документации

  • xs, extra-small: 0 пикселей или больше
  • sm, small: 600 пикселей или больше
  • md, medium: 960 пикселей или больше
  • lg, large: 1280 пикселей или больше
  • xl, очень большой: 1920 пикселей или больше

Ссылка https://material-ui.com/layout/breakpoints/

Например, какова причина предоставления xs = {true} или md = {false} be? И как я мог узнать причину самостоятельно? (есть ли какие-то фундаментальные знания, которых мне не хватает?)

Это xs={true} означает, что столбец займет такое же пространство, что и в данной строке. так что

<Grid container spacing={24}>
  <Grid item xs>
    <Paper className={classes.paper}>xs</Paper>
  </Grid>
  <Grid item xs>
    <Paper className={classes.paper}>xs</Paper>
  </Grid>
  <Grid item xs>
    <Paper className={classes.paper}>xs</Paper>
  </Grid>
</Grid>

Это будет иметь 3 равные сетки.

Ссылка https://material-ui.com/layout/grid/#auto-layout

person Adeel Imran    schedule 11.02.2019