Tips 气泡

Tips 是一个气泡弹框组件。

代码演示

气泡 - 上左

import { Tips } from 'tuya-panel-kit'

const [state, setState] = React.useState({
  topLeft: false,
});
const bigTips = {
  width: 110,
  height: 64,
  borderRadius: 16,
};

<Tips
  show={state.topLeft}
  contentStyle={bigTips}
  bgColor="#333333"
  cornerPosition="topLeft"
/>

气泡 - 上中

import { Tips } from 'tuya-panel-kit'

const [state, setState] = React.useState({
  topCenter: false,
});
const bigTips = {
  width: 110,
  height: 64,
  borderRadius: 16,
};

<Tips
  show={state.topCenter}
  contentStyle={bigTips}
  bgColor="#333333"
  cornerPosition="topCenter"
/>

气泡 - 上右

import { Tips } from 'tuya-panel-kit'

const [state, setState] = React.useState({
  topRight: false,
});
const bigTips = {
  width: 110,
  height: 64,
  borderRadius: 16,
};

<Tips
  show={state.topRight}
  contentStyle={bigTips}
  bgColor="#333333"
  cornerPosition="topRight"
/>

气泡 - 下左

import { Tips } from 'tuya-panel-kit'

const [state, setState] = React.useState({
  bottomLeft: false,
});
const bigTips = {
  width: 110,
  height: 64,
  borderRadius: 16,
};

<Tips
  show={state.bottomLeft}
  contentStyle={bigTips}
  bgColor="#333333"
  cornerPosition="bottomLeft"
/>

气泡 - 下中

import { Tips } from 'tuya-panel-kit'

const [state, setState] = React.useState({
  bottomCenter: false,
});
const bigTips = {
  width: 110,
  height: 64,
  borderRadius: 16,
};

<Tips
  show={state.bottomCenter}
  contentStyle={bigTips}
  bgColor="#333333"
  cornerPosition="bottomCenter"
/>

气泡 - 下右

import { Tips } from 'tuya-panel-kit'

const [state, setState] = React.useState({
  bottomRight: false,
});
const bigTips = {
  width: 110,
  height: 64,
  borderRadius: 16,
};

<Tips
  show={state.bottomRight}
  contentStyle={bigTips}
  bgColor="#333333"
  cornerPosition="bottomRight"
/>

Tuya Design

Tips 气泡

代码演示

气泡 - 上左

气泡 - 上中

气泡 - 上右

气泡 - 下左

气泡 - 下中

气泡 - 下右

API