Text
h1
h2
h3
display1
display2
display3
display4
display5
display6
display7
p1
p2
p3, body
p3-semibold
p4
p4-semibold
p5
p5-semibold
Color
primary
primary-fill
primary-bg
primary-border
primary-border-fill
default
default-fill
default-bg
default-border
default-border-fill
default-deep
default-deep-fill
default-deep-bg
default-deep-border
default-deep-border-fill
info
info-fill
info-bg
info-border
info-border-fill
link
link-fill
link-bg
link-border
link-border-fill
success
success-fill
success-bg
success-border
success-border-fill
warning
warning-fill
warning-bg
warning-border
warning-border-fill
danger
danger-fill
danger-bg
danger-border
danger-border-fill
Grid
Basic 12 Columns (Auto wrap)
w-4
w-5
w-3
w-6
w-12
w-2
w-6
w-4
w-6
w-full
Fixed Columns (No wrap)
2 Columns (grid grid-fix-2)
w-1_2
w-1_2
3 Columns (grid grid-fix-3)
w-1_3
w-2_3
4 Columns (grid grid-fix-4)
w-1_4
w-3_4
w-2_4
w-2_4
5 Columns (grid grid-fix-5)
w-1_5
w-4_5
w-2_5
w-3_5
6 Columns (grid grid-fix-6)
w-1_6
w-5_6
w-2_6
w-4_6
w-3_6
w-3_6
Layout
Border
border-0
border-1
border-2
border-3
Border-radius
r-0
r-1
r-2
r-3
r-4
r-5
r-6
r-full
Spacing
s(0);
s(1);
s(2);
s(3);
s(4);
s(5);
s(6);
s(7);
s(8);
s(9);
s(10);
s(11);
s(12);
s(13);
Padding
전체 : p-0 ~ p-13
상단 : p-t-0 ~ p-t-13
우측 : p-r-0 ~ p-r-13
하단 : p-b-0 ~ p-b-13
좌측 : p-l-0 ~ p-l-13
p-0
p-1
p-2
p-3
p-4
p-5
p-6
p-7
p-8
p-9
p-10
p-11
p-12
p-13
Margin
전체 : m-0 ~ m-13
상단 : m-t-0 ~ m-t-13
우측 : m-r-0 ~ m-r-13
하단 : m-b-0 ~ m-b-13
좌측 : m-l-0 ~ m-l-13
m-0
m-1
m-2
m-3
m-4
m-5
m-6
m-7
m-8
m-9
m-10
m-11
m-12
m-13
Elevation
bg-elevation-3
bg-elevation-2Shadow
shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
Hide
Icon
star(e900)
star-fill(e901)
exchange-horizontally(e902)
exchange-vertical(e903)
new-window(e904)
tag(e905)
notification(e906)
notification-stroke(e907)
mail(e908)
global(e909)
trash(e90a)
dm(e90b)
currency(e90c)
print(e90d)
gps(e90e)
ellipse(e90f)
ellipse-stroke(e910)
facebook(e912)
naver(e913)
insta(e914)
tiktok(e915)
apple(e916)
google(e917)
youtube(e918)
kakao(e919)
x(e91a)
arrow-dropdown(e91c)
arrow-dropdown-up(e91d)
check-small(e91e)
check(e91f)
show(e920)
hidden(e921)
fordid(e922)
upload-cloud(e923)
share(e924)
excel(e925)
cancel(e926)
arrow-left(e927)
arrow-right(e928)
arrow-up(e929)
arrow-down(e92a)
download(e92b)
upload(e92c)
link-alt(e92d)
link(e92e)
edit(e92f)
pin(e930)
flag(e931)
hand(e932)
zoom-in(e933)
zoom-out(e934)
chart(e935)
temperature(e936)
turbine(e937)
layers(e938)
compass(e939)
flag-finish(e93a)
pressure(e93b)
pyramid-chart(e93c)
ruler(e93d)
contour(e93e)
plus(e93f)
minus(e940)
warning(e941)
user-stroke(e942)
user(e943)
menu(e944)
time(e945)
search(e949)
close(e94a)
info(e94b)
danger(e94c)
danger-fill(e94d)
expand-left(e94e)
expand-right(e94f)
expand-up(e950)
expand-down(e951)
calendar(e952)
paper(e953)
import(e954)
export(e955)
img(e956)
favorite(e957)
favorite-fill(e958)
phone(e959)
phone-stroke(e95a)
home(e95b)
expand-up-double(e95c)
expand-down-double(e95d)
expand-left-double(e95e)
expand-right-double(e95f)
setting-stroke(e960)
setting(e961)
email(e962)
more-horizontal(e963)
more(e964)
help(e965)
check-circle-stroke(e966)
check-circle-fill(e967)
map(e968)
refresh(e969)
drag(e96a)
clip(e96b)
file(e96c)
card(e96d)
car(e96e)
handle(e96f)
counselor(e970)
chart-bar(e971)
coin(e972)
receipt(e973)
briefcase(e974)
arrow-dropdown-left(e975)
arrow-dropdown-right(e976)
lock(e977)
unlock(e978)
Button
Primary
Default
default-deep
Info
Link
Success
Warning
Danger
Disabled
Toggle
Checkbox
Radio
Input
Default Size(sm)
md
lg
File
Select
Textarea
label
Field
Form.Field
import Form from '@the-flexion/pkg/next';
<Form.Field label="Title" helper="Helper Text" helperClass="danger" > <input type="text" /> </Form.Field>
Helper Text
<Form.Field label="Title" labelClass="lg semibold" required={true} helper="Helper Text" > <input type="text" /> </Form.Field>
Helper Text
Editor
Form.Editor
import Form from '@the-flexion/pkg/next';
<Form.Editor value={testValue} onChange={setTestValue} imageUploadUrl="/upload" />
Validator
Form.Input
import Form from '@the-flexion/pkg/next';
const testSchema = z.string().min(5, 'Too short');
<Form.Input type="text" value={testValue} onChange= {(e) => { setTestValue(e.target.value); }} validator={testSchema}/><Form.Input type="text" value={testValue} onChange= {(e) => { setTestValue(e.target.value); }} validator={testSchema} unit={Unit} />Unit
Form.Textarea
<Form.Textarea value={testValue} rows={5} className="w-full" onChange= {(e) => { setTestValue(e.target.value); }} validator={testSchema} />Form.Field
<Form.Field validator={testSchema} value={wrapValue} setClassName={setWrapClass} > <... className={wrapClass}/> </Form.Field>Tabs
Default
fill
Table
Default
| 제목 | 이메일 | 역할 | 이름 | ||
|---|---|---|---|---|---|
| Text | Text | Text | Text | ||
| Text | Text | Text | Text | ||
| Text | Text | Text | Text |
list
| 제목 | 이메일 | 역할 | 이름 | ||
|---|---|---|---|---|---|
| Text | Text | Text | Text | ||
| Text | Text | Text | Text | ||
| Text | Text | Text | Text |
border
| 제목 | 이메일 | 역할 | 이름 | ||
|---|---|---|---|---|---|
| Text | Text | Text | Text | ||
| Text | Text | Text | Text | ||
| Text | Text | Text | Text |
list + border
| 제목 | 이메일 | 역할 | 이름 | ||
|---|---|---|---|---|---|
| Text | Text | Text | Text | ||
| Text | Text | Text | Text | ||
| Text | Text | Text | Text |
fill
| 제목 | 이메일 | 역할 | 이름 | ||
|---|---|---|---|---|---|
| Text | Text | Text | Text | ||
| Text | Text | Text | Text | ||
| Text | Text | Text | Text |
list + fill
| 제목 | 이메일 | 역할 | 이름 | ||
|---|---|---|---|---|---|
| Text | Text | Text | Text | ||
| Text | Text | Text | Text | ||
| Text | Text | Text | Text |