responsive-list
插件名#
responsive-list安装#
- npm
- Yarn
npm install @jswork/styled-plugin-responsive-listyarn add @jswork/styled-plugin-responsive-list参数#
| 名称 | 类型 | description |
|---|---|---|
| gap | numeric | string |
| value | numeric | 每个item的最小宽度 |
绝对居中的一种实现方式。
原理#
note
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
- 适用于兼容性要求不高的场景，如后台的list列表
用法#
仅 X 方向居中
<View plugin="responsive-list:x"> <div style={{width: 200, height: 400}}>我是要被居中的 element</div></View>演示#
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
^