Как материал-пользовательский интерфейс стал отзывчивым

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

  1. я не могу найти никакой системы сетки, как мне перейти к компоновке?
  2. Как сделать его отзывчивым?
У меня есть опыт работы с фондом Zurb, который имеет хорошо развитую сеточную систему и отзывчивые компоненты. Теперь ты знаешь, куда я иду. от.
1 3
material-ui

1 ответ:

Да, я пропустил сеточную систему, когда впервые начал использовать Material-UI, но я привык к ее способу реагирования. Я подозреваю, что, поскольку он предпочитает встроенные стили, сеточный подход не был идеальным. Итак, вот как вы заставляете его реагировать на размер экрана: 

import React from 'react'

import {Mixins} from 'material-ui'
const {StylePropable, StyleResizable} = Mixins

export default React.createClass({

  // Boilerplate and React lifecycle methods

  propTypes: {
    onChangeMuiTheme: React.PropTypes.func,
  },

  contextTypes: {
    muiTheme: React.PropTypes.object,
  },

  mixins: [StylePropable, StyleResizable],

  getInitialState() {
    return {
    }
  },

  // Helpers

  getStyles() {
    let styles = {
      text: {
        fontSize: 12,
        color: this.context.muiTheme.rawTheme.palette.primary1Color
      }
    }

    // example of a screen-size sensitive style
    if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) {  // active for >= MEDIUM
      styles.text.fontSize = 20
    }

    return styles
  },

  render() {
    let styles = this.getStyles()
    return (
      <p style={styles.text}>Hello world!</p>
    )
  }

})
2