Skip to content

Latest commit

 

History

History
309 lines (225 loc) · 6.91 KB

components.mdx

File metadata and controls

309 lines (225 loc) · 6.91 KB
Raw
title description
komponen kustom
Tingkatkan artikel Anda dengan komponen khusus/kustom!

import { Tabs, Tab, FileTree } from "nextra-theme-docs"; import { Accordion, Admonition, Tip, Warning, Info, Card, Cards, LinkButton, } from "@components/mdx"; import { BsDownload } from "react-icons/bs"; import { motion } from "framer-motion";

komponen kustom

Anda dapat meningkatkan artikel Anda dengan komponen khusus

menggunakan import { ... } from "@components/mdx" Impor komponen khusus dengan mudah!

Accordion

Ingin memberi tahu pengguna detail tambahan? gunakan Accordion komponen!

import { Accordion } from "@components/mdx";

**disini mengandung isi一Web3IDN**

<Accordion title="Web3一IDN">WAGMI Yeahhhhh</Accordion>;

disini mengandung isi一Web3IDN

WAGMI Yeahhhhh

Admonition

Ingin meminta atau memperingatkan pengguna? Anda dapat menggunakan Admonition komponen

Ini mendukung beberapa jenis：Tip、Warning、Info、Error：

import { Admonition, Error, Tip, Warning, Info } from "@components/mdx";

<Admonition title="Default" />
<Tip title="Tip" />
<Warning title="warning" />
<Info title="info" />

Card

Anda dapat menggunakan ini untuk mengalihkan pengguna ke halaman lain, ingat untuk menambahkan atribut href

import { Card } from "@components/mdx";

<Card title="arahkan ulang ke blog" href="/blog/welcome-to-web3id" />
<Card title="tautan ke blog" href="/blog/welcome-to-web3id" arrow />

Link Button

Tidak efektif untuk memasukkan URL? Anda dapat menggunakan tombol sebagai gantinya!

Anda mungkin memerlukan w-fit atau tombolnya akan terlalu lebar

import { LinkButton } from "@components/mdx";

<LinkButton
  href="/blog/welcome-to-web3id"
  children="uji coba"
  variant="secondary"
/>

<LinkButton
  href="/blog/welcome-to-web3id"
  target="_blank"
  icon={<BsDownload />}
  children="percobaan"
  variant="primary"
  link={{ className: "w-fit" }}
/>

<LinkButton href="/blog/welcome-to-web3id" target="_blank" icon={} children="uji" variant='primary' />

<LinkButton href="/blog/welcome-to-web3id" target="_blank" icon={} children="uji" />

Steps

Saat Anda sedang menulis tutorial, komponen ini berguna untuk menunjukkan hubungan di antara setiap step / langkah

Anda dapat dengan mudah menggunakan className untuk mendapatkan efek ini, menggunakan judul ### (h3) untuk menambahkan step：

<div className='steps-container'>

### Learn

For invest times

### Earn

For learning outcomes

</div>

Learn

learn to invest

Earn

invest to learn

Tab

Mereka berasal dari kit eksternal nextra-theme-docs，tetapi Anda dapat menggunakannya dalam dokumen：

import {(Tab, Tabs)} from "nextra-theme-docs";

<Tabs items={['Open', 'Money']}>
  <Tab>

In the history of mankind, we have always tried our best to understand Rust and conduct in-depth research on Rust. If we choose to ignore Rust at this time, the consequences can be imagined. Despite its seeming inconspicuousness, Rust has occupied my mind.

  </Tab>
  <Tab>

I don't know programming

  </Tab>
</Tabs>

<Tabs items={['Open', 'Money']}> 

  In the history of mankind, we have always tried our best to understand Rust and conduct in-depth research on Rust. If we choose to ignore Rust at this time, the consequences can be imagined. Despite its seeming inconspicuousness, Rust has occupied my mind.

I don't know programming

File List

Tampilkan file dan folder, berguna untuk tutorial

import { FileTree } from "nextra-theme-docs";

<FileTree>
  <FileTree.Folder name="file Anda" defaultOpen>
    <FileTree.Folder name="frameworks" defaultOpen>
      <FileTree.File name="react.mdx" />
      <FileTree.File name="svelte.mdx" />
      <FileTree.File name="vue.mdx" />
    </FileTree.Folder>
    <FileTree.Folder name="fruits" defaultOpen>
      <FileTree.File name="apple.mdx" />
      <FileTree.File name="banana.mdx" />
    </FileTree.Folder>
    <FileTree.File name="_meta.json" />
    <FileTree.File name="about.mdx" />
    <FileTree.File name="index.mdx" />
  </FileTree.Folder>
</FileTree>

Build own

Build your own components

Mdx dapat digunakan dengan React dan Next.js, Anda dapat menggunakan sintaks jsx di file .mdx.

Kami juga menggunakan Tailwind CSS untuk gaya css internal, yang berarti Anda dapat dengan mudah membuat komponen.

Pastikan mereka mendukung mode terang dan gelap

Kami menggunakan perpustakaan ini

Anda dapat menggunakannya dalam dokumen Anda!

Custom components (Tailwind CSS)

<div className="border-2 border-black p-3 dark:border-white">Hello World</div>
Hello World

Framer Motion

Ini memungkinkan Anda membuat animasi keren dengan mudah

<motion.div
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  }}
/>

Sebaiknya Anda memahaminya untuk menciptakan pengalaman yang lebih baik bagi pengguna.