1 | import * as React from 'react';
|
2 | import ButtonBase from '../ButtonBase';
|
3 | import { TabScrollButtonProps } from '../TabScrollButton';
|
4 | import { OverridableComponent, OverrideProps } from '../OverridableComponent';
|
5 |
|
6 | export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof ButtonBase> {
|
7 | props: P & {
|
8 | /**
|
9 | * Callback fired when the component mounts.
|
10 | * This is useful when you want to trigger an action programmatically.
|
11 | * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
|
12 | *
|
13 | * @param {object} actions This object contains all possible actions
|
14 | * that can be triggered programmatically.
|
15 | */
|
16 | action?: React.Ref<TabsActions>;
|
17 | /**
|
18 | * The label for the Tabs as a string.
|
19 | */
|
20 | 'aria-label'?: string;
|
21 | /**
|
22 | * An id or list of ids separated by a space that label the Tabs.
|
23 | */
|
24 | 'aria-labelledby'?: string;
|
25 | /**
|
26 | * If `true`, the tabs will be centered.
|
27 | * This property is intended for large views.
|
28 | */
|
29 | centered?: boolean;
|
30 | /**
|
31 | * The content of the component.
|
32 | */
|
33 | children?: React.ReactNode;
|
34 | /**
|
35 | * Determines the color of the indicator.
|
36 | */
|
37 | indicatorColor?: 'secondary' | 'primary';
|
38 | /**
|
39 | * Callback fired when the value changes.
|
40 | *
|
41 | * @param {object} event The event source of the callback
|
42 | * @param {any} value We default to the index of the child (number)
|
43 | */
|
44 | onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
|
45 | /**
|
46 | * The tabs orientation (layout flow direction).
|
47 | */
|
48 | orientation?: 'horizontal' | 'vertical';
|
49 | /**
|
50 | * The component used to render the scroll buttons.
|
51 | */
|
52 | ScrollButtonComponent?: React.ElementType;
|
53 | /**
|
54 | * Determine behavior of scroll buttons when tabs are set to scroll:
|
55 | *
|
56 | * - `auto` will only present them when not all the items are visible.
|
57 | * - `desktop` will only present them on medium and larger viewports.
|
58 | * - `on` will always present them.
|
59 | * - `off` will never present them.
|
60 | */
|
61 | scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
|
62 | /**
|
63 | * If `true` the selected tab changes on focus. Otherwise it only
|
64 | * changes on activation.
|
65 | */
|
66 | selectionFollowsFocus?: boolean;
|
67 | /**
|
68 | * Props applied to the tab indicator element.
|
69 | */
|
70 | TabIndicatorProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
|
71 | /**
|
72 | * Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
|
73 | */
|
74 | TabScrollButtonProps?: Partial<TabScrollButtonProps>;
|
75 | /**
|
76 | * Determines the color of the `Tab`.
|
77 | */
|
78 | textColor?: 'secondary' | 'primary' | 'inherit';
|
79 | /**
|
80 | * The value of the currently selected `Tab`.
|
81 | * If you don't want any selected `Tab`, you can set this property to `false`.
|
82 | */
|
83 | value?: any;
|
84 | /**
|
85 | * Determines additional display behavior of the tabs:
|
86 | *
|
87 | * - `scrollable` will invoke scrolling properties and allow for horizontally
|
88 | * scrolling (or swiping) of the tab bar.
|
89 | * -`fullWidth` will make the tabs grow to use all the available space,
|
90 | * which should be used for small views, like on mobile.
|
91 | * - `standard` will render the default state.
|
92 | */
|
93 | variant?: 'standard' | 'scrollable' | 'fullWidth';
|
94 | };
|
95 | defaultComponent: D;
|
96 | classKey: TabsClassKey;
|
97 | }
|
98 |
|
99 | /**
|
100 | *
|
101 | * Demos:
|
102 | *
|
103 | * - [Tabs](https://mui.com/components/tabs/)
|
104 | *
|
105 | * API:
|
106 | *
|
107 | * - [Tabs API](https://mui.com/api/tabs/)
|
108 | */
|
109 | declare const Tabs: OverridableComponent<TabsTypeMap>;
|
110 |
|
111 | export type TabsClassKey =
|
112 | | 'root'
|
113 | | 'flexContainer'
|
114 | | 'scroller'
|
115 | | 'fixed'
|
116 | | 'scrollable'
|
117 | | 'centered'
|
118 | | 'scrollButtons'
|
119 | | 'scrollButtonsDesktop'
|
120 | | 'indicator';
|
121 |
|
122 | export interface TabsActions {
|
123 | updateIndicator(): void;
|
124 | updateScrollButtons(): void;
|
125 | }
|
126 |
|
127 | export type TabsProps<
|
128 | D extends React.ElementType = TabsTypeMap['defaultComponent'],
|
129 | P = {}
|
130 | > = OverrideProps<TabsTypeMap<P, D>, D>;
|
131 |
|
132 | export default Tabs;
|