Какова цель булевых значений для реквизита точки останова (xs, sm, md ...) в material-ui - PullRequest
Новая
       8

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

0 голосов
/ 11 февраля 2019

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

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

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

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

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

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

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

В нижней части страницы написано:

... реализация компонента для получения более подробной информации ...

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

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

и false не охватывается, что, вероятно, означает, что это предотвратит полное применение этих стилей.

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

0 голосов
/ 11 февраля 2019

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

  • xs, сверхмалый: 0 пикселей или больше
  • см, маленький: 600 пикселей или больше
  • md, средний: 960 пикселей илибольше
  • lg, больше: 1280px или больше
  • xl, очень большое: 1920px или больше

Ссылка https://material -ui.com /макет / точки останова /

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

Этот 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

...