grid-col

权限列表
子组件
属性
样式
事件
示例

grid-col是栅格布局容器grid-row的子容器组件。

权限列表

无

子组件

支持。

属性

名称	类型	默认值	必填	描述
xs	number\|object	-	否	在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
sm	number\|object	-	否	在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
md	number\|object	-	否	在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
lg	number\|object	-	否	在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
span	number	1	否	在未设置明确断点时，默认占用列数
offset	number	0	否	未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
disabled	boolean	false	否	当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。
data	string	-	否	给当前组件设置data属性，进行相应的数据存储和读取。

样式

名称	类型	默认值	必填	描述
flex-direction	string	row	否	flex容器主轴方向。可选项有： column：垂直方向从上到下 row：水平方向从左到右
flex-wrap	string	nowrap	否	flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有： nowrap：不换行，单行显示。 wrap：换行，多行显示。
justify-content	string	flex-start	否	flex容器当前行的主轴对齐格式。可选项有： flex-start：项目位于容器的开头。 flex-end：项目位于容器的结尾。 center：项目位于容器的中心。 space-between：项目位于各行之间留有空白的容器内。 space-around：项目位于各行之前、之间、之后都留有空白的容器内。
align-items	string	stretch	否	flex容器当前行的交叉轴对齐格式，可选值为： stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。 flex-start：元素向交叉轴起点对齐。 flex-end：元素向交叉轴终点对齐。 center：元素在交叉轴居中。
align-content	string	flex-start	否	交叉轴中有额外的空间时，多行内容对齐格式，可选值为： flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。 flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。 center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。 space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。 space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
display	string	flex	否	确定该元素视图框的类型，该值暂不支持动态修改。可选值为： flex：弹性布局 grid：网格布局 none：不渲染此元素
grid-template-[columns\|rows]	string	1行1列	否	用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。示例：如设置grid-template-columns为： (1) 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px； (2) 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份； (3) 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%； (4) repeat(2,100px)：分两列，第一列100px，第二列100px； (5) auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。
grid-[columns\|rows]-gap	<length>	0	否	用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。
grid-row-[start\|end]	number	-	否	用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。
grid-column-[start\|end]	number	-	否	用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。
height	<length> \| <percentage>	-	否	设置组件自身的高度。缺省时使用元素自身内容需要的高度。
padding	<length> \| <percentage>⁵⁺	0	否	使用简写属性设置所有的内边距属性。该属性可以有1到4个值：指定一个值时，该值指定四个边的内边距。指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
padding-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	否	设置左、上、右、下内边距属性。
padding-[start\|end]	<length> \| <percentage>⁵⁺	0	否	设置起始和末端内边距属性。
border	-	0	否	使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。
border-style	string	solid	否	使用简写属性设置所有边框的样式，可选值为： dotted：显示为一系列圆点，圆点半径为border-width的一半。 dashed：显示为一系列短的方形虚线。 solid：显示为一条实线。
border-[left\|top\|right\|bottom]-style	string	solid	否	分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。
border-[left\|top\|right\|bottom]	-	-	否	使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。
border-width	<length>	0	否	使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。
border-[left\|top\|right\|bottom]-width	<length>	0	否	分别设置左、上、右、下四个边框的宽度。
border-color	<color>	black	否	使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。
border-[left\|top\|right\|bottom]-color	<color>	black	否	分别设置左、上、右、下四个边框的颜色。
border-radius	<length>	-	否	border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color ，border-[left\|top\|right\|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。
border-[top\|bottom]-[left\|right]-radius	<length>	-	否	分别设置左上，右上，右下和左下四个角的圆角半径。
background	<linear-gradient>	-	否	仅支持设置渐变样式，与background-color、background-image不兼容。
background-color	<color>	-	否	设置背景颜色。
background-image	string	-	否	设置背景图片。与background-color、background不兼容；支持本地图片资源地址。示例： background-image: url("/common/background.png")
background-size	string <length> <length> <percentage> <percentage>	auto	否	设置背景图片的大小。 string可选值： contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。 cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。 auto：保持原图的比例不变。 length值参数方式：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。百分比参数方式：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
background-repeat	string	repeat	否	针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。 repeat：在水平轴和竖直轴上同时重复绘制图片。 repeat-x：只在水平轴上重复绘制图片。 repeat-y：只在竖直轴上重复绘制图片。 no-repeat：不会重复绘制图片。
background-position	string string <length> <length> <percentage> <percentage>	0px 0px	否	关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。 left：水平方向上最左侧。 right：水平方向上最右侧。 top：竖直方向上最顶部。 bottom：竖直方向上最底部。 center：水平方向或竖直方向上中间位置。 length值参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。可以混合使用<percentage>和<length>
opacity	number	1	否	元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
visibility	string	visible	否	是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为： visible：元素正常显示。 hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。说明： visibility和display样式都设置时，仅display生效

事件

名称	参数	描述
touchstart	TouchEvent	手指刚触摸屏幕时触发该事件。
touchmove	TouchEvent	手指触摸屏幕后移动时触发该事件。
touchcancel	TouchEvent	手指触摸屏幕中动作被打断时触发该事件。
touchend	TouchEvent	手指触摸结束离开屏幕时触发该事件。
click	-	点击动作触发该事件。
longpress	-	长按动作触发该事件。
swipe⁵⁺	SwipeEvent	组件上快速滑动后触发。

示例

<!-- index.hml -->
<div class="container">
  <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
    <grid-row style="height:400px;justify-content:space-around;">
      <grid-col span="1">
        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
          <text style="color: dodgerblue;" onclick="getCol">內容元素</text>
        </div>
      </grid-col>
      <grid-col span="4" style="background-color:orange;">
        <div style="width: 100%;height: 100%;padding: 20px;align-items: center;">
          <text onclick="getColWidth">內容元素</text>
        </div>
      </grid-col>
    </grid-row>
  </grid-container>
</div>

/* index.css */
.container {
  flex-direction: column;
  padding-top: 80px;
}

// index.js
import prompt from '@system.prompt';
export default {
  getCol(e) {
    this.$element('mygrid').getColumns(function (result) {
      prompt.showToast({
        message: e.target.id + ' result = ' + result,
        duration: 3000,
      });
    })
  },
  getColWidth(e) {
    this.$element('mygrid').getColumnWidth(function (result) {
      prompt.showToast({
        message: e.target.id + ' result = ' + result,
        duration: 3000,
      });
    })
  }
}

youguilin / docs

grid-col

权限列表

子组件

属性

样式

事件

示例

简介

发行版

贡献者

近期动态

youguilin / docs .gitee-modal { width: 500px !important; }

grid-col

权限列表

子组件

属性

样式

事件

示例

简介

发行版

贡献者

近期动态

搜索帮助

youguilin / docs