@devtools-ds/导航

一个带有标签和图标的导航栏,基于浏览器检查器中的标签导航.

安装

npm i @devtools-ds/nav
# or with yarn
yarn add @devtools-ds/nav

无障碍办法

这个组件是几个用户交互模式的组合. 关键是 Navigation 是当前页面的顶级导航。 里面写着 Tabs 沿着 WAI-ARIA 分小组规格。用于我们使用的标签 @ reach/ tabs 设置正确的属性和键盘交互.

使用量

import { Navigation } from "@devtools-ds/navigation";

export const BasicUsage = () => {
  return (
    <Navigation>
      <Navigation.Controls>
        <Navigation.Left>
          <Navigation.Button
            icon={<SelectIcon inline />}
            aria-label="Inspect page"
          />
          <Navigation.Divider />
        </Navigation.Left>
        <Navigation.TabList>
          <Navigation.Tab id="elements" icon={<InspectorIcon inline />}>
            Elements
          </Navigation.Tab>
          <Navigation.Tab id="console" icon={<ConsoleIcon inline />}>
            Console
          </Navigation.Tab>
          <Navigation.Tab id="debugger" icon={<DebuggerIcon inline />}>
            Debugger
          </Navigation.Tab>
          <Navigation.Tab id="styles" icon={<StylesIcon inline />}>
            Style Editor
          </Navigation.Tab>
          <Navigation.Tab id="performance" icon={<OdometerIcon inline />}>
            Performance
          </Navigation.Tab>
          <Navigation.Tab id="memory" icon={<MemoryIcon inline />}>
            Memory
          </Navigation.Tab>
        </Navigation.TabList>

        <Navigation.Right>
          <Navigation.Button
            icon={<NewWindowIcon inline />}
            aria-label="New Window"
          />

          <Navigation.Divider />
          <Navigation.Button
            icon={<MoreInfoIcon inline />}
            aria-label="More settings"
          />
          <Navigation.Button
            icon={<CloseIcon inline />}
            aria-label="Close panel"
          />
        </Navigation.Right>
      </Navigation.Controls>
      <Navigation.Panels>
        <Navigation.Panel>Elements</Navigation.Panel>
        <Navigation.Panel>Console</Navigation.Panel>
        <Navigation.Panel>Debugger</Navigation.Panel>
        <Navigation.Panel>Styles</Navigation.Panel>
        <Navigation.Panel>Performance</Navigation.Panel>
        <Navigation.Panel>Memory</Navigation.Panel>
      </Navigation.Panels>
    </Navigation>
  );
};

贡献者

感谢这些伟大的人emoji 密钥:

亚当·迪尔肯斯 💻 📖 🎨

泰勒克鲁皮卡 📖 💻 💡 ⚠️

安德鲁·利索夫斯基 💡 💻

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!