이윰

컴포넌트

본 페이지의 테마코드 활용법은 2022년 01월 이후 선보인 이윰빌더 시즌4 부트스트랩5 기반의 테마코드 활용법입니다.

이전 이윰빌더 시즌4 부트스트랩3 기반의 테마코드 활용법은 아래 링크를 참조하여 주시기 바랍니다.
https://eyoom.net/page/eb4_code

Components

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

라벨 (Label)

[ 예제 ]

.label .label-색상

Default
Light
Dark
Red
Crimson
Pink
Purple
Deep Purple
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Gray
Light Gray

[ 예제 ]

.label .label-색상 .rounded

Default
Light
Dark
Red
Crimson
Pink
Purple
Deep Purple
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Gray
Light Gray

배지 (Badge)

[ 예제 ]

.badge .badge-색상

[ 예제 ]

버튼 옵션과 배지 옵션을 조합하여 사용할수 있습니다.

소셜 아이콘

[ 예제 ]

.rounded

[ 예제 ]

.rounded-x

진행바

[ 예제 ] - Backgrounds

None

.bg-success

.bg-info

.bg-warning

.bg-danger

[ 예제 ] - Striped

.progress-bar-striped

[ 예제 ] - Animated stripes

.progress-bar-striped .progress-bar-animated

10%

25%

50%

75%

100%

[ 예제 ] - 응용

15%
30%
20%

[ 예제 ] - 색상

                                진행률
                                10%
                            

                                진행률
                                20%
                            

                                진행률
                                30%
                            

                                진행률
                                40%
                            

                                진행률
                                50%
                            

                                진행률
                                60%
                            

                                진행률
                                70%
                            

                                진행률
                                80%
                            

                                진행률
                                90%
                            

                                진행률
                                100%
                            

[ 예제 ] - 색상

                                진행률
                                10%
                            

                                진행률
                                20%
                            

                                진행률
                                30%
                            

                                진행률
                                40%
                            

                                진행률
                                50%
                            

                                진행률
                                60%
                            

                                진행률
                                70%
                            

                                진행률
                                80%
                            

                                진행률
                                90%
                            

                                진행률
                                100%
                            

위 옵션들의 조합으로 좀더 다양한 응용이 가능합니다.

진행바 - Vertical

[ 예제 ] - 색상

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

[ 예제 ] - 색상

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

[ 예제 ] - 줄무늬

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

[ 예제 ] - 애니메이션

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Panels

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

[ 예제 ]