뱃지

뱃지, 상징의 증표와도 같아요. 벳지는 피드나 게시글의 간략한 특성을 표현해주죠.

Blue Tint
Blue Fill

Green Tint
Green Fill

Red Tint
Red Fill

Yellow Tint
Yellow Fill

Light
Dark

버튼

라이트 테마에서의 버튼 디자인은 파스텔톤 위주의 컬러를 권고합니다. 색상은 primary(blue), success(green), light(white), dark(black) 을 지원합니다. 인라인 버튼이에요!

Blue Tint
Blue Fill

Green Tint
Green Fill

Red Tint
Red Fill

Yellow Tint
Yellow Fill
Light
Dark
Transparent
Inline

색

blue

red

green

yellow

드롭다운

라이트 테마에서의 버튼 디자인은 파스텔톤 위주의 컬러를 권고합니다. 색상은 primary(blue), success(green), light(white), dark(black) 을 지원합니다.

  
    Dropdown button
  
  

    
Action
    
Another action
    
Something else here
  

하단 푸터

푸터는 하단의 사이트의 정보를 표기하는 공간이에요. 푸터를 꾸미는건 사이트의 정보를 확고하게 하는 것. 밋밋한 푸터가 되지 않도록 신경을 좀 써봤어요.

<dds-footer
    project-title="DeVent Design System"
    sub-title="데벤트"
    company-name="사업자등록번호 : 429-52-00535 | 대표: 허형준"
    project-email="문의: info@devent.kr">
</dds-footer>

헤더

헤더 디자인은 사용자가 처음으로 마주하는 중요한 페이지에요. 불필요한 메시지는 제외하고 하나의 제목, 하나의 부제목, 하나의 버튼 원칙을 고수해야합니다. 따라서 직관적인 메시지를 심플하게 보여주는게 디자인 시스템의 핵심이죠.

<dds-header 
    header-title="디자인, 경계를 넘어"
    header-sub-title="데벤트의 디자인 시스템은 디자인의 경계를 뛰어넘는 우아함을 선사합니다. 그야말로 경이로움에 가까운 전율을 느낄 수 있죠.">
</dds-header>

버튼이 포함된 헤더

헤더에 버튼이 빠질 수 없죠. 버튼은 밋밋하지 않은 해더를 만들어주고 유저 사용성까지 챙겨주는 고마운 친구랍니다.

    

        yes!
    

<dds-header 
    header-title="디자인, 경계를 넘어"
    header-sub-title="데벤트의 디자인 시스템은 디자인의 경계를 뛰어넘는 우아함을 선사합니다. 그야말로 경이로움에 가까운 전율을 느낄 수 있죠.">
        <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
            <button>yes!</button>
        </div>
</dds-header>

텍스트입력

긴 글을 입력받거나 엔터를 입력해야하는 일이 생길 때 쓰는 입력창이에요.

입력

모든 입력을 처-리 할 수 있어요. 그야말로 처리의 경지에 다다랐죠. 데벤트 디자인 시스템과 부트스트랩이 만나 더욱 완벽해진 인풋을 만나보세요.

이번엔 아이콘도 함께해요. 여기서 더 놀라운 사실은 버튼도 넣을 수 있다는거에요. (놀람)

    @
    



    
      

태그 입력

블로그의 태그를 입력받거나, 사용자 입력을 배열로 받아야 할 때 쓰이는 엘리먼트에요. 요소를 클릭하면 제거되죠.

<dds-input-tag tag-id="thisisid"></dds-input-tag>

document.getElementById('input_tag_thisisid').parentNode.tags

태그 선택

여러개의 정해진 태그를 입력받을 때 사용되어요. 예를들어 관심분야 선정이나 기타 사용자에게 추천할만한 선택지가 있을 떄 주로 사용되죠.

<dds-select-tag tag-id="aaaa">
    <span class="badge badge-blue-tint me-1" value="clicked">onclick4</span>
    <span class="badge badge-blue-tint me-1" value="clicked">onclick2</span>
    <span class="badge badge-blue-tint me-1" value="clicked">onclickds4</span>
    <span class="badge badge-blue-tint me-1" value="clicked">onclick3</span>
    <span class="badge badge-blue-tint me-1" value="clicked">onclick5</span>
    <span class="badge badge-blue-tint me-1" value="clicked">onclick6</span>
</dds-select-tag>

document.getElementById('select_tag_aaaa').parentNode.tags

네비게이션 바

네비게이션 바는 사용자가 쉽게 페이지를 이동할 수 있도록 타이틀과 링크로 이루어져 있어요. 타이틀 바에는 서비스의 이름만 적고, 나머지는 적을 수 없어요. 링크에는 텍스트와 아이콘 중 하나를 선택하여 통일시켜야 해요. nav-fixed를 사용하면 none, top(상단), bottom(하단)에 고정시킬 수 있어요.

    
        소개
    

    
<dds-navbar nav-title="DDS" nav-fixed="none">
    <dds-navbar-item item-link="/intro">소개</dds-navbar-item>
</dds-navbar>

아이콘이 포함된 네비게이션 바

FontAwesome 5 의 아이콘을 지원해요. 이 뿐만 아니라 여러가지 HTML 콘텐츠들도 추가할 수 있죠.

    
        소개
        
    

    
<dds-navbar nav-title="DDS Icon" nav-fixed="none">
    <dds-navbar-item item-link="/intro">소개</dds-navbar-item>
    <dds-navbar-item item-link="/icon"><i class="fab fa-android"></i></dds-navbar-item>
</dds-navbar>

탭 네비게이션 바

탭 네비게이션 바는 가로로된 네비게이션 바 입니다.

    
<dds-navtab>
    <dds-navtab-item item-id="home" is-selected="false"></dds-navtab-item>
</dds-navtab>

<div class="col tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
    </div>
</div>

모달

부트스트랩 5와 데벤트 디자인 시스템이 만나 더 새로워지고 강력해진 모달로 돌아왔어요. div의 늪에서 빠져나올 준비, 되셨나요?

<button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#aaa">
    Launch demo modal
</button>

<dds-modal
    modal-id="aaa"
    modal-title="테스트 모달이에요."
    modal-subtitle="명품 프로덕트의 시작은 언제나 모달이죠.">
        <dds-modal-button button-color="btn-blue" button-text-color="text-primary" is-dismiss="false">저장</dds-modal-button>
        <dds-modal-button button-color="btn-light" button-text-color="text-dark" is-dismiss="true">취소</dds-modal-button>
</dds-modal>

콘텐츠가 있는 모달

모달의 사용성을 한껏 끌어올려줄 마스터피스! 지금 바로 구경해보세요.

<dds-modal
modal-id="bbb"
modal-title="테스트 모달이에요."
modal-subtitle="인풋태그 외에도 다양하게 추가할 수 있어요">
    <dds-content>
        <div class="mb-3">
            <input type="text" class="form-control"  placeholder="name@example.com">
        </div>
    </dds-content>
    <dds-modal-button button-color="btn-blue" button-text-color="text-primary" is-dismiss="false">저장</dds-modal-button>
    <dds-modal-button button-color="btn-light" button-text-color="text-dark" is-dismiss="true">취소</dds-modal-button>
</dds-modal>

모달 정렬

정렬이에요. 기본적으로 center를 지원하죠. end, start도 추가했어요.

<button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#aaa">
    Launch demo modal
</button>

<dds-modal
    modal-id="aaa"
    modal-title="테스트 모달이에요."
    modal-subtitle="명품 프로덕트의 시작은 언제나 모달이죠."
    modal-align="end">

        <dds-modal-button button-color="btn-blue" button-text-color="text-primary" is-dismiss="false">저장</dds-modal-button>
        <dds-modal-button button-color="btn-light" button-text-color="text-dark" is-dismiss="true">취소</dds-modal-button>
</dds-modal>

모달내 콘텐츠 정렬

앞서 모달 자체의 위치를 정렬했다면, 이번에는 모달 내 컨텐츠 정렬이에요. 모달의 디자인 다양성과 편리성, 가독성을 위해 도전을 계속되죠.

<button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#aaa">
    Launch demo modal
</button>

<dds-modal
    modal-id="aaa"
    modal-title="테스트 모달이에요."
    modal-subtitle="명품 프로덕트의 시작은 언제나 모달이죠."
    content-align="end">

        <dds-modal-button button-color="btn-blue" button-text-color="text-primary" button-arrangement="col" is-dismiss="false">저장</dds-modal-button>
        <dds-modal-button button-color="btn-light" button-text-color="text-dark" button-arrangement="col" is-dismiss="true">취소</dds-modal-button>
</dds-modal>

길이가 긴 모달

레전드, 길이가 급나 길어. 모든 콘텐츠를 담기에는 모달이가 너무너무 작아서, 아래에 있는 버튼 클릭을 못 할 때. 어김없이 찾아오는 길이가 긴 모달을 위한 안성맞춤. 바로바로 스크로블..!!

<dds-modal
modal-id="eee"
modal-title="스크롤 모달이에요."
modal-subtitle="길어요. 좀 많이 길어요"
is-scrollable="true">
    <dds-content>
        <div class="mb-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Diam donec adipiscing tristique risus nec. Nulla facilisi cras fermentum odio eu feugiat. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Ac auctor augue mauris augue neque gravida in fermentum et. Eu facilisis sed odio morbi. Purus faucibus ornare suspendisse sed nisi lacus sed. Urna nec tincidunt praesent semper. Euismod lacinia at quis risus sed vulputate odio. Lectus proin nibh nisl condimentum id venenatis.


            <input type="text" class="form-control"  placeholder="name@example.com">
        </div>
    </dds-content>
    <dds-modal-button button-color="btn-light" button-text-color="text-dark" is-dismiss="true">닫기</dds-modal-button>
</dds-modal>

토스트

하단 토스트 입니다. 부트스트랩 toast기능입니다.

    

        안녕하세요. 반가워요. 테스트 팝업이에요.
        
    

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <dds-toast
        toast-title="테스트 팝업"
        toast-id="myToastEl"
        toast-delay="5000"
        toast-autohide="false">
        안녕하세요 <b class="text-danger">반가워요.</b> 테스트 팝업이에요. 

    </dds-toast>
</div>

콘텐츠만

콘텐츠만 불러와요

    

        안녕하세요. 콘텐츠테스트 팝업이에요.
        
    

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <dds-toast
        toast-id="myToastEl"
        toast-delay="5000"
        toast-autohide="false">안녕하세요. 콘텐츠테스트 팝업이에요.
    </dds-toast>
</div>

색 클래스 지정

색 클래스를 지정헤요.

    

        안녕하세요. 테스트 팝업이에요.
        
    

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <dds-toast
        toast-id="myToastEl"
        toast-delay="5000"
        toast-autohide="false"
        toast-class-color="bg-dark"
        toast-class-textcolor="text-light">안녕하세요. 테스트 팝업이에요.
    </dds-toast>
</div>

색 HEX 지정

색 HEX를 지정헤요.

    

        안녕하세요. 테스트 팝업이에요.
        
    

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <dds-toast
        toast-id="myToastEl"
        toast-delay="5000"
        toast-autohide="false"
        toast-class-textcolor="text-light"
        toast-style-colorhex="#5A6169ba">안녕하세요. 테스트 팝업이에요.
    </dds-toast>
</div>

가운데 정렬

색 HEX를 지정헤요.

    

          
안녕하세요. 테스트 팝업이에요.
 
        

    

<div class="toast-container position-fixed bottom-0 start-50 translate-middle">
    <dds-toast
        toast-id="myToastEl"
        toast-delay="5000"
        toast-autohide="false"
        toast-style-colorhex="#ffffffba">  <div class="text-center font-weight-md ">안녕하세요. 테스트 팝업이에요.</div> 
    </dds-toast>

</div>

JS Handle

자바스크립트 핸들링 이에요. 팝업을 자동으로 생성해요

dds.toast({
    content: '테스트 테스트'
})

텍스트 색

텍스트 색을 지정해요

사이드 바

사이드바는 부트스트랩5 에서의 offcanvas 기능이에요. 메뉴나 콘텐츠, 핸들링이 필요하다면 사이드바를 이용하면 돼요.

    
<button class="btn btn-blue font-weight-sm px-4 py-3 mt-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    사이드바 열기
</button>

<dds-sidebar 
    sidebar-title="사이드바"
    sidebar-id="offcanvasExample">


</dds-sidebar>

테이블

테이블이에요. 깔끔하고 정갈한 리스트를 선사하죠.

  

    

      
#
      
First
      
Last
      
Handle
    
  
  

    

      
1
      
Mark
      
Otto
      
@mdo
    
    

      
2
      
Jacob
      
Thornton
      
@fat
    
    

      
3
      
Larry the Bird
      
@twitter