反射提示魔法 QQ

一个深思熟虑的用于反应的工具提示库——简单使用,令人愉快的经验.

为什么是小提示魔法?

工具提示看起来很简单,但是要正确处理 它们应该在需要时出现,在不时不要挡道,在用户浏览您的界面时感觉自然.

React Tip Magic 处理细节, 这样你就不用 - 定位, 过渡, 访问, 键盘支持 - 都有一个干净的, 宣示性的 API .

快速启动

npm install @galangel/react-tip-magic

import { TipMagicProvider } from '@galangel/react-tip-magic';
import '@galangel/react-tip-magic/styles.css';

function App() {
  return (
    <TipMagicProvider>
      <YourApp />
    </TipMagicProvider>
  );
}

就是这样。 现在添加 data-tip 改为任何元素:

<button data-tip="Save your changes">Save</button>

工具提示

反应提示魔法的核心. 一个工具提示实例,在元素之间优雅地移动,提供了平稳而连贯的经验.

基本用途

<button data-tip="Click to save">Save</button>
<button data-tip="Undo last action">Undo</button>

键盘快捷键

使用工具提示显示快捷键 data-tip-shortcut 属性 :

<button data-tip="Copy" data-tip-shortcut="⌘C">Copy</button>
<button data-tip="Paste" data-tip-shortcut="⌘V">Paste</button>
<button data-tip="Save" data-tip-shortcut="⌘S">Save</button>

定位行为( B)

{
  /* Position control */
}
<button data-tip="Below the button" data-tip-placement="bottom">
  Hover me
</button>;

{
  /* Smooth transitions between grouped elements */
}
<nav>
  <a data-tip="Home" data-tip-move data-tip-group="nav">
    Home
  </a>
  <a data-tip="About" data-tip-move data-tip-group="nav">
    About
  </a>
  <a data-tip="Contact" data-tip-move data-tip-group="nav">
    Contact
  </a>
</nav>;

{
  /* Interactive tooltips that stay visible on hover */
}
<span data-tip="Click <a href='#'>here</a> to learn more" data-tip-html data-tip-interactive>
  More info
</span>;

导游

用分步巡演让用户通过您的界面. 有助于登机、特性介绍或背景指导.

import { useTour } from '@galangel/react-tip-magic';

function App() {
  const tour = useTour({
    steps: [
      { target: 'dashboard', title: 'Welcome', content: 'This is your dashboard.' },
      { target: 'create-btn', title: 'Create', content: 'Click here to get started.' },
    ],
    // Built-in Back/Next controls are off by default—turn them on for multi-step tours
    navigation: { showControls: true },
    progress: { show: true },
  });

  return (
    <div>
      <nav data-tip-id="dashboard">Dashboard</nav>
      <button data-tip-id="create-btn" onClick={tour.start}>
        New Project
      </button>
    </div>
  );
}

useTour 默认为无头: 离开 navigation.showControls 取消设置, 并从返回时创建自己的控制 next, (中文(简体) ), prev, (中文(简体) ), end 财务报告和审定财务报表 progress。 。 。 .

const tour = useTour({ steps });

{
  tour.isActive && (
    <div>
      <span>
        {tour.progress.current} of {tour.progress.total}
      </span>
      <button onClick={tour.prev} disabled={tour.currentStep?.isFirst}>
        Back
      </button>
      <button onClick={tour.next}>{tour.currentStep?.isLast ? 'Finish' : 'Next'}</button>
    </div>
  );
}

步骤内容为 HTML

步骤 content 被注入为 HTML ,以使标题、媒体和控件工作。 使用 text 当值是纯文本时, 库应该为您逃出 :

{ target: 'profile', text: `Signed in as ${user.name}` }

就是其中一个 content 或者说 text 需要——一个既不是,也不是两者都无法编译的步骤. 对于带有内插值的标记,请保留 content 以导出值逃避值 escapeHtml数字 :

import { escapeHtml } from '@galangel/react-tip-magic';

{ target: 'profile', content: `Signed in as <b>${escapeHtml(user.name)}</b>` }

当目标不在时

start() 返回时 false 和改变什么 - 不 onStart,没有 onStepChange如果DOM里没有步骤的目标, 所以巡演不能让 从来没有报告自己显示。 供应 onTargetMissing 自己处理(和保持图书馆关闭) console.warn:

const tour = useTour({
  steps,
  onTargetMissing: (step) => {
    logger.warn('tour target missing', { target: step.target });
    return 'skip'; // or end the tour, which is the default
  },
});

if (tour.start()) {
  markTourAsSeen();
}

恢复取决于旅行方向: next() 跳过或结束巡演,同时 prev() 财务报告和审定财务报表 goTo() 把它留在原地——屏幕上的台阶仍然很好. goTo() 从来没有跳过,所以它降落在 你要求的台阶或返回 false。 。 。 .

重点土地

参观面板是一个对话,所以当一个步骤打开时,焦点会移动到其中. autoFocus 选择其中的元素 :

const tour = useTour({
  steps,
  // 'panel' (default) | 'primary' — Next/Finish, so Enter advances | false — leave focus alone
  navigation: { showControls: true, autoFocus: 'primary' },
});

'primary' 当一个步骤没有下/完成按钮时返回面板——永远不要关闭按钮。 每一步可超过 step.navigation.autoFocus。 。 。 .

参观还支持进展指标、键盘支持和背景突出(focus: true,或 focus: { dismissOnClick: true } ——这些都适合你的需要.

小费顾问

键盘快捷键发现菜单 。 按下密钥(默认为F1)以显示界面中所有可用的快捷键,并进行模糊搜索以快速找到需要的东西.

import { TipAdvisor } from '@galangel/react-tip-magic';

function App() {
  return (
    <TipMagicProvider>
      <div className="toolbar">
        <button data-tip="Copy" data-tip-shortcut="⌘C">
          Copy
        </button>
        <button data-tip="Paste" data-tip-shortcut="⌘V">
          Paste
        </button>
        <button data-tip="Save" data-tip-shortcut="⌘S">
          Save
        </button>
      </div>

      {/* Press F1 to open the advisor */}
      <TipAdvisor />
    </TipMagicProvider>
  );
}

特征 :

• 带有突出显示的匹配的模糊搜索
• 键盘导航( 窄键+ 输入)
• 跳转到预览工具提示位置
• 单击以触发关联元素

数据属性

程序化 API

更多的控制,请使用 useTipMagic 钩:

import { useTipMagic } from '@galangel/react-tip-magic';

function MyComponent() {
  const { tooltip } = useTipMagic();

  const handleClick = () => {
    tooltip.show('#my-element', 'Dynamic content');
  };

  return (
    <button id="my-element" onClick={handleClick}>
      Click me
    </button>
  );
}

内设

• 反应 18+ 带有现代钩子
• 类型脚本 类型安全
• 浮动 UI 用于定位
• 故事书 文档

许可证

阿帕奇 - 2.0

照顾反应社区