margin

margin 함수는 컴포넌트의 외부 간격을 설정해서, 컴포넌트들 간의 적절한 간격을 확보해요. 가로(x), 세로(y), 그리고 각 방향(top, right, bottom, left)별로 외부 여백을 숫자로 지정할 수 있어요. 숫자를 입력하면 모든 방향에 동일한 값을 적용하거나, 각 방향별로 개별 설정이 가능해요. 또한 자주 쓰는 값에 대한 프리셋이 있어 쉽게 적용할 수 있어요.

시그니처

margin: BoxSpacing

파라미터

• option필수 · BoxSpacingOption
  

  바깥쪽 여백을 지정하는 옵션 값이예요. 숫자를 넣으면 모든 방향에 동일한 값을 적용하고,

각 방향에 대해 개별 값을 설정할 수도 있어요.

프로퍼티

• x필수 · (value: number) => ViewStyle
  

  컴포넌트의 가로 방향(왼쪽과 오른쪽)에 입력한 숫자만큼의 바깥쪽 여백을 설정하는 스타일 객체를 반환해요. 반환된 객체는 컴포넌트의 style 속성에 전달되어 여백이 적용돼요.

• x4필수 · ViewStyle
  

  가로 방향에 4px의 바깥쪽 여백을 적용하는 스타일 객체예요

• x8필수 · ViewStyle
  

  가로 방향에 8px의 바깥쪽 여백을 적용하는 스타일 객체예요

• x12필수 · ViewStyle
  

  가로 방향에 12px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• x16필수 · ViewStyle
  

  가로 방향에 16px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• x24필수 · ViewStyle
  

  가로 방향에 24px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• x32필수 · ViewStyle
  

  가로 방향에 32px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• y필수 · (value: number) => ViewStyle
  

  컴포넌트의 세로 방향(위쪽과 아래쪽)에 입력한 숫자만큼의 바깥쪽 여백을 설정하는 스타일 객체를 반환해요. 반환된 객체는 컴포넌트의 style 속성에 전달되어 여백이 적용돼요.

• y4필수 · ViewStyle
  

  세로 방향에 4px의 바깥쪽 여백을 적용하는 스타일 객체예요

• y8필수 · ViewStyle
  

  세로 방향에 8px의 바깥쪽 여백을 적용하는 스타일 객체예요

• y12필수 · ViewStyle
  

  세로 방향에 12px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• y16필수 · ViewStyle
  

  세로 방향에 16px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• y24필수 · ViewStyle
  

  세로 방향에 24px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• y32필수 · ViewStyle
  

  세로 방향에 32px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• top필수 · (value: number) => ViewStyle
  

  컴포넌트의 위쪽 방향에 입력한 숫자만큼의 바깥쪽 여백을 설정하는 스타일 객체를 반환해요. 반환된 객체는 컴포넌트의 style 속성에 전달되어 여백이 적용돼요.

• top4필수 · ViewStyle
  

  위에 4px의 바깥쪽 여백을 적용하는 스타일 객체예요

• top8필수 · ViewStyle
  

  위에 8px의 바깥쪽 여백을 적용하는 스타일 객체예요

• top12필수 · ViewStyle
  

  위에 12px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• top16필수 · ViewStyle
  

  위에 16px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• top24필수 · ViewStyle
  

  위에 24px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• top32필수 · ViewStyle
  

  위에 32px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• right필수 · (value: number) => ViewStyle
  

  컴포넌트의 오른쪽 방향에 입력한 숫자만큼의 바깥쪽 여백을 설정하는 스타일 객체를 반환해요. 반환된 객체는 컴포넌트의 style 속성에 전달되어 여백이 적용돼요.

• right4필수 · ViewStyle
  

  오른쪽에 4px의 바깥쪽 여백을 적용하는 스타일 객체예요

• right8필수 · ViewStyle
  

  오른쪽에 8px의 바깥쪽 여백을 적용하는 스타일 객체예요

• right12필수 · ViewStyle
  

  오른쪽에 12px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• right16필수 · ViewStyle
  

  오른쪽에 16px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• right24필수 · ViewStyle
  

  오른쪽에 24px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• right32필수 · ViewStyle
  

  오른쪽에 32px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• bottom필수 · (value: number) => ViewStyle
  

  컴포넌트의 아래쪽 방향에 입력한 숫자만큼의 바깥쪽 여백을 설정하는 스타일 객체를 반환해요. 반환된 객체는 컴포넌트의 style 속성에 전달되어 여백이 적용돼요.

• bottom4필수 · ViewStyle
  

  아래에 4px의 바깥쪽 여백을 적용하는 스타일 객체예요

• bottom8필수 · ViewStyle
  

  아래에 8px의 바깥쪽 여백을 적용하는 스타일 객체예요

• bottom12필수 · ViewStyle
  

  아래에 12px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• bottom16필수 · ViewStyle
  

  아래에 16px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• bottom24필수 · ViewStyle
  

  아래에 24px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• bottom32필수 · ViewStyle
  

  아래에 32px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• left필수 · (value: number) => ViewStyle
  

  컴포넌트의 왼쪽 방향에 입력한 숫자만큼의 바깥쪽 여백을 설정하는 스타일 객체를 반환해요. 반환된 객체는 컴포넌트의 style 속성에 전달되어 여백이 적용돼요.

• left4필수 · ViewStyle
  

  왼쪽에 4px의 바깥쪽 여백을 적용하는 스타일 객체예요

• left8필수 · ViewStyle
  

  왼쪽에 8px의 바깥쪽 여백을 적용하는 스타일 객체예요

• left12필수 · ViewStyle
  

  왼쪽에 12px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• left16필수 · ViewStyle
  

  왼쪽에 16px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• left24필수 · ViewStyle
  

  왼쪽에 24px의 바깥쪽 여백을 적용하는 스타일 객체예요.

• left32필수 · ViewStyle
  

  왼쪽에 32px의 바깥쪽 여백을 적용하는 스타일 객체예요.

예제

가로, 세로 방향에 8px의 바깥쪽 여백을 적용하고, 아래 방향에 임의의 여백(100px)을 적용하는 예제예요.

import { margin } from '@granite-js/react-native';
import { View } from 'react-native';

function Component() {
  return (
    <View>
      <View style={margin.x8}>
        <Text>가로 여백이 있어요</Text>
      </View>
      <View style={margin.y8}>
        <Text>세로 여백이 있어요</Text>
      </View>
      <View style={margin.bottom(100)}>
        <Text>아래에 100만큼의 여백이 있어요</Text>
      </View>
    </View>
  );
}