mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
doc(app): refactor app demo
This commit is contained in:
07akioni
parent
5079a4055c
commit
28262b5ee9
7
demo/documentation/components/app/enUS/index.md
Normal file
7
demo/documentation/components/app/enUS/index.md
Normal file
@ -0,0 +1,7 @@
|
||||
# App
|
||||
App is using to set global theme and set namespace for components (detached parts).
|
||||
## Demos
|
||||
```demo
|
||||
theme
|
||||
namespace
|
||||
```
|
||||
118
demo/documentation/components/app/enUS/namespace.md
Normal file
118
demo/documentation/components/app/enUS/namespace.md
Normal file
@ -0,0 +1,118 @@
|
||||
# Namespace
|
||||
Some parts of component are detached to `document.body`. If you want to add a class to those detached elements, use `namespace` prop of app. Open devtools to see detached content.
|
||||
```html
|
||||
<n-app :namespace="ns">
|
||||
<n-button
|
||||
@click="isActive = true"
|
||||
>
|
||||
Activate Component with Detached Content
|
||||
</n-button>
|
||||
<n-modal v-model="isActive">
|
||||
<n-nimbus-form-card
|
||||
width="1032"
|
||||
title="Parklife"
|
||||
:deactivate="() => isActive = false"
|
||||
>
|
||||
<template v-slot:header>
|
||||
v-slot:header
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
v-slot:footer
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<n-date-picker
|
||||
v-model="time"
|
||||
type="datetime"
|
||||
/>
|
||||
<n-select
|
||||
v-model="selectedValue"
|
||||
size="small"
|
||||
placeholder="Please Select Type"
|
||||
:items="items"
|
||||
style="flex-grow: 1;"
|
||||
/>
|
||||
<n-tooltip
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
style="margin-right: 12px;"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin: 0;">
|
||||
California Girls(Click)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</n-nimbus-form-card>
|
||||
</n-modal>
|
||||
</n-app>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ns: 'custom-app-namespace1',
|
||||
isActive: false,
|
||||
time: null,
|
||||
selectedValue: null,
|
||||
items: [
|
||||
{
|
||||
label: "Everybody's Got Something to Hide Except Me and My Monkey",
|
||||
value: 'song0'
|
||||
},
|
||||
{
|
||||
label: 'Drive My Car',
|
||||
value: 'song1'
|
||||
},
|
||||
{
|
||||
label: 'Norwegian Wood',
|
||||
value: 'song2'
|
||||
},
|
||||
{
|
||||
label: "You Won't See",
|
||||
value: 'song3'
|
||||
},
|
||||
{
|
||||
label: 'Nowhere Man',
|
||||
value: 'song4'
|
||||
},
|
||||
{
|
||||
label: 'Think For Yourseld',
|
||||
value: 'song5'
|
||||
},
|
||||
{
|
||||
label: 'The Word',
|
||||
value: 'song6'
|
||||
},
|
||||
{
|
||||
label: 'Michelle',
|
||||
value: 'song7'
|
||||
},
|
||||
{
|
||||
label: 'What goes on',
|
||||
value: 'song8'
|
||||
},
|
||||
{
|
||||
label: 'Girl',
|
||||
value: 'song9'
|
||||
},
|
||||
{
|
||||
label: "I'm looking through you",
|
||||
value: 'song10'
|
||||
},
|
||||
{
|
||||
label: 'In My Life',
|
||||
value: 'song11'
|
||||
},
|
||||
{
|
||||
label: 'Wait',
|
||||
value: 'song12'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
22
demo/documentation/components/app/enUS/theme.md
Normal file
22
demo/documentation/components/app/enUS/theme.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Theme
|
||||
Set theme of inner components of app.
|
||||
```html
|
||||
<n-app :theme="theme">
|
||||
<n-button @click="theme = 'dark'">Dark</n-button>
|
||||
<n-button @click="theme = 'light'">Light</n-button>
|
||||
</n-app>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme: 'dark'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
0
demo/documentation/components/app/index.entry
Normal file
0
demo/documentation/components/app/index.entry
Normal file
0
demo/documentation/components/app/zhCN/index.md
Normal file
0
demo/documentation/components/app/zhCN/index.md
Normal file
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-app :namespace="ns">
|
||||
<n-modal v-model="isActive">
|
||||
<template v-slot:activator>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="isActive = true"
|
||||
>
|
||||
Parklife
|
||||
</n-button>
|
||||
</template>
|
||||
<n-nimbus-form-card
|
||||
width="1032"
|
||||
title="Parklife"
|
||||
:deactivate="() => isActive = false"
|
||||
>
|
||||
<template v-slot:header>
|
||||
v-slot:header
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
v-slot:footer
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<n-date-picker
|
||||
v-model="time"
|
||||
type="datetime"
|
||||
/>
|
||||
<n-select
|
||||
v-model="selectedValue"
|
||||
size="small"
|
||||
placeholder="Please Select Type"
|
||||
:items="items"
|
||||
style="flex-grow: 1;"
|
||||
/>
|
||||
<n-tooltip
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
style="margin-right: 12px;"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin: 0;">
|
||||
California Girls(Click)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</n-nimbus-form-card>
|
||||
</n-modal>
|
||||
</n-app>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect"><n-button @click="ns='custom-app-namespace1'">custom-app-namespace1</n-button><n-button @click="ns='custom-app-namespace2'">custom-app-namespace2</n-button></pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ns: 'custom-app-namespace1',
|
||||
isActive: false,
|
||||
time: null,
|
||||
selectedValue: null,
|
||||
items: [
|
||||
{
|
||||
label: "Everybody's Got Something to Hide Except Me and My Monkey",
|
||||
value: 'song0'
|
||||
},
|
||||
{
|
||||
label: 'Drive My Car',
|
||||
value: 'song1'
|
||||
},
|
||||
{
|
||||
label: 'Norwegian Wood',
|
||||
value: 'song2'
|
||||
},
|
||||
{
|
||||
label: "You Won't See",
|
||||
value: 'song3'
|
||||
},
|
||||
{
|
||||
label: 'Nowhere Man',
|
||||
value: 'song4'
|
||||
},
|
||||
{
|
||||
label: 'Think For Yourseld',
|
||||
value: 'song5'
|
||||
},
|
||||
{
|
||||
label: 'The Word',
|
||||
value: 'song6'
|
||||
},
|
||||
{
|
||||
label: 'Michelle',
|
||||
value: 'song7'
|
||||
},
|
||||
{
|
||||
label: 'What goes on',
|
||||
value: 'song8'
|
||||
},
|
||||
{
|
||||
label: 'Girl',
|
||||
value: 'song9'
|
||||
},
|
||||
{
|
||||
label: "I'm looking through you",
|
||||
value: 'song10'
|
||||
},
|
||||
{
|
||||
label: 'In My Life',
|
||||
value: 'song11'
|
||||
},
|
||||
{
|
||||
label: 'Wait',
|
||||
value: 'song12'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -58,7 +58,7 @@ import dividerDemo from './documentation/components/dividerDemo'
|
||||
import popconfirmDemo from './documentation/components/popconfirmDemo'
|
||||
import anchorDemo from './documentation/components/anchorDemo'
|
||||
import popselectDemo from './documentation/components/popselectDemo'
|
||||
import appDemo from './documentation/components/appDemo'
|
||||
import app from './documentation/components/app'
|
||||
import advanceTableDemos from './documentation/components/advanceTableDemos'
|
||||
import transferDemo from './documentation/components/transferDemo'
|
||||
import spinDemo from './documentation/components/spinDemo'
|
||||
@ -177,7 +177,7 @@ const routes = [
|
||||
{ path: '/n-anchor', component: anchorDemo },
|
||||
{ path: '/n-dropdown', component: dropdownDemo },
|
||||
{ path: '/n-popselect', component: popselectDemo },
|
||||
{ path: '/n-app', component: appDemo },
|
||||
{ path: '/n-app', component: app },
|
||||
{ path: '/n-cancel-mark-debug', component: cancelMarkDebug },
|
||||
{ path: '/n-transfer', component: transferDemo },
|
||||
{ path: '/n-spin', component: spinDemo },
|
||||
|
||||
@ -3,10 +3,12 @@ import NModalOverlay from './Overlay'
|
||||
import NModalContent from './ModalContent'
|
||||
import NBasePortal from '../../../base/Protal'
|
||||
import zindexable from '../../../mixins/zindexable'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
|
||||
export default {
|
||||
name: 'NModal',
|
||||
mixins: [
|
||||
withapp,
|
||||
zindexable
|
||||
],
|
||||
props: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user