graceUI学习笔记- 栅格grid和列表list

1. 图文栅格

grace-grids => grace-grids-item => grace-grid-icon + grace-grid-text

<view class="grace-grids">
      <view class="grace-grids-item">
          <text class="grace-grid-icon grace-icons icon-arrow-left"></text>
          <text class="grace-grid-text">arrow-left</text>
      </view>
      <view class="grace-grids-item">
          <text class="grace-grid-icon grace-icons icon-arrow-right"></text>
          <text class="grace-grid-text">arrow-right</text>
      </view>
      <view class="grace-grids-item">
          <text class="grace-grid-icon grace-icons icon-arrow-up"></text>
          <text class="grace-grid-text">arrow-up</text>
      </view>
      <view class="grace-grids-item">
          <text class="grace-grid-icon grace-icons icon-arrow-down"></text>
          <text class="grace-grid-text">arrow-down</text>
      </view>
</view>

格子效果（会自动换行）

2.普通列表

分为3个部分：左侧图标(grace-list-image)，主体(grace-list-body)，右侧按钮(grace-list-arrow-right)
主体分为2个部分：标题(grace-list-title)和主体文字(grace-list-body-text)
标题分为2个部分：主文字(grace-list-title-text)和副文字(grace-list-title-desc)

grace-list => grace-list-items => grace-list-image + grace-list-body + grace-list-arrow-right

<view class="grace-list">
    <view class="grace-list-items">
        <image class="grace-list-image"></image>
        <view class="grace-list-body">
              <view class="grace-list-title">
                    <text class="grace-list-title-text">我是标题</text>
                    <text class="grace-list-title-desc">标题描述信息</text>
              </view>
              <text class="grace-list-body-text">描述信息</text>
        </view>
        <text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
    </view>
</view>

普通列表（图片可选）