Как правильно размещать в Famo.us/ знаменитые виды?

Question

Я использую meteor .js и gadicohen:famous-viewsmjn:famous и пакеты.

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

Будет ли лучший способ справиться с этим, чтобы создать пользовательский вид сетки и добавить поверхности с явными размерами, происхождением и выравниванием свойств? Могут ли поверхности стилизоваться по правилам CSS nth-child?

Answer 1

Вы можете использовать 2 GridLayout's. Один снаружи, который имеет 2 горизонтальные ячейки, и один на второй ячейке, который имеет 2 вертикальные ячейки. Как это:

var horzGrid = new GridLayout({ 
    dimensions: [2, 1] 
}); 
var vertGrid = new GridLayout({ 
    dimensions: [1, 2] 
}); 
vertGrid.sequenceFrom([ 
    new Surface({properties: {backgroundColor: 'blue'}}), 
    new Surface({properties: {backgroundColor: 'red'}}) 
]); 
horzGrid.sequenceFrom([ 
    new Surface({properties: {backgroundColor: 'gray'}}), 
    vertGrid 
]); 
this.add(horzGrid); // add to parent view 

Answer 2

Рабочий код, основанный на шаблоне имени nestedGridProjectLayout

Template.nestedGridProjectLayout.rendered = function() { 
    var Engine = famous.core.Engine; 
    var Surface = famous.core.Surface; 
    var GridLayout = famous.views.GridLayout; 

    var context = Engine.createContext(); 

    var innerGrid = new GridLayout({ 
     dimensions: [1, 2] 
    }); 

    innerGrid.sequenceFrom([ 
     new Surface({ 
      properties: { 
       backgroundColor: 'blue' 
      } 
     }), 
     new Surface({ 
      properties: { 
       backgroundColor: 'red' 
      } 
     }) 
    ]); 

    var outerGrid = new GridLayout({ 
     dimensions: [2, 1] 
    }); 

    outerGridContents = []; 
    outerGridContents.push(new Surface({ 
      properties: { 
       backgroundColor: 'gray' 
      } 
     }) 
); 
    outerGrid.sequenceFrom(outerGridContents); 

    outerGridContents[1] = innerGrid; 

    context.add(outerGrid); 
}