From 56a6240bf700ac307342ed494d8bfbabe5c822dc Mon Sep 17 00:00:00 2001 From: 简律纯 Date: Wed, 19 Apr 2023 17:50:02 +0800 Subject: ✨docs init MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.docs/content/2.api/1.components.md | 693 ------------------------------- 1 file changed, 693 deletions(-) delete mode 100644 docs/.docs/content/2.api/1.components.md (limited to 'docs/.docs/content/2.api/1.components.md') diff --git a/docs/.docs/content/2.api/1.components.md b/docs/.docs/content/2.api/1.components.md deleted file mode 100644 index d22340f..0000000 --- a/docs/.docs/content/2.api/1.components.md +++ /dev/null @@ -1,693 +0,0 @@ -# Components - -Discover every component you can use in your content. - - -## `` - -::code-group - - ::code-block{label="Preview" preview} - ::alert{type="info" style="margin-top: 0;"} - Check out an **info** alert with `code` and a [link](/). - :: - - ::alert{type="success"} - Check out a **success** alert with `code` and a [link](/). - :: - - ::alert{type="warning"} - Check out a **warning** alert with `code` and a [link](/). - :: - - ::alert{type="danger" style="margin-bottom: 0;"} - Check out a **danger** alert with `code` and a [link](/). - :: - :: - - ```md [Code] - ::alert{type="info"} - Check out an **info** alert with `code` and a [link](/). - :: - - ::alert{type="success"} - Check out a **success** alert with `code` and a [link](/). - :: - - ::alert{type="warning"} - Check out a **warning** alert with `code` and a [link](/). - :: - - ::alert{type="danger"} - Check out a **danger** alert with `code` and a [link](/). - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Alert.vue" ---- -:: - ---- - -## `` - -`` support same types as ``. - -::code-group - - ::code-block{label="Preview" preview} - ::div{style="display:flex; gap: 1rem;"} - :badge[v1.2] - - :badge[Deprecated]{type="warning"} - - ::badge{type="danger"} - Not found! - :: - :: - :: - - ```md [Code] - :badge[v1.2] - - :badge[Deprecated]{type="warning"} - - ::badge{type="danger"} - Not found! - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Badge.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview"} - ::block-hero - --- - cta: - - Get started - - /get-started - secondary: - - Open on GitHub → - - https://github.com/nuxtlabs/docus - snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter - --- - #title - Document-driven framework - - #description - Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. - :: - :: - - ```md [Code] - ::block-hero - --- - cta: - - Get started - - /get-started - secondary: - - Open on GitHub → - - https://github.com/nuxtlabs/docus - snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter - --- - #title - Document-driven framework - - #description - Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/BlockHero.vue" ---- -:: - ---- - -## `` -::code-group - - ::code-block{label="Preview" preview} - :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} - :: - - ```md [Code] - :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} - ``` - -:: - - - -::source-link ---- -source: "components/content/ButtonLink.vue" ---- -:: - ---- - -## `` - -`` support same types as ``. - -::code-group - - ::code-block{label="Preview"} - ::callout - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - - ::callout{type="warning"} - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - :: - - ```md [Code] - ::callout - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - - ::callout{type="warning"} - #summary - This is a callout! Click me to open. - - #content - This is the content of the callout. - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Callout.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview"} - ::card - --- - icon: logos:nuxt-icon - --- - #title - Nuxt Architecture. - #description - Based on **Nuxt 3** and **Nuxt Content**. :br - Use Nuxt to build a static site, or a serverless app. - :: - :: - - ```md [Code] - ::card{icon="logos:nuxt-icon"} - #title - Nuxt Architecture. - #description - Based on **Nuxt 3** and **Nuxt Content**. :br - Use Nuxt to build a static site, or a serverless app. - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/Card.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview"} - ::card-grid - #title - What's included? - - #root - :ellipsis - - #default - ::card - #title - Nuxt Architecture. - #description - Harness the full power of Nuxt and the Nuxt ecosystem. - :: - ::card - #title - Vue Components. - #description - Use built-in components (or your own!) inside your content. - :: - ::card - #title - Write Markdown. - #description - Enjoy the ease and simplicity of Markdown and discover MDC syntax. - :: - :: - :: - - ```md [Code] - ::card-grid - #title - What's included - - #root - :ellipsis - - #default - ::card - #title - Nuxt Architecture. - #description - Harness the full power of Nuxt and the Nuxt ecosystem. - :: - ::card - #title - Vue Components. - #description - Use built-in components (or your own!) inside your content. - :: - ::card - #title - Write Markdown. - #description - Enjoy the ease and simplicity of Markdown and discover MDC syntax. - :: - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/CardGrid.vue" ---- -:: - ---- - -## `` - -This component uses `slots` to create a tab panel of your code examples or preview. - -::code-group - - ::code-block{label="Preview" preview} - ::code-group - ```bash [Yarn] - yarn add docus - ``` - - ```bash [NPM] - npm install docus - ``` - :: - :: - - ```md [Code] - ::code-group - ```bash [Yarn] - yarn add docus - ``` - ```bash [NPM] - npm install docus - ``` - :: - ``` - -:: - -::source-link ---- -source: "components/content/CodeGroup.vue" ---- -:: - ---- - -## `` - -To be used inside a `` component to display a preview of some rendered code. - -::code-group - -::code-block{label="Preview" preview} - ::badge - Hello World! - :: -:: - -```md [Code] -/* Added as a child of `` */ - -::code-block{label="Preview" preview} - ::badge - Hello World! - :: -:: -``` - -:: - - - -::source-link ---- -source: "components/content/CodeBlock.vue" ---- -:: - ---- - -## `` - - -::code-group - -::code-block{label="Preview" preview} - :copy-button{content="hey!"} -:: - -```md [Code] -:copy-button{content="hey!"} -``` - -:: - - - -::source-link ---- -source: "components/content/CopyButton.vue" ---- -:: - ---- - -## `` - -Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org). - -::code-group - - ::code-block{label="Preview" preview} - :icon{name="logos:nuxt-icon"} - :icon{name="logos:vue"} - :icon{name="logos:nuxt-icon"} - :: - - ```md [Code] - :icon{name="logos:nuxt-icon"} - :icon{name="logos:vue"} - :icon{name="logos:nuxt-icon"} - ``` - -:: - - - -::source-link ---- -source: "components/content/Icon.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview" preview} - ::list{type="primary"} - - **Important** - - Always - :: - - ::list{type="success"} - - Amazing - - Congrats - :: - - ::list{type="info"} - - Do you know? - - You can also do this - :: - - ::list{type="warning"} - - Be careful - - Use with precautions - :: - - ::list{type="danger"} - - Drinking too much - - Driving drunk - :: - - :: - - ```md [Code] - ::list{type="primary"} - - **Important** - - Always - :: - - ::list{type="success"} - - Amazing - - Congrats - :: - - ::list{type="info"} - - Do you know? - - You can also do this - :: - - ::list{type="warning"} - - Be careful - - Use with precautions - :: - - ::list{type="danger"} - - Drinking too much - - Driving drunk - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/List.vue" ---- -:: - - -## `` - -Embed CodeSandbox/StackBlitz easily in your documentation with great performances. - -Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport. - -::code-group - - ::code-block{label="Preview" preview} - :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} - :: - - ```md [Code] - :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} - ``` - -:: - - - -::source-link ---- -source: "components/content/Sandbox.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview" preview} - :terminal{content="nuxi build"} - :: - - ```md [Code] - :terminal{content="nuxi build"} - ``` - -:: - - - -::source-link ---- -source: "components/content/Terminal.vue" ---- -:: - ---- - -## `` - -::code-group - - ::code-block{label="Preview" preview} - ::div - :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} - :: - :: - - ```md [Code] - ::div - :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} - :: - ``` - -:: - - - -::source-link ---- -source: "components/content/VideoPlayer.vue" ---- -:: -- cgit v1.2.3-70-g09d2