<template>
  <view class="s-safe-area-inset" :class="c_class" :style="custom_style"></view>
</template>

<script>
import componentMixin from '../../mixins/componentMixin';

/**
 * s-safe-area-inset
 * @description iphoneX 安全区域占位空间
 * @property {String} position = [bottom|top|left|right]
 * @example <s-safe-area-inset />
 */
export default {
  name: 'SSafeAreaInset',
  mixins: [componentMixin],
  props: {
    position: {
      type: String,
      default: 'bottom',
    },
  },
  computed: {
    c_class() {
      return this.$mergeClass('s-safe-area-inset--' + this.position, this.custom_class);
    },
  },
};
</script>

<style lang="scss" src="./index.scss"></style>
