工具提示组件

这个 工具提示 组件是一个 React 组件,设计在某个组件徘徊/盘点时显示额外信息数据.

目录

• 安装
• 使用量
• 道具
• 示例
• 捐款

安装

用来使用 工具提示 应用中的组件,请遵循这些步骤:

安装

npm install @bolttech/frontend-foundations @bolttech/atoms-tooltip

或者说

yarn add @bolttech/frontend-foundations @bolttech/atoms-tooltip

一旦安装了所需的依赖性,就可以开始使用 Tooltip 组件.

使用量

这个 工具提示 组件提供了在桌面上徘徊或移动中组件上录音时显示额外数据的简单方式.

要使用该组件,请导入并将其纳入您的JSX:

import React from 'react';
import { Tooltip } from '@bolttech/atoms-tooltip';
import { Icon } from '@bolttech/atoms-icon';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tooltip size="small" variant="dark" content="This is the tooltip text">
        <Icon icon="help" />
      </Tooltip>
    </BolttechThemeProvider>
  );
}

export default App;

道具

这个 工具提示 组件接受下列道具:

示例

这里有一个例子是使用 工具提示 组件 :

import React from 'react';
import { Tooltip } from '@bolttech/atoms-tooltip';
import { Icon } from '@bolttech/atoms-icon';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tooltip size="small" variant="dark" content="This is the tooltip text">
        <Icon icon="help" />
      </Tooltip>
    </BolttechThemeProvider>
  );
}

export default App;

这将让图标带有 工具提示 当你徘徊在它.

捐款

捐款 工具提示 欢迎参加。 如果您发现任何问题或有改进建议,请随意打开一个问题或就项目Bitbucket寄存器提交拉动请求.