position-box

插件名

position-box

安装

npm

npm install @jswork/styled-plugin-position-box

Yarn

yarn add @jswork/styled-plugin-position-box

参数

名称	类型	description
value	string	摆放位置

value

名称	类型	description
center	string	水平/垂直居中
tr	string	右上角
tl	string	左上角
bl	string	左下角
br	string	右下角
top	string	上边框，居中
right	string	右边框，居中
bottom	string	下边框，居中
left	string	左边框，居中

原理

1. 父级容器 position: relative;
2. 当前容器有 9 个不同的位置可以选择

用法

<View relative debug wh={300} auto mb={20}>  <View debug plugin="position-box:center">    Center  </View>  <View debug plugin="position-box:tr">    tr  </View>  <View debug plugin="position-box:tl">    tl  </View>  <View debug plugin="position-box:bl">    bl  </View>  <View debug plugin="position-box:br">    br  </View>
  <View debug plugin="position-box:top">    top  </View>  <View debug plugin="position-box:right">    right  </View>  <View debug plugin="position-box:bottom">    bottom  </View>  <View debug plugin="position-box:left">    left  </View></View>

演示

Live Editor

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^