# f.Toast

## 개요

사용자에게 짧게 전달하는 메시지입니다. 

최소 delay(), position(), show() 함수를 모두 사용해야 토스트 메시지가 나타납니다.

## 기능요소

| 요소명                                                                                                   | 설명                   |
| ----------------------------------------------------------------------------------------------------- | -------------------- |
| [color()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.color)             | 배경색을 설정합니다.          |
| [delay()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.delay)             | 메시지 표시 시간(초)을 설정합니다. |
| [description()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.description) | 부가 메시지를 입력합니다.       |
| [icon()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.icon)               | 아이콘 표시 여부를 설정합니다.    |
| [position()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.position)       | 메시지 표시 위치를 설정합니다.    |
| [show()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.show)               | 메시지를 나타냅니다.          |
| [title()](https://docs.flextudio.com/flextudio/flex/undefined-1/f/f.toast/f.toast-.title)             | 주요 메시지를 입력합니다.       |

### color

color 함수를 사용하지 않을 경우 검은색을 기본 배경색으로 설정합니다.

#### 파라미터

| 파라미터명 | 필수여부 | 타입     | 제약사항 | 설명 |
| ----- | ---- | ------ | ---- | -- |
| color | 필수   | String |      | 색상 |

color 파라미터는 아래의 옵션 중 하나를 선택합니다. 

* red
* black
* blue
* green
* yellow

#### 예시

```javascript
f.Toast.color('yellow')
```

### delay()

#### 파라미터

| 파라미터명  | 필수여부 | 타입     | 제약사항 | 설명    |
| ------ | ---- | ------ | ---- | ----- |
| second |      | Number |      | 표시 시간 |

파라미터를 입력하지 않을 경우 기본값은 3입니다.

#### 예시

```javascript
f.Toast.delay(5)
```

### description()

#### 파라미터

| 파라미터명       | 필수여부 | 타입     | 제약사항 | 설명     |
| ----------- | ---- | ------ | ---- | ------ |
| descMessage |      | String |      | 메시지 내용 |

#### 예시

```javascript
f.Toast.description('내용을 입력합니다.')
```

### icon()

#### 파라미터

| 파라미터명    | 필수여부 | 타입      | 제약사항 | 설명     |
| -------- | ---- | ------- | ---- | ------ |
| showIcon | 필수   | Boolean |      | 아이콘 유무 |

#### 예시

```javascript
f.Toast.icon(true)
```

### position()

#### 파라미터

| 파라미터명 | 필수여부 | 타입     | 제약사항 | 설명 |
| ----- | ---- | ------ | ---- | -- |
| pos   |      | String |      | 위치 |

pos 파라미너틑 아래의 옵션 중 하나를 선택합니다. 입력하지 않을 경우 기본값은 'bottom' 입니다.

* top
* center
* bottom

#### 예시

```javascript
f.Toast.position('center')
```

### show()

#### 예시

```javascript
f.Toast.show()
```

### title()

#### 파라미터

| 파라미터명        | 필수여부 | 타입     | 제약사항 | 설명     |
| ------------ | ---- | ------ | ---- | ------ |
| titleMessage |      | String |      | 메시지 제목 |

#### 예시

```javascript
f.Toast.title('제목을 입력합니다.')
```

## 전체 예시

```javascript
f.Toast()
  .title('내용을 입력하세요.')
  .description('모든 정보가 입력되어야 합니다.')
  .color('yellow')
  .icon(true)
  .delay(3)
  .position('bottom')
  .show();
```

<figure><img src="https://3692858826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEaccHKpzIIeXyj1yXLr%2Fuploads%2FzTc1Tk9qgf1Ce1yEwih9%2Fimage.png?alt=media&#x26;token=ec6bf75f-1f7c-41e6-a8aa-ba6980608c89" alt=""><figcaption><p>토스트 메시지 예시</p></figcaption></figure>