-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
274 additions
and
294 deletions.
There are no files selected for viewing
18 changes: 18 additions & 0 deletions
18
apps/docs/content/components/radio-group/controlled.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import {RadioGroup, Radio} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| const [selected, setSelected] = React.useState("london"); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-3"> | ||
| <RadioGroup label="Select your favorite city" value={selected} onValueChange={setSelected}> | ||
| <Radio value="buenos-aires">Buenos Aires</Radio> | ||
| <Radio value="sydney">Sydney</Radio> | ||
| <Radio value="san-francisco">San Francisco</Radio> | ||
| <Radio value="london">London</Radio> | ||
| <Radio value="tokyo">Tokyo</Radio> | ||
| </RadioGroup> | ||
| <p className="text-default-500 text-small">Selected: {selected}</p> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
apps/docs/content/components/radio-group/custom-impl.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import {RadioGroup, useRadio, VisuallyHidden, cn} from "@nextui-org/react"; | ||
|
|
||
| export const CustomRadio = (props) => { | ||
| const { | ||
| Component, | ||
| children, | ||
| description, | ||
| getBaseProps, | ||
| getWrapperProps, | ||
| getInputProps, | ||
| getLabelProps, | ||
| getLabelWrapperProps, | ||
| getControlProps, | ||
| } = useRadio(props); | ||
|
|
||
| return ( | ||
| <Component | ||
| {...getBaseProps()} | ||
| className={cn( | ||
| "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent", | ||
| "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4", | ||
| "data-[selected=true]:border-primary", | ||
| )} | ||
| > | ||
| <VisuallyHidden> | ||
| <input {...getInputProps()} /> | ||
| </VisuallyHidden> | ||
| <span {...getWrapperProps()}> | ||
| <span {...getControlProps()} /> | ||
| </span> | ||
| <div {...getLabelWrapperProps()}> | ||
| {children && <span {...getLabelProps()}>{children}</span>} | ||
| {description && ( | ||
| <span className="text-small text-foreground opacity-70">{description}</span> | ||
| )} | ||
| </div> | ||
| </Component> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <RadioGroup label="Plans"> | ||
| <CustomRadio description="Up to 20 items" value="free"> | ||
| Free | ||
| </CustomRadio> | ||
| <CustomRadio description="Unlimited items. $10 per month." value="pro"> | ||
| Pro | ||
| </CustomRadio> | ||
| <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise"> | ||
| Enterprise | ||
| </CustomRadio> | ||
| </RadioGroup> | ||
| ); | ||
| } |
56 changes: 56 additions & 0 deletions
56
apps/docs/content/components/radio-group/custom-impl.raw.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from "react"; | ||
| import {RadioGroup, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react"; | ||
|
|
||
| export const CustomRadio = (props: RadioProps) => { | ||
| const { | ||
| Component, | ||
| children, | ||
| description, | ||
| getBaseProps, | ||
| getWrapperProps, | ||
| getInputProps, | ||
| getLabelProps, | ||
| getLabelWrapperProps, | ||
| getControlProps, | ||
| } = useRadio(props); | ||
|
|
||
| return ( | ||
| <Component | ||
| {...getBaseProps()} | ||
| className={cn( | ||
| "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse", | ||
| "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4", | ||
| "data-[selected=true]:border-primary", | ||
| )} | ||
| > | ||
| <VisuallyHidden> | ||
| <input {...getInputProps()} /> | ||
| </VisuallyHidden> | ||
| <span {...getWrapperProps()}> | ||
| <span {...getControlProps()} /> | ||
| </span> | ||
| <div {...getLabelWrapperProps()}> | ||
| {children && <span {...getLabelProps()}>{children}</span>} | ||
| {description && ( | ||
| <span className="text-small text-foreground opacity-70">{description}</span> | ||
| )} | ||
| </div> | ||
| </Component> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <RadioGroup label="Plans"> | ||
| <CustomRadio description="Up to 20 items" value="free"> | ||
| Free | ||
| </CustomRadio> | ||
| <CustomRadio description="Unlimited items. $10 per month." value="pro"> | ||
| Pro | ||
| </CustomRadio> | ||
| <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise"> | ||
| Enterprise | ||
| </CustomRadio> | ||
| </RadioGroup> | ||
| ); | ||
| } |
121 changes: 2 additions & 119 deletions
121
apps/docs/content/components/radio-group/custom-impl.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
apps/docs/content/components/radio-group/custom-styles.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {RadioGroup, Radio, cn} from "@nextui-org/react"; | ||
|
|
||
| export const CustomRadio = (props) => { | ||
| const {children, ...otherProps} = props; | ||
|
|
||
| return ( | ||
| <Radio | ||
| {...otherProps} | ||
| classNames={{ | ||
| base: cn( | ||
| "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between", | ||
| "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent", | ||
| "data-[selected=true]:border-primary", | ||
| ), | ||
| }} | ||
| > | ||
| {children} | ||
| </Radio> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <RadioGroup description="Selected plan can be changed at any time." label="Plans"> | ||
| <CustomRadio description="Up to 20 items" value="free"> | ||
| Free | ||
| </CustomRadio> | ||
| <CustomRadio description="Unlimited items. $10 per month." value="pro"> | ||
| Pro | ||
| </CustomRadio> | ||
| <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise"> | ||
| Enterprise | ||
| </CustomRadio> | ||
| </RadioGroup> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
apps/docs/content/components/radio-group/default-value.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import {RadioGroup, Radio} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <RadioGroup color="secondary" defaultValue="london" label="Select your favorite city"> | ||
| <Radio value="buenos-aires">Buenos Aires</Radio> | ||
| <Radio value="sydney">Sydney</Radio> | ||
| <Radio value="san-francisco">San Francisco</Radio> | ||
| <Radio value="london">London</Radio> | ||
| <Radio value="tokyo">Tokyo</Radio> | ||
| </RadioGroup> | ||
| ); | ||
| } |
Oops, something went wrong.