The blog from wilsonyiyi

blog's People

Contributors

Watchers

blog's Issues

【Antd源码系列】栅格系统

Row的实现简单的堆加了样式，样式规则row-{flex布局}-{flex水平/垂直方向}

render() {
    const { type, justify, align, className, ...others } = this.props;
    const classes = classNames({
      row: true,
      [`row-${type}`]: type,
      [`row-${type}-${justify}`]: justify,
      [`row-${type}-${align}`]: align,
      [className]: className,
    });
    return <div {...others} className={classes}>{ this.props.children }</div>;
 },

Col的实现。之前一致对pull和push的概念模糊，业务中使用率不高。刚想了下，如果都以左侧起点作为参照点，push即远离左侧，pull即拉向左侧（往左侧靠）。

 render() {
    const { span, order, offset, push, pull, className, ...others } = this.props;
    const classes = classNames({
      [`col-${span}`]: span,
      [`col-order-${order}`]: order,
      [`col-offset-${offset}`]: offset,
      [`col-push-${push}`]: push,
      [`col-pull-${pull}`]: pull,
      [className]: className,
    });
    return <div {...others} className={classes}>{ this.props.children }</div>;
},

核心样式代码，一个循环解决栅格系统的样式问题

.loop-grid-columns(@index) when (@index > 0) {
  .col-@{index} {
    width: percentage((@index / @grid-columns));
  }
  .col-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
  .col-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
  .col-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
  .col-order-@{index} {
    order: @index;
  }
  .loop-grid-columns((@index - 1));
}