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

Question

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

1. Я не могу найти какую-либо систему сетки, как мне найти макет?
2. Как мне реагировать?

У меня есть опыт работы с фундаментом Zurb, который имеет хорошо развитую систему сетки и реагирующие компоненты. Теперь вы знаете, откуда я.

Answer 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> 
    ) 
    } 

})