docs: fix className reference
This commit is contained in:
zernonia
parent
9b2447b249
commit
97e9b57eb0
|
|
@ -30,6 +30,6 @@ import { Checkbox } from '@/components/ui/checkbox'
|
|||
|
||||
## Examples
|
||||
|
||||
### With text
|
||||
### Disabled
|
||||
|
||||
<ComponentPreview name="CheckboxDisabled" />
|
||||
|
|
@ -40,7 +40,7 @@ Install React using the Astro CLI:
|
|||
npx astro add react
|
||||
```
|
||||
|
||||
<Callout className="mt-4">
|
||||
<Callout class="mt-4">
|
||||
|
||||
Answer `Yes` to all the question prompted by the CLI when installing React.
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ Install Tailwind CSS using the Astro CLI:
|
|||
npx astro add tailwind
|
||||
```
|
||||
|
||||
<Callout className="mt-4">
|
||||
<Callout class="mt-4">
|
||||
|
||||
Answer `Yes` to all the question prompted by the CLI when installing Tailwind CSS.
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const data = [
|
|||
<CardDescription>Set your daily activity goal.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class-name="pb-2">
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
|
|
@ -51,13 +51,13 @@ const data = [
|
|||
@click="goal -= 10"
|
||||
>
|
||||
<Minus class-name="h-4 w-4" />
|
||||
<span className="sr-only">Decrease</span>
|
||||
<span class="sr-only">Decrease</span>
|
||||
</Button>
|
||||
<div className="flex-1 text-center">
|
||||
<div className="text-5xl font-bold tracking-tighter">
|
||||
<div class="flex-1 text-center">
|
||||
<div class="text-5xl font-bold tracking-tighter">
|
||||
{{ goal }}
|
||||
</div>
|
||||
<div className="text-[0.70rem] uppercase text-muted-foreground">
|
||||
<div class="text-[0.70rem] uppercase text-muted-foreground">
|
||||
Calories/day
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,10 +69,10 @@ const data = [
|
|||
@click="goal += 10 "
|
||||
>
|
||||
<Plus class-name="h-4 w-4" />
|
||||
<span className="sr-only">Increase</span>
|
||||
<span class="sr-only">Increase</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="my-3 h-[60px]">
|
||||
<div class="my-3 h-[60px]">
|
||||
<!-- <ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data="{data}">
|
||||
<Bar
|
||||
|
|
|
|||
|
|
@ -76,48 +76,48 @@ const range = ref({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
|
||||
<div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
|
||||
<div class="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
|
||||
<div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
|
||||
<CardsStats />
|
||||
<div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
|
||||
<div class="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
|
||||
<CardsCalendar />
|
||||
<div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
|
||||
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
|
||||
<CardsActivityGoal />
|
||||
</div>
|
||||
<div className="pt-3 sm:col-span-2 xl:pt-4">
|
||||
<div class="pt-3 sm:col-span-2 xl:pt-4">
|
||||
<CardsMetric />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
|
||||
<div className="space-y-4 xl:space-y-4">
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
|
||||
<div class="space-y-4 xl:space-y-4">
|
||||
<CardsTeamMembers />
|
||||
<CardsCookieSettings />
|
||||
<CardsPaymentMethod />
|
||||
</div>
|
||||
<div className="space-y-4 xl:space-y-4">
|
||||
<div class="space-y-4 xl:space-y-4">
|
||||
<CardsChat />
|
||||
<CardsCreateAccount />
|
||||
<div className="hidden xl:block">
|
||||
<div class="hidden xl:block">
|
||||
<CardsReportIssue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
|
||||
<div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
|
||||
<div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
|
||||
<div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
|
||||
<CardsCalendar />
|
||||
<div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
|
||||
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
|
||||
<CardsActivityGoal />
|
||||
</div>
|
||||
<div className="pt-3 sm:col-span-2 xl:pt-3">
|
||||
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
||||
<CardsMetric />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div class="hidden md:block">
|
||||
<CardsDataTable />
|
||||
</div>
|
||||
<CardsShare />
|
||||
<div className="xl:hidden">
|
||||
<div class="xl:hidden">
|
||||
<CardsReportIssue />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,13 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div className="items-top flex space-x-2">
|
||||
<div class="items-top flex space-x-2">
|
||||
<Checkbox id="terms1" disabled />
|
||||
<div className="grid gap-1.5 leading-none">
|
||||
<label
|
||||
htmlFor="terms1"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Accept terms and conditions
|
||||
</label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You agree to our Terms of Service and Privacy Policy.
|
||||
</p>
|
||||
</div>
|
||||
<label
|
||||
for="terms2"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Accept terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user