跳到主要内容

Layout 布局

介绍​

页面栅格布局。

用法​

基础布局​

<OsRow>
  <OsCol span='24'>
    <View className='col-content col-content-light'>span:24</View>
  </OsCol>
</OsRow>

<OsRow>
  <OsCol span='12'>
    <View className='col-content col-content-light'>span:12</View>
  </OsCol>
  <OsCol span='12'>
    <View className='col-content'>span:12</View>
  </OsCol>
</OsRow>

<OsRow>
  <OsCol span='8' offset='8'>
    <View className='col-content col-content-light'>offset:8 span:8</View>
  </OsCol>
  <OsCol span='8'>
    <View className='col-content'>span:8</View>
  </OsCol>
  <OsCol span='8'>
    <View className='col-content'>span:8</View>
  </OsCol>
</OsRow>

<OsRow>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
</OsRow>

scss

.row {
  margin-bottom: 24px;
}

.col-content {
  height: 70px;
  line-height: 70px;
  color: #fff;
  text-align: center;
  background: #d9d9d9;
  font-size: 28px;
  border-radius: 8px;

  &--bottom20 {
    margin-bottom: 20px;
  }

  &-light {
    background: #999;
  }
}

分栏间隔​

<OsRow gutter='10'>
  <OsCol span='8'>
    <View className='col-content col-content-light'>span:8</View>
  </OsCol>
  <OsCol span='8'>
    <View className='col-content'>span:8</View>
  </OsCol>
  <OsCol span='8'>
    <View className='col-content col-content-light'>span:8</View>
  </OsCol>
</OsRow>

Flex布局​

<OsRow type='flex' wrap='nowrap'>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
</OsRow>

<OsRow type='flex' justify='center'>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
</OsRow>

<OsRow type='flex' justify='end'>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
</OsRow>

<OsRow type='flex' justify='space-between'>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
</OsRow>

<OsRow type='flex' justify='space-around'>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content'>span:6</View>
  </OsCol>
  <OsCol span='6'>
    <View className='col-content col-content-light'>span:6</View>
  </OsCol>
</OsRow>

offset​

<OsRow>
  <OsCol span='12' offset='12' >
    <View className='col-content col-content-light'>span:12 offset:12</View>
  </OsCol>
</OsRow>

API-OsRow​

属性​

参数说明类型默认值
type设置flex布局flex-
justify主轴对齐方式，同justify-contentstart | center | end | space-between | space-aroundstart
align交叉轴对齐方式，同align-itemsflex-start | center | flex-endflex-start
wrapflex是否多行显示nowrap | wrapnowrap
gutter元素间隔，单位：pxnumber0

API-OsCol​

属性​

参数说明类型默认值
span栅格占位格数number24
offset栅格左侧的间隔格数number0