RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/react/docs/components/dropdown/api/ below:

React Dropdown Component API - CoreUI

alignment# - 'start', 'end', { xs: 'start' | 'end' }, { sm: 'start' | 'end' }, { md: 'start' | 'end' }, { lg: 'start' | 'end' }, { xl: 'start' | 'end'}, { xxl: 'start' | 'end'}

Specifies the alignment of the React Dropdown Menu within this React Dropdown.

<CDropdown alignment={{ lg: 'end', xs: 'start' }}>
  <CDropdownToggle>Toggle dropdown</CDropdownToggle>
  <CDropdownMenu>
    <CDropdownItem>Action</CDropdownItem>
    <CDropdownItem>Another Action</CDropdownItem>
  </CDropdownMenu>
</CDropdown>

as# div (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>)

Determines the root node component (native HTML element or a custom React component) for the React Dropdown.

autoClose# true boolean, 'inside', 'outside'

Configures automatic closing behavior for the React Dropdown:

true - Close on clicks inside or outside of the React Dropdown Menu.
false - Disable auto-close; manually call hide or toggle (also not closed by Escape).
'inside' - Close only when clicking inside the React Dropdown Menu.
'outside' - Close only when clicking outside the React Dropdown Menu.

<CDropdown autoClose="outside" />

className# - string

Adds custom classes to the React Dropdown root element.

container#4.11.0+ - Element, DocumentFragment, (() => Element | DocumentFragment)

Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to document.body.

const myContainer = document.getElementById('my-container')
<CDropdown container={myContainer} />

dark# - boolean

Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.

direction# - 'center', 'dropup', 'dropup-center', 'dropend', 'dropstart'

Specifies the direction of the React Dropdown.

offset# [0, 2] [number, number]

Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.

<CDropdown offset={[10, 5]}>
  ...
</CDropdown>

onHide#4.9.0+ - () => void

Callback fired right before the React Dropdown becomes hidden.

onShow# - () => void

Callback fired immediately after the React Dropdown is displayed.

placement# bottom-start 'auto', 'auto-start', 'auto-end', 'top-end', 'top', 'top-start', 'bottom-end', 'bottom', 'bottom-start', 'right-start', 'right', 'right-end', 'left-start', 'left', 'left-end'

Determines the placement of the React Dropdown Menu after Popper.js modifiers.

popper# true boolean

Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.

popperConfig#5.5.0+ - Partial<Options>, ((defaultPopperConfig: Partial<Options>) => Partial<Options>)

Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. Read more

<CDropdown
  popperConfig={{
    modifiers: [
      {
        name: 'flip',
        options: { fallbackPlacements: ['bottom', 'top'] },
      },
    ],
  }}
>...</CDropdown>

portal#4.8.0+ false boolean

Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.

variant# btn-group 'btn-group', 'dropdown', 'input-group', 'nav-item'

Defines the visual variant of the React Dropdown

visible# false boolean

Controls the visibility of the React Dropdown Menu:

true - Visible
false - Hidden

const [visible, setVisible] = useState(false)
<CDropdown visible={visible}>
  ...
</CDropdown>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4