DocsDocumentationMdxComponents

Στοιχεία

Εξοικείωση με τα components στα αρχεία MDX σας

Τα components εισάγονται αυτόματα σε όλα τα αρχεία MDX, χωρίς να απαιτείται χειροκίνητο import. Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε οποιοδήποτε διαθέσιμο component!

Για να μάθετε περισσότερα, να προσθέσετε ή να αλλάξετε τα διαθέσιμα components, δείτε το αρχείο src/components/docs/mdx.tsx

Accordion

Παράδειγμα:

Κώδικας:

<Accordion type="multiple">
  <AccordionItem value="faq-1">
    <AccordionTrigger>
      Id qui enim sunt do sit ut ex voluptate consequat sint aliqua.
    </AccordionTrigger>
 
    <AccordionContent>
      Aliqua et adipisicing sunt anim adipisicing nostrud nostrud veniam aliquip ea. Aute fugiat incididunt laboris ullamco et voluptate fugiat fugiat sunt. Consectetur commodo sint exercitation esse consectetur deserunt ipsum sunt minim ea ipsum aliqua ad. Veniam velit dolore commodo officia ex ullamco fugiat occaecat minim excepteur incididunt officia. Sit irure eiusmod officia esse pariatur sint elit commodo. Ullamco ea eu labore duis dolore quis dolor eiusmod in minim culpa proident. Est magna dolor id elit.
 
      Velit dolore quis veniam ex aliqua. Et velit occaecat ea aliquip id quis voluptate ipsum culpa eu enim quis amet tempor. Minim cillum deserunt quis consequat esse eu irure sunt dolore nisi dolor sit adipisicing. Dolor aliqua nulla sit culpa incididunt magna commodo voluptate qui labore cillum consequat consequat.
    </AccordionContent>
  </AccordionItem>
 
  <AccordionItem value="faq-2">
    <AccordionTrigger>
      Esse aute exercitation amet irure incididunt fugiat sint cupidatat culpa dolore duis officia aliquip.
    </AccordionTrigger>
 
    <AccordionContent>
      Eiusmod labore eu eu eu reprehenderit aute anim duis labore nisi laborum magna enim.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Alerts

Παράδειγμα:

Κώδικας:

<Alert className="my-4">
  <AlertTitle>Default alert</AlertTitle>
 
  <AlertDescription>
    This is a default alert.
  </AlertDescription>
</Alert>
 
<Alert variant="warning">
  <AlertTitle>Warning alert</AlertTitle>
 
  <AlertDescription>
    This is a warning alert.
  </AlertDescription>
</Alert>
 
<Alert variant="destructive" className="my-4">
  <AlertTitle>Error alert</AlertTitle>
 
  <AlertDescription>
    This is an error alert.
  </AlertDescription>
</Alert>

Tabs

Παράδειγμα:

Περιεχόμενο καρτέλας 1

Κώδικας:

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
  </TabsList>
 
  <TabsContent value="tab-1">
    Tab 1 content
  </TabsContent>
 
  <TabsContent value="tab-2">
    Tab 2 content
  </TabsContent>
</Tabs>

Steps

Παράδειγμα:

Βήμα 1:

npx something

Βήμα 2:

npx something-else

Κώδικας:

<Steps>
  <Step>Step 1:</Step>
 
  ```bash
  npx something
  ```
 
  <Step>Step 2:</Step>
 
  ```bash
  npx something-else
  ```
</Steps>
CodeFrontmatter