-
-
Notifications
You must be signed in to change notification settings - Fork 1
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
5 changed files
with
196 additions
and
12 deletions.
There are no files selected for viewing
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,67 @@ | ||
| --- | ||
| title: Card | ||
| description: Displays a card with header, content, and footer. | ||
| --- | ||
|
|
||
| <ComponentPreview name="card-with-form" description="A card with a form" /> | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs defaultValue="cli"> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="cli">CLI</TabsTrigger> | ||
| <TabsTrigger value="manual">Manual</TabsTrigger> | ||
| </TabsList> | ||
|
|
||
| <TabsContent value="cli"> | ||
|
|
||
| ```bash | ||
| npx shadcn-ng@latest add card | ||
| ``` | ||
|
|
||
| </TabsContent> | ||
|
|
||
| <TabsContent value="manual"> | ||
|
|
||
| <Step> | ||
|
|
||
| <StepItem>Copy and paste the following code into your project.</StepItem> | ||
|
|
||
| <ComponentSource name="card" /> | ||
|
|
||
| <StepItem>Update the import paths to match your project setup.</StepItem> | ||
|
|
||
| </Step> | ||
|
|
||
| </TabsContent> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```ts | ||
| import { | ||
| UbCardContentDirective, | ||
| UbCardDescriptionDirective, | ||
| UbCardDirective, | ||
| UbCardFooterDirective, | ||
| UbCardHeaderDirective, | ||
| UbCardTitleDirective, | ||
| } from '@/components/ui/card' | ||
| ``` | ||
|
|
||
| ```html | ||
| <div ubCard> | ||
| <div ubCardHeader> | ||
| <h3 ubCardTitle>Card Title</h3> | ||
| <p ubCardDescription>Card Description</p> | ||
| </div> | ||
| <div ubCardContent> | ||
| <p>Card Content</p> | ||
| </div> | ||
| <div ubCardFooter> | ||
| <p>Card Footer</p> | ||
| </div> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { UbButtonDirective } from '@/registry/new-york/ui/button' | ||
| import { | ||
| UbCardContentDirective, | ||
| UbCardDescriptionDirective, | ||
| UbCardDirective, | ||
| UbCardFooterDirective, | ||
| UbCardHeaderDirective, | ||
| UbCardTitleDirective, | ||
| } from '@/registry/new-york/ui/card' | ||
| import { UbInputDirective } from '@/registry/new-york/ui/input' | ||
| import { UbLabelDirective } from '@/registry/new-york/ui/label' | ||
|
|
||
| import { Component } from '@angular/core' | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| imports: [ | ||
| UbCardDirective, | ||
| UbCardHeaderDirective, | ||
| UbCardTitleDirective, | ||
| UbCardDescriptionDirective, | ||
| UbCardContentDirective, | ||
| UbCardFooterDirective, | ||
|
|
||
| UbInputDirective, | ||
| UbLabelDirective, | ||
| UbButtonDirective, | ||
| ], | ||
| selector: 'card-with-form-default', | ||
| template: ` | ||
| <div ubCard class="w-[350px]"> | ||
| <div ubCardHeader> | ||
| <h3 ubCardTitle>Create project</h3> | ||
| <p ubCardDescription>Deploy your new project in one-click.</p> | ||
| </div> | ||
| <div ubCardContent> | ||
| <form> | ||
| <div class="grid w-full items-center gap-4"> | ||
| <div class="flex flex-col space-y-1.5"> | ||
| <label ubLabel htmlFor="name">Name</label> | ||
| <input ubInput type="text" id="name" placeholder="Name of your project" /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div ubCardFooter class="flex justify-between"> | ||
| <button ubButton variant="outline">Cancel</button> | ||
| <button ubButton>Deploy</button> | ||
| </div> | ||
| </div> | ||
| `, | ||
| }) | ||
| export class CardWithFormDefault { } | ||
|
|
||
| export default CardWithFormDefault |
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
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,58 @@ | ||
| import { UbButtonDirective } from '@/registry/new-york/ui/button' | ||
| import { | ||
| UbCardContentDirective, | ||
| UbCardDescriptionDirective, | ||
| UbCardDirective, | ||
| UbCardFooterDirective, | ||
| UbCardHeaderDirective, | ||
| UbCardTitleDirective, | ||
| } from '@/registry/new-york/ui/card' | ||
| import { UbInputDirective } from '@/registry/new-york/ui/input' | ||
| import { UbLabelDirective } from '@/registry/new-york/ui/label' | ||
|
|
||
| import { Component } from '@angular/core' | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| imports: [ | ||
| UbCardDirective, | ||
| UbCardHeaderDirective, | ||
| UbCardTitleDirective, | ||
| UbCardDescriptionDirective, | ||
| UbCardContentDirective, | ||
| UbCardFooterDirective, | ||
|
|
||
| UbInputDirective, | ||
| UbLabelDirective, | ||
| UbButtonDirective, | ||
| ], | ||
| selector: 'card-with-form-new-york', | ||
| template: ` | ||
| <div ubCard class="w-[350px]"> | ||
| <div ubCardHeader> | ||
| <h3 ubCardTitle>Create project</h3> | ||
| <p ubCardDescription>Deploy your new project in one-click.</p> | ||
| </div> | ||
| <div ubCardContent> | ||
| <form> | ||
| <div class="grid w-full items-center gap-4"> | ||
| <div class="flex flex-col space-y-1.5"> | ||
| <label ubLabel htmlFor="name">Name</label> | ||
| <input ubInput type="text" id="name" placeholder="Name of your project" /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div ubCardFooter class="flex justify-between"> | ||
| <button ubButton variant="outline">Cancel</button> | ||
| <button ubButton>Deploy</button> | ||
| </div> | ||
| </div> | ||
| `, | ||
| }) | ||
| export class CardWithFormNewYork { } | ||
|
|
||
| export default CardWithFormNewYork |
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