Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix className reference

Browse Source
This commit is contained in:
zernonia 2023-09-22 09:48:30 +08:00
parent 9b2447b249
commit 97e9b57eb0
5 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/src/content/docs/components/checkbox.md
View File

@ -30,6 +30,6 @@ import { Checkbox } from '@/components/ui/checkbox'
## Examples ## Examples
### With text ### Disabled
<ComponentPreview name="CheckboxDisabled" /> <ComponentPreview name="CheckboxDisabled" />

4
apps/www/src/content/docs/installation/astro.md
View File

@ -40,7 +40,7 @@ Install React using the Astro CLI:
npx astro add react 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. 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 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. Answer `Yes` to all the question prompted by the CLI when installing Tailwind CSS.

14
apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
View File

@ -42,7 +42,7 @@ const data = [
<CardDescription>Set your daily activity goal.</CardDescription> <CardDescription>Set your daily activity goal.</CardDescription>
</CardHeader> </CardHeader>
<CardContent class-name="pb-2"> <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 <Button
variant="outline" variant="outline"
size="icon" size="icon"
@ -51,13 +51,13 @@ const data = [
@click="goal -= 10" @click="goal -= 10"
> >
<Minus class-name="h-4 w-4" /> <Minus class-name="h-4 w-4" />
<span className="sr-only">Decrease</span> <span class="sr-only">Decrease</span>
</Button> </Button>
<div className="flex-1 text-center"> <div class="flex-1 text-center">
<div className="text-5xl font-bold tracking-tighter"> <div class="text-5xl font-bold tracking-tighter">
{{ goal }} {{ goal }}
</div> </div>
<div className="text-[0.70rem] uppercase text-muted-foreground"> <div class="text-[0.70rem] uppercase text-muted-foreground">
Calories/day Calories/day
</div> </div>
</div> </div>
@ -69,10 +69,10 @@ const data = [
@click="goal += 10 " @click="goal += 10 "
> >
<Plus class-name="h-4 w-4" /> <Plus class-name="h-4 w-4" />
<span className="sr-only">Increase</span> <span class="sr-only">Increase</span>
</Button> </Button>
</div> </div>
<div className="my-3 h-[60px]"> <div class="my-3 h-[60px]">
<!-- <ResponsiveContainer width="100%" height="100%"> <!-- <ResponsiveContainer width="100%" height="100%">
<BarChart data="{data}"> <BarChart data="{data}">
<Bar <Bar

30
apps/www/src/lib/registry/default/example/Cards/index.vue
View File

@ -76,48 +76,48 @@ const range = ref({
</script> </script>
<template> <template>
<div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4"> <div class="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="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
<CardsStats /> <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 /> <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 /> <CardsActivityGoal />
</div> </div>
<div className="pt-3 sm:col-span-2 xl:pt-4"> <div class="pt-3 sm:col-span-2 xl:pt-4">
<CardsMetric /> <CardsMetric />
</div> </div>
</div> </div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2"> <div class="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="space-y-4 xl:space-y-4">
<CardsTeamMembers /> <CardsTeamMembers />
<CardsCookieSettings /> <CardsCookieSettings />
<CardsPaymentMethod /> <CardsPaymentMethod />
</div> </div>
<div className="space-y-4 xl:space-y-4"> <div class="space-y-4 xl:space-y-4">
<CardsChat /> <CardsChat />
<CardsCreateAccount /> <CardsCreateAccount />
<div className="hidden xl:block"> <div class="hidden xl:block">
<CardsReportIssue /> <CardsReportIssue />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4"> <div class="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="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
<CardsCalendar /> <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 /> <CardsActivityGoal />
</div> </div>
<div className="pt-3 sm:col-span-2 xl:pt-3"> <div class="pt-3 sm:col-span-2 xl:pt-3">
<CardsMetric /> <CardsMetric />
</div> </div>
</div> </div>
<div className="hidden md:block"> <div class="hidden md:block">
<CardsDataTable /> <CardsDataTable />
</div> </div>
<CardsShare /> <CardsShare />
<div className="xl:hidden"> <div class="xl:hidden">
<CardsReportIssue /> <CardsReportIssue />
</div> </div>
</div> </div>

11
apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
View File

@ -3,18 +3,13 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script> </script>
<template> <template>
<div className="items-top flex space-x-2"> <div class="items-top flex space-x-2">
<Checkbox id="terms1" disabled /> <Checkbox id="terms1" disabled />
<div className="grid gap-1.5 leading-none">
<label <label
htmlFor="terms1" for="terms2"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
Accept terms and conditions Accept terms and conditions
</label> </label>
<p className="text-sm text-muted-foreground">
You agree to our Terms of Service and Privacy Policy.
</p>
</div>
</div> </div>
</template> </template>