mirror of
https://github.com/movie-web/providers.git
synced 2025-09-13 18:13:25 +00:00
Initialize docs
This commit is contained in:
mrjvs
693
.docs/content/2.api/1.components.md
Normal file
693
.docs/content/2.api/1.components.md
Normal file
@@ -0,0 +1,693 @@
|
||||
# Components
|
||||
|
||||
Discover every component you can use in your content.
|
||||
|
||||
|
||||
## `<Alert />`
|
||||
|
||||
::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](/).
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Alert"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Alert.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<Badge />`
|
||||
|
||||
`<Badge />` support same types as `<Alert />`.
|
||||
|
||||
::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!
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Badge"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Badge.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<BlockHero />`
|
||||
|
||||
::code-group
|
||||
|
||||
::code-block{label="Preview"}
|
||||
::block-hero
|
||||
---
|
||||
cta:
|
||||
- Get started
|
||||
- /introduction/getting-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.
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="BlockHero"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/BlockHero.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<ButtonLink />`
|
||||
::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}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Alert"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/ButtonLink.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<Callout />`
|
||||
|
||||
`<Callout />` support same types as `<Alert />`.
|
||||
|
||||
::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.
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Callout"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Callout.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<Card />`
|
||||
|
||||
::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.
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Card"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Card.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<CardGrid />`
|
||||
|
||||
::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.
|
||||
::
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="CardGrid"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/CardGrid.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<CodeGroup />`
|
||||
|
||||
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"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<CodeBlock />`
|
||||
|
||||
To be used inside a `<CodeGroup />` 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 `<CodeGroup />` */
|
||||
|
||||
::code-block{label="Preview" preview}
|
||||
::badge
|
||||
Hello World!
|
||||
::
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="CodeBlock"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/CodeBlock.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<CopyButton />`
|
||||
|
||||
|
||||
::code-group
|
||||
|
||||
::code-block{label="Preview" preview}
|
||||
:copy-button{content="hey!"}
|
||||
::
|
||||
|
||||
```md [Code]
|
||||
:copy-button{content="hey!"}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="CodeBlock"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/CopyButton.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<Icon />`
|
||||
|
||||
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"}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Icon"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Icon.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<List />`
|
||||
|
||||
::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
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="List"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/List.vue"
|
||||
---
|
||||
::
|
||||
|
||||
<!--
|
||||
---
|
||||
|
||||
## `<Props />`
|
||||
|
||||
The props component lets you display the available props from any other component in your project.
|
||||
|
||||
It is powered by [nuxt-component-meta](https://github.com/nuxtlabs/nuxt-component-meta).
|
||||
|
||||
::code-group
|
||||
|
||||
::code-block{label="Preview" preview}
|
||||
::props{of="Icon"}
|
||||
::
|
||||
::
|
||||
|
||||
```md [Code]
|
||||
::props{of="Icon"}
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::props{of="Props"}
|
||||
::
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Props.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
-->
|
||||
## `<Sandbox />`
|
||||
|
||||
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"}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Sandbox"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Sandbox.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<Terminal />`
|
||||
|
||||
::code-group
|
||||
|
||||
::code-block{label="Preview" preview}
|
||||
:terminal{content="nuxi build"}
|
||||
::
|
||||
|
||||
```md [Code]
|
||||
:terminal{content="nuxi build"}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="Terminal"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/Terminal.vue"
|
||||
---
|
||||
::
|
||||
|
||||
---
|
||||
|
||||
## `<VideoPlayer />`
|
||||
|
||||
::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"}
|
||||
::
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
<!--
|
||||
::props{of="VideoPlayer"}
|
||||
::
|
||||
-->
|
||||
|
||||
::source-link
|
||||
---
|
||||
source: "components/content/VideoPlayer.vue"
|
||||
---
|
||||
::
|
||||
Reference in New Issue
Block a user