SaladDesignLibrary

샐러드랩 디자인 시스템 라이브러리

Version

| version | date |content| |---------|--------|--| | 0.0.22 | 230525 | common-textarea 컴포넌트 추가 | | 0.0.23 | 230525 | common-calender 컴포넌트 추가 | | 0.0.24 | 230525 | 필요 모듈 추가 | | 0.0.25 | 230530 | color-picker 컴포넌트 추가 | | 0.0.26 | 230530 | admin-templates, admin-header 컴포넌트 추가 | | 0.0.27 | 230531 | option-templates, option-row 컴포넌트 추가 | | 0.0.39 | 230601 | confirm-guard 컴포넌트 추가 | | 0.0.40 | 230601 | image-selector 컴포넌트 추가 | | 0.0.41 | 230601 | icon 추가, color 추가 | | 0.0.42 | 230602 | color-picker, checkbox-btn, radio-btn 개선 | | 0.0.43 | 230607 | 각종 버그 수정 | | 0.0.44 | 230607 | common-text 기능 개선 | | 0.0.45 | 230612 | 로고 브랜드컬러 추가 | | 0.0.46 | 230612 | icon 추가, 디자인 개선 | | 0.0.47 | 230613 | common-text password 기능 추가 | | 0.0.48 | 230613 | common-select 기능 개선 | | 0.0.49 | 230618 | common-badge 컴포넌트 추가 | | 0.0.54 | 230619 | common-badge 버그 수정 | | 0.0.55 | 230619 | notice-btn 개선 | | 0.0.56 | 230707 | common-btn 디자인 개선 | | 0.0.58 | 230711 | common-card 개선 | | 0.1.4 | 230714 | common-option, common-select, confirm-dialog 개선 | | 0.1.7 | 230714 | common-btn 버그 수정, option-row, common-card 개선 | | 0.1.8 | 230717 | common-table 추가 | | 0.1.13 | 230719 | option-row, admin-templates, common-text 개선 | | 0.1.19 | 230731 | notice-btn, common-icon, common-textarea, common-text 개선 | | 0.1.22 | 230801 | notice-btn, color-picker 개선 | | 0.1.24 | 230807 | common-option, common-select 개선 | | 0.1.29 | 230807 | notice-btn, checkbox-btn 개선 | | 0.1.30 | 230807 | control-btn 추가 | | 0.1.31 | 230808 | common-option, common-select 개선 | | 0.1.33 | 230829 | notice-btn, common-select 개선 | | 0.1.35 | 230905 | icon 추가 | | 0.1.36 | 230907 | feedback-msg 개선 | | 0.1.38 | 230926 | time-picker 컴포넌트 추가 | | 0.1.39 | 231004 | icon 추가, common-text 개선 | | 0.1.42 | 231010 | common-table 개선 | | 0.1.44 | 231102 | admin-header 개선 | | 0.1.45 | 231102 | admin-header-title 개선 | | 0.1.46 | 231102 | image-selector resize기능 토글 추가 | | 0.1.47 | 231124 | notice-msg 추가 | | 0.1.48 | 231127 | option-template 우측상단 버튼 추가 | | 0.2.0 | 231214 | angular 버전업 | | 0.2.1 | 240122 | common-table 개선 | | 0.2.2 | 240124 | image-selector 개선 | | 0.2.3 | 240131 | notice-msg 개선 | | 0.2.4 | 240131 | feedback-msg 개선 |

Dependencies

• Angular CLI : 16.2.10
• @ctrl/ngx-emoji-mart : 9.2.0
• @angular/material : 16.2.12

Pre-Work

1. Install packages:

   npm install @ctrl/[email protected]
   npm install @angular/[email protected]

2. Bundle those styles through angular.json configuration:

   "build": {
       "options": {
           "styles": [
               "src/styles.less",
               "node_modules/@ctrl/ngx-emoji-mart/picker.css",
               "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
           ]
       }
   }

3. Add styles in styles.less:

       // 모달 기본배경 제거를 위한 클래스
       .common-dialog .mat-dialog-container {
           padding: 0px;
   
           box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16), 4px 8px 28px rgba(0, 0, 0, 0.08);
           border-radius: 16px;
       }

4. Import module in app.modules.ts:

   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   ...
   @NgModule({
       imports: [
           BrowserModule,
           BrowserAnimationsModule,
           ...
       ],

Contact

[email protected]