0.1.6 • Published 3 years ago
ui-block v0.1.6
UI-Block
Introduction
This library provides several css utilities.
<Block px={12} mt="6rem">
<code>npm i ui-block</code>
</Block>
Performance
Provides predefined classes, and automatically treats them as inline-style if not.
CSS-in-JS
Overlapping CSSProvider
allows you to implement an independent style within the scope.
import { Block, CSSProvider } from "ui-block";
<CSSProvider>
<Block p={1}>The padding here is 0.25 rem.</Block>
<CSSProvider config={{ getSize: (v) => `${v * 0.5}rem` }}>
<Block p={1}>The padding here is 0.5rem.</Block>
</CSSProvider>
</CSSProvider>;
If you do not want to use CSSProvider
, use preset.css
import "ui-block/lib/preset.css";
API
Block
prop | type | default | description |
---|---|---|---|
m | PredefinedSize | CSSSize | undefined | margin |
mx | PredefinedSize | CSSSize | undefined | horizontal margin |
my | PredefinedSize | CSSSize | undefined | vertical margin |
mt | PredefinedSize | CSSSize | undefined | margin top |
mr | PredefinedSize | CSSSize | undefined | margin right |
mb | PredefinedSize | CSSSize | undefined | margin bottom |
ml | PredefinedSize | CSSSize | undefined | margin left |
p | PredefinedSize | CSSSize | undefined | padding |
px | PredefinedSize | CSSSize | undefined | horizontal padding |
py | PredefinedSize | CSSSize | undefined | vertical padding |
pt | PredefinedSize | CSSSize | undefined | padding top |
pr | PredefinedSize | CSSSize | undefined | padding right |
pb | PredefinedSize | CSSSize | undefined | padding bottom |
pl | PredefinedSize | CSSSize | undefined | padding left |
html | React.HTMLAttributes<HTMLDivElement> | undefined |
CSSProvider
prop | type | default | description |
---|---|---|---|
getSize | (value: PredefinedSize) => CSSSize | (v: number) => `${v \* 0.25}rem` | predefined size getter |
prefix | string | random string value | class prefix |