All Proips

Lismコンポーネントで受け取れる主要な Lism Proips について紹介します。

Colors

Prop	CSS Property	Token	Utility	BP
fz	font-size	FONT_SIZE	○	○
lh	line-height	LINE_HEIGHT	○	-
ff	font-family	`"base"`,`"mono"`,`"emoji"`	○	-
lts	letter-spacing	LETTER_SPACING	○	-
ta	text-align	-	`"c"`,`"l"`,`"r"`	-
whs	white-space	-	`"nw"`	-

Prop	CSS Property	Token	Utility	BP
w	width	SIZE	25,50,75,100,fit	○
h	height	SIZE	25,50,75,100,fit	○
maxW	max-width	SIZE	100	-
maxH	max-height	SIZE	100	-
minW	min-width			-
minH	min-height			-

SIZE:contentsize= s,m,l?

Prop	CSS Property	Token	Utility	BP
p	padding	SPACE	○, `"box"`, `"box:s"`, `"box:l"`	○
pl	padding-left	SPACE	-	○
pr	padding-right	SPACE	-	○
pt	padding-top	SPACE	-	○
pb	padding-bottom	SPACE	-	○
px	padding-left, padding-right	SPACE	○	○
py	padding-top, padding-bottom	SPACE	○	○
pis	padding-inline-start	SPACE	-	○
pbs	padding-block-start	SPACE	-	○
m	margin	SPACE	`"auto"`	○
ml	margin-left	SPACE	`"auto"`	○
mr	margin-right	SPACE	`"auto"`	○
mt	margin-top	SPACE	`"auto"`	○
mb	margin-bottom	SPACE	`"auto"`	○
mx	margin-left, margin-right	SPACE	`"auto"`	○
my	margin-top, margin-bottom	SPACE	`"auto"`	○
mis	margin-inline-start	SPACE	○, `"auto"`	○
mbs	margin-block-start	SPACE	○, `"auto"`	○

Utility Class:

paddings
- -[p|px|py]:[0|5|10|15|20|30|40|50]
- -p:box, -p:box:[s|l]
margins
- -[mis|mbs]:[0|5|10|15|20|30|40|50]
- -[m|ml|mr|mt|mb|my|mx|mis|mbs]:auto

全てBP対応?

論理プロパティは pis, pbs だけでいいかどうかは要検討.

Examples

<Box m={40}>...</Box>
<Box pb='20px'>...</Box>
<Box mx='auto'>...</Box>
<Box p='box' py={[null, 50]}>...</Box>
<Text px={[20, 30]}>...</Text>

各方向の値をp,mに対してオブジェクトで指定することも可能

<Box m={{ml:20, mb: 30}}>...</Box>
<Box p={{x:30, y: 40}}>...</Box>

オブジェクト指定は x,y,top,right,bottom,left にのみ対応しています。

Prop	CSS Property	BP
grid.template	grid-template	○
grid.areas	grid-template-areas	○
grid.columns	grid-template-columns	○
grid.rows	grid-template-rows	○
gridItem.area	grid-area	○
gridItem.column	grid-column	○
gridItem.row	grid-row	○

※: -gta:ltrクラスは[dir='rtl']時に方向が反転するようになっており、rtl言語でも方向を揃えることができます。

Prop	CSS Property	Utility	BP
flex.wrap	flex-wrap	`"w"`, `"nw"`	○
flex.direction	flex-direction	`"c"`, `"cr"`, `"r"`, `"rr"`	○
flexItem.shrink	flex-shrink	`"0"`, `"1"`	○
flexItem.grow	flex-grow	`"0"`, `"1"`	○
flexItem.basis	flex-basis		○
flex^※1	flex		-

Prop	CSS Property	Token	Utility	BP
[flex\|grid].gap	gap	SPACE	○	○
[flex\|grid]rowg	row-gap	SPACE	---	○
[flex\|grid]clmg	column-gap	SPACE	---	○

Utility Class:

Examples

<Flex gap={40}>...</Flex>
<Grid gap="1rem">...</Grid>
<Columns rowg={[15, 20]} clmg={[20, 30]}>...</Columns>

Prop	CSS Property	Token	Utility	BP
[flex\|grid].ai	align-items		`"c"`, `"s"`, `"e"`, `"str"`	-
[flex\|grid].ac	align-content		`"c"`, `"s"`, `"e"`, `"str"`	-
[flex\|grid].ji	justify-items		`"c"`, `"s"`, `"e"`, `"str"`	-
[flex\|grid].jc	justify-content		`"c"`, `"s"`, `"e"`, `"str"`	-
[flex\|grid]Item.alignSelf	align-self		-	-
[flex\|grid]Item.justifySelf	justify-self		-	-
[flex\|grid]Item.placeSelf	place-self		-	-
[flex\|grid]Item.order	order	`"-1"`, `"0"`, `"1"`	-

Prop	CSS Property	Token,Utility
d	display	`"none"`,`"block"`,`"flex"`,`"grid"`,`"inline"`,`"inline-block"`,`"inline-flex"`,`"inline-grid"`
bxsh, shadow	box-shadow	SHADOW
bdrs, radius	border-radius	RADIUS
aspect	aspect-ratio
opacity(op?)	opacity
translate	translate
rotate	rotate
scale	scale
transformOrigin	transformOrigin
top	top
left	left
right	right
bottom	bottom
inset	inset
z	z-index
pos	position
lis	listStyle	`"none"`
ovw	overflowWrap	`"anywhere"`
ov	overflow	`"hidden"`,`"auto"`,`"clip"`,`"scroll"`?
ovx	overflow-x	`"hidden"`,`"auto"`,`"clip"`,`"scroll"`?
ovy	overflow-y	`"hidden"`,`"auto"`,`"clip"`,`"scroll"`?