3.4.11 • Published 1 year ago
@klass/solid v3.4.11
klass solid
Introduction
Class variant utility for Solid.
Installation
npm install @klass/core @klass/solid
# or
yarn add @klass/core @klass/solid
# or
pnpm add @klass/core @klass/solid
# or
bun add @klass/core @klass/solid
Usage
import { klassed, reklassed } from "@klass/solid";
const Button = klassed(
"button",
{
base: "inline-flex items-center justify-center rounded-md outline-none",
variants: {
color: {
default: "bg-neutral-700 text-white",
primary: "bg-indigo-700 text-white",
secondary: "bg-orange-700 text-white",
},
size: {
sm: "px-3 py-0.5 h-7 text-sm font-medium",
md: "px-4 py-1 h-8 text-base font-medium",
lg: "px-5 py-1.5 h-9 text-lg font-semibold",
},
block: {
true: "w-full",
},
// "class" variants are not allowed
// "classList" variants are not allowed
},
defaultVariants: {
color: "default",
size: "md",
},
},
{
// default props
dp: {
type: "button",
},
}
);
const Box = reklassed("div", {
conditions: {
base: "",
sm: "sm:",
md: "md:",
lg: "lg:",
xl: "xl:",
"2xl": "2xl:",
},
defaultCondition: "base",
variants: {
m: {
"0": "m-0",
"1": "m-1",
"2": "m-2",
"3": "m-3",
"4": "m-4",
"5": "m-5",
"6": "m-6",
"7": "m-7",
"8": "m-8",
},
p: {
"0": "p-0",
"1": "p-1",
"2": "p-2",
"3": "p-3",
"4": "p-4",
"5": "p-5",
"6": "p-6",
"7": "p-7",
"8": "p-8",
},
},
});
const App = () => {
return (
<Box m={{ base: "1", md: "2" }} p="2">
<Box as="section">
<Button color="primary" block>
Primary Block Button
</Button>
</Box>
<Box as="section">
<Button as="a" color="secondary">
Secondary Anchor Button
</Button>
</Box>
</Box>
);
};
export default App;
Documentation
Authors
License
4.0.0-next.28
1 year ago
4.0.0-next.27
1 year ago
4.0.0-next.26
1 year ago
4.0.0-next.25
1 year ago
4.0.0-next.24
1 year ago
4.0.0-next.23
1 year ago
4.0.0-next.22
1 year ago
4.0.0-next.21
1 year ago
4.0.0-next.19
1 year ago
4.0.0-next.20
1 year ago
4.0.0-next.16
1 year ago
4.0.0-next.17
1 year ago
4.0.0-next.18
1 year ago
4.0.0-next.12
1 year ago
4.0.0-next.15
1 year ago
4.0.0-next.13
1 year ago
4.0.0-next.14
1 year ago
4.0.0-next.11
1 year ago
4.0.0-next.10
1 year ago
4.0.0-next.9
1 year ago
4.0.0-next.8
1 year ago
4.0.0-next.7
1 year ago
4.0.0-next.6
1 year ago
4.0.0-next.5
1 year ago
4.0.0-next.4
1 year ago
4.0.0-next.3
1 year ago
4.0.0-next.2
1 year ago
4.0.0-next.1
1 year ago
4.0.0-next.0
1 year ago
3.4.11
2 years ago
3.4.9
2 years ago
3.4.10
2 years ago
1.4.0
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
2.0.3
2 years ago
2.0.2
2 years ago
2.0.5
2 years ago
2.0.4
2 years ago
2.0.6
2 years ago
3.4.8
2 years ago
3.4.7
2 years ago
3.4.6
2 years ago
3.4.5
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
3.3.5
2 years ago
3.3.4
2 years ago
3.3.3
2 years ago
3.0.0
2 years ago
1.2.0
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
1.0.3
2 years ago
0.8.1
2 years ago
0.8.0
2 years ago
0.7.0
2 years ago
0.6.0
2 years ago
0.5.3
3 years ago
0.5.2
3 years ago
0.5.1
3 years ago
0.5.0
3 years ago