34 lines
827 B
Markdown
34 lines
827 B
Markdown
|
# @fluentui/react-tabster
|
||
|
|
|
||
|
|
**Tabster components for [Fluent UI React](https://react.fluentui.dev)**
|
||
|
|
|
||
|
|
Library for focus management that leverages [tabster](https://github.com/microsoft/tabster).
|
||
|
|
|
||
|
|
The API currently only supports declarative data-\* attributes that are returned using the exported react hooks:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import * as React from 'react';
|
||
|
|
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
||
|
|
|
||
|
|
const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;
|
||
|
|
|
||
|
|
const ArrowNavigationExample: React.FC = ({ children }) => {
|
||
|
|
const attrs = useArrowNavigationGroup({ circular: true });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div {...attrs}>
|
||
|
|
<Item />
|
||
|
|
<Item />
|
||
|
|
<Item />
|
||
|
|
<Item />
|
||
|
|
<Item />
|
||
|
|
<Item />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const App: React.FC = () => {
|
||
|
|
return <ArrowNavigationExample />;
|
||
|
|
};
|
||
|
|
```
|