archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(docs): custom impl preview for checkbox & checkbox-grp (#4610)

Browse Source
This commit is contained in:
աӄա 2025-01-21 18:40:46 +08:00 committed by GitHub
parent aef47ffbf4
commit 6f594fa530
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
View File

@ -1,26 +1,26 @@
import {useCheckbox, CheckboxGroup, Chip, VisuallyHidden, tv} from "@heroui/react";
const checkbox = tv({
slots: {
base: "border-default hover:bg-default-200",
content: "text-default-500",
},
variants: {
isSelected: {
true: {
base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
content: "text-primary-foreground pl-1",
},
},
isFocusVisible: {
true: {
base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},
});
export const CustomCheckbox = (props) => {
const checkbox = tv({
slots: {
base: "border-default hover:bg-default-200",
content: "text-default-500",
},
variants: {
isSelected: {
true: {
base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
content: "text-primary-foreground pl-1",
},
},
isFocusVisible: {
true: {
base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},
});
const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
useCheckbox({
...props,

40
apps/docs/content/components/checkbox/custom-implementation.raw.jsx
View File

@ -20,32 +20,32 @@ export const CheckIcon = (props) => {
);
};
const checkbox = tv({
slots: {
base: "border-default hover:bg-default-200",
content: "text-default-500",
},
variants: {
isSelected: {
true: {
base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
content: "text-primary-foreground pl-1",
},
},
isFocusVisible: {
true: {
base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},
});
export default function App() {
const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
useCheckbox({
defaultSelected: true,
});
const checkbox = tv({
slots: {
base: "border-default hover:bg-default-200",
content: "text-default-500",
},
variants: {
isSelected: {
true: {
base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
content: "text-primary-foreground pl-1",
},
},
isFocusVisible: {
true: {
base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},
});
const styles = checkbox({isSelected, isFocusVisible});
return (