Skip to content

docs(dropdown): align the responsive alignment examples to the toggle #550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xidedix wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(dropdown): align the responsive alignment examples to the toggle #550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...ocs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {

export const DropdownResponsiveAlignment2Example = () => {
return (
<CDropdown alignment={{ xs: 'end', lg: 'start' }}>
<CDropdown alignment={{ xs: 'end', lg: 'start' }} variant="btn-group">
<CDropdownToggle color="secondary">
Right-aligned but left aligned when large screen
</CDropdownToggle>
Expand Down
6 changes: 4 additions & 2 deletions ...docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import {

export const DropdownResponsiveAlignmentExample = () => {
return (
<CDropdown alignment="end">
<CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
<CDropdown alignment={{ lg: 'end' }} variant="btn-group">
<CDropdownToggle color="secondary">
Left-aligned but right aligned when large screen
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/content/docs/components/dropdown/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,15 +220,15 @@ By default, a dropdown menu is automatically positioned 100% from the top and al

### Responsive alignment

If you use responsive alignment, dynamic positioning is disabled.
If you use responsive alignment, dynamic positioning is disabled — the classes place the menu themselves. Set `variant="btn-group"` so that the dropdown wraps just the toggle; with the default variant it is a full-width block, and the menu aligns to the edge of the container instead of the button.

To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
To align **right** the dropdown menu with the given breakpoint or larger, add `alignment={{ lg: 'end' }}`, replacing `lg` with any of `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.

<Example code={DropdownResponsiveAlignmentExampleRaw} name="DropdownResponsiveAlignmentExample" componentName="React Dropdown">
<DropdownResponsiveAlignmentExample client:only="react" />
</Example>

To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
To align **left** the dropdown menu with the given breakpoint or larger, add `alignment={{ xs: 'end', lg: 'start' }}`. Every entry of the map adds its own class, so this one is right aligned by default and left aligned from `lg` up.

<Example code={DropdownResponsiveAlignment2ExampleRaw} name="DropdownResponsiveAlignment2Example" componentName="React Dropdown">
<DropdownResponsiveAlignment2Example client:only="react" />
Expand Down
Loading