> For the complete documentation index, see [llms.txt](https://texture-kr.gitbook.io/wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://texture-kr.gitbook.io/wiki/layout-api/layout-element-properties.md).

# Layout Element Properties

Node에서 ASLayoutElementStyle이라는 layout element properties를 제공해주며, ASDisplayNode는 ASLayoutElement를 상속받고 있습니다.

```swift
let node = ASDisplayNode()
node.style. .... // ASLayoutElementStyle

let element: ASLayoutElement = node
element.style. ... // ASLayoutElementStyle
```

Texture Layout API는 layout을 build하는 과정에 있어서 개발자에게 필요한 layout element properties 를 style property를 접근하여 설정해줍니다. 용도에 따라 Stack형태와 Absolute 및 Basic Layout으로 총 3가지로 나누어집니다. 용도에 맞게 사용하시는 것을 권장드리며, 용도와 상관없이 모든 ASLayoutElement에서 접근가능합니다.

## 1. Texture Layout Element Properties에서 주로사용하는 property type 정리

| Name         | Description                                                                                                                                    |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| ASDimension  | unit과 value값을 받습니다. unit는 **auto, points, fraction** 3가지가 있으며 value는 **CGFloat**형태로 넣는다던가 **String형태**로 %, pt와 같은 **suffix**를 추가하여 사용할 수 있습니다. |
| ASLayoutSize | ASLayoutSize는 CGSize와 다르게 CGFloat가 아닌 **ASDimension Type의 width, height**를 받습니다.                                                               |

```swift
// ASDimension Example

let point = ASDimension(unit: .points, value: 100.0)
let point2 = ASDimensionMake("100.0pt")

let fraction = ASDimension(unit: .fractions, value: 0.5) // 50%
let fraction2 = ASDimensionMake("50%") // 50%

// ASLayoutSize Example
let width = ASDimension(unit: .points, value: 100.0)
let height = ASDimension(unit: .points, value: 100.0)
let relativeSize = ASLayoutSize(width: width, height: height)

let width2 = ASDimension(unit: .fractions, value: 0.5)
let height2 = ASDimension(unit: .fractions, value: 0.5)
let relativeSize2 = ASLayoutSize(width: width, height: height)
```

더 자세한 설명은 [여기](https://texture-kr.gitbook.io/wiki/layout-api/layout-api-sizing)를 참고해주세요.  

## 2. Basic Layout Element Properties

| Name                    | Type         | Defult Value                                                  | Description                                                                                                           |
| ----------------------- | ------------ | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **width**               | ASDimension  | ASDimensionAuto                                               | <p>레이아웃의 넓이를 지정합니다.</p><p><em>유의사항: width를 설정시 minWidth와 maxWidth가 width로 재설정됩니다.</em></p>                            |
| **height**              | ASDimension  | ASDimensionAuto                                               | <p>레이아웃의 높이를 지정합니다.</p><p><em>유의사항: height를 설정시 minHeight와 maxHeight가 height로 재설정됩니다.</em></p>                        |
| **minWidth**            | ASDimension  | ASDimensionAuto                                               | 레이아웃의 최소 넓이를 지합니다. 지정된 값보다 작아지는 것을 방지합니다.                                                                             |
| **maxWidth**            | ASDimension  | ASDimensionAuto                                               | 레이아웃의 최대 넓이를 지정합니다. 지정된 값보다 커지는 것을 방지합니다.                                                                             |
| **minHeight**           | ASDimension  | ASDimensionAuto                                               | 레이아웃의 최소 높이를 지정합니다. 지정된 값보다 작아지는 것을 방지합니다.                                                                            |
| **maxHeight**           | ASDimension  | ASDimensionAuto                                               | 레이아웃 최대 높이를 지정합니다. 지정된 값보다 커지는 것을 방지합니다.                                                                              |
| **preferredSize**       | CGSize       | <p>zero,</p><p>기본적으로calculatedSizeThatFits: 에 의해 결정됩니다.</p>   | 레이아웃 요소에 제안하고자 하는 사이즈를 지정합니다. 하지만 지정한 값보다 커지거나 작아지면 상황에 따라 minSize 또는 maxSize가 적용됩니다.                                 |
| **minSize**             | CGSize       | **setter (set only)**                                         | 레이아웃에 대한 최소 사이즈를 지정합니다. 유의사항: *만약 부모 레이아웃의 최소 크기가 자식의 최소 크기보다 작은 경우 자식의 최소 크기로 결정됩니다.*                                |
| **maxSize**             | CGSize       | **setter (set only)**                                         | <p>레이아웃에 대한 최대 사이즈를 지정합니다.</p><p><em>유의사항: 만약 자식 레이아웃의 최대 크기가 부모의 최대 크기보다 작은 경우 자식의 최대크기가 적용됩니다.</em></p>             |
| **preferredLayoutSize** | ASLayoutSize | <p>zero,</p><p>기본적으로는 calculatedSizeThatFits: 에 의해 결정됩니다.</p> | <p>레이아웃 요소에 대해 상대적 크기를 제공합니다.</p><p><em>유의사항: ASLayoutSize는 unit값이 point가 아니라 percentage(%, 0.0 \~ 1.0) 입니다.</em></p> |
| **minLayoutSize**       | ASLayoutSize | layout spec에 따라 결정                                            | 레이아웃 요소에 대해 최소한의 상대크기를 제공합니다.                                                                                         |
| **maxLayoutSize**       | ASLayoutSize | layout spec에 따라 결정                                            | 레이아웃 요소에 대해 최대한의 상대크기를 제공합니다.                                                                                         |

## 3. Stack Layout Element Properties (ASStackLayoutElement)

| Name              | Type                   | Default Value   | Description                                   |
| ----------------- | ---------------------- | --------------- | --------------------------------------------- |
| **flexGrow**      | CGFloat                | 0.0             | 레이아웃의 증가 너비 비율을 지정합니다.                        |
| **flexShrink**    | CGFloat                | 0.0             | 레이아웃의 감소 너비 비율을 지정합니다.                        |
| **flexBasis**     | ASDimension            | ASDimensionAuto | 레이아웃이 Stack상 공간이 배분되기전 기본 너비를 지정합니다.          |
| **alignSelf**     | ASStackLayoutAlignSelf | auto            | 교차 축상에서 레이아웃의 정렬 방법을 지정합니다.                   |
| **spacingBefore** | CGFloat                | 0.0             | Stack방향을 기준으로 동등한 위치 상에서 이전 레이아웃과의 간격을 지정합니다. |
| **spacingAfter**  | CGFloat                | 0.0             | Stack방향을 기준으로 동등한 위치 상에서 다음 레이아웃과의 간격을 지정합니다. |
| **ascender**      | CGFloat                | 0.0             | 기준선 정렬에 사용됩니다. 레이아웃의 맨 위에서 기준선까지의 거리를 의미합니다.  |
| **descender**     | CGFloat                | 0.0             | 기준선 정렬에 사용됩니다. 레이아웃의 기준선에서 맨 아래까지의 거리를 의미합니다. |

## 4. Absolute Layout Element Properties (ASAbsoluteLayoutElement)

| Name               | Type    | Default Value                      | Description               |
| ------------------ | ------- | ---------------------------------- | ------------------------- |
| **layoutPosition** | CGPoint | <p>zero</p><p>(x: 0.0, y: 0.0)</p> | 부모 레이아웃 상에서 고정 위치를 지정합니다. |