import { Component, OnInit } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';

@Component({
  selector: 'app-grid-layout',
  templateUrl: './grid-layout-demo.component.html',
  styleUrls: ['./grid-layout-demo.component.scss']
})
export class GridLayoutDemoComponent implements OnInit {

  rowProperties: Array<Propertiy> = [
    {
      name: 'type',
      value: "flex",
      type: '@Input()',
      description: '布局类型，默认flex'
    },
    {
      name: 'gutter',
      value: "number",
      type: '@Input()',
      description: '栅格间隔，默认16'
    },
    {
      name: 'justify',
      value: "'start' | 'end' | 'center' | 'around' | 'between'",
      type: '@Input()',
      description: '设置水平方向，默认start'
    },
    {
      name: 'align',
      value: '"start"|"center"|"end"',
      type: '@Input()',
      description: '设置垂直方向，默认start'
    }
  ];
  colProperties: Array<Propertiy> = [
    {
      name: 'span',
      value: "number",
      type: '@Input()',
      description: '设置占据的栅格数'
    },
    {
      name: 'offset',
      value: "number",
      type: '@Input()',
      description: '向右移动的栅格数'
    },
    {
      name: 'order',
      value: "number",
      type: '@Input()',
      description: '栅格顺序'
    },
    {
      name: 'xs',
      value: "number|object",
      type: '@Input()',
      description: '<576px 响应式栅格，可为栅格数或一个包含其他属性的对象'
    },
    {
      name: 'sm',
      value: "number|object",
      type: '@Output()',
      description: '>=576px 响应式栅格，可为栅格数或一个包含其他属性的对象'
    },
    {
      name: 'md',
      value: "number|object",
      type: '@Output()',
      description: '>=768 响应式栅格，可为栅格数或一个包含其他属性的对象'
    },
    {
      name: 'lg',
      value: "number|object",
      type: '@Output()',
      description: '>=960 响应式栅格，可为栅格数或一个包含其他属性的对象'
    },
    {
      name: 'xl',
      value: "number|object",
      type: '@Output()',
      description: '>=1200响应式栅格，可为栅格数或一个包含其他属性的对象'
    }
  ];
  constructor() { }

  ngOnInit() {
  }

}