@dnb/eufemia/components/tabs/TabsDocs.js

DNB Eufemia Design System UI Library

export const TabsProperties = {
  selectedKey: {
    doc: 'In case one of the tabs should be opened by a `key`.',
    type: ['string', 'number'],
    status: 'optional'
  },
  align: {
    doc: 'To align the tab list on the right side `align="right"`. Defaults to `left`.',
    type: ['"left"', '"center"', '"right"'],
    status: 'optional'
  },
  contentStyle: {
    doc: 'To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',
    type: ['"divider"', '"white"', '"transparent"'],
    status: 'optional'
  },
  contentInnerSpace: {
    doc: "To modify the inner space of the content wrapper. Defaults to `{ top: 'large' }`.",
    type: ['boolean', 'string', 'InnerSpaceType'],
    status: 'optional'
  },
  tabsStyle: {
    doc: 'To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',
    type: ['"divider"', '"white"', '"transparent"'],
    status: 'optional'
  },
  tabsInnerSpace: {
    doc: 'To modify the top padding of the tab list. Only applies `paddingTop`. Defaults to `undefined`.',
    type: ['boolean', 'string'],
    status: 'optional'
  },
  tabElement: {
    doc: "Define what HTML element should be used. You can provide e.g. `tabElement={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: '/url', ... }]}`). Defaults to `<button>`.",
    type: 'React.ReactNode',
    status: 'optional'
  },
  '[data](/uilib/components/tabs/properties/#data-object)': {
    doc: 'Defines the data structure to load as an object.',
    type: 'object',
    status: 'optional'
  },
  children: {
    doc: "The content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.",
    type: ['React.ReactNode', 'object'],
    status: 'optional'
  },
  content: {
    doc: "The content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.",
    type: ['React.ReactNode', 'object'],
    status: 'optional'
  },
  keepInDOM: {
    doc: 'If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  preventRerender: {
    doc: 'If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `keepInDOM`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  scroll: {
    doc: 'If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  noBorder: {
    doc: 'If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  navButtonEdge: {
    doc: 'If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.',
    type: 'boolean',
    status: 'optional'
  },
  skeleton: {
    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
    type: 'boolean',
    status: 'optional'
  },
  breakout: {
    doc: 'If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.',
    type: 'boolean',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
export const TabsDataObject = {
  title: {
    doc: 'The title of the tab.',
    type: ['string', 'React.ReactNode'],
    status: 'required'
  },
  key: {
    doc: 'The unique key of the tab.',
    type: ['string', 'number'],
    status: 'required'
  },
  content: {
    doc: 'The content of the tab.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  selected: {
    doc: 'If set to `true`, the tab will be selected.',
    type: 'boolean',
    status: 'optional'
  },
  disabled: {
    doc: 'If set to `true`, the tab will be disabled.',
    type: 'boolean',
    status: 'optional'
  }
};
export const TabsEvents = {
  onChange: {
    doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selectedKey, focusKey, title, event }`.',
    type: 'function',
    status: 'optional'
  },
  onClick: {
    doc: 'This event gets triggered once the tab gets clicked. Returns `{ key, selectedKey, focusKey, title, event }`.',
    type: 'function',
    status: 'optional'
  },
  onFocus: {
    doc: 'This event gets triggered once the tab changes its focus key. Returns `{ key, selectedKey, focusKey, title, event }`.',
    type: 'function',
    status: 'optional'
  },
  onMouseEnter: {
    doc: "This event gets triggered once the user's mouse enters a tab (hover). Returns `{ key, selectedKey, focusKey, title, event }`.",
    type: 'function',
    status: 'optional'
  }
};
//# sourceMappingURL=TabsDocs.js.map