mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
doc(popover): refactor popover doc pages
This commit is contained in:
07akioni
parent
9d264f9499
commit
0598bc7921
@ -20,6 +20,12 @@
|
||||
</template>
|
||||
<span>Out Out Out</span>
|
||||
</n-popover>
|
||||
<n-tooltip arrow>
|
||||
<template v-slot:activator>
|
||||
<span>LongLongLongLong</span>
|
||||
</template>
|
||||
<span>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
11
demo/documentation/components/popover/enUS/basic.md
Normal file
11
demo/documentation/components/popover/enUS/basic.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-popover>
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
</n-popover>
|
||||
```
|
||||
11
demo/documentation/components/popover/enUS/delay.md
Normal file
11
demo/documentation/components/popover/enUS/delay.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Delay
|
||||
```html
|
||||
<n-popover :delay="500" :duration="500">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
</n-popover>
|
||||
```
|
||||
78
demo/documentation/components/popover/enUS/event.md
Normal file
78
demo/documentation/components/popover/enUS/event.md
Normal file
@ -0,0 +1,78 @@
|
||||
# Event
|
||||
```html
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
trigger="hover"
|
||||
style="margin-right: 12px;"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Hover)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
trigger="click"
|
||||
style="margin-right: 12px;"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Click)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover
|
||||
v-model="showPopover"
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
trigger="manual"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
California Girls(Manual)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleShow() {
|
||||
this.$NMessage.success("show popover");
|
||||
},
|
||||
handleHide() {
|
||||
this.$NMessage.success("hide popover");
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
11
demo/documentation/components/popover/enUS/index.md
Normal file
11
demo/documentation/components/popover/enUS/index.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Popover
|
||||
```demo
|
||||
basic
|
||||
delay
|
||||
no-arrow
|
||||
trigger
|
||||
event
|
||||
placement
|
||||
raw-content
|
||||
width
|
||||
```
|
||||
11
demo/documentation/components/popover/enUS/noArrow.md
Normal file
11
demo/documentation/components/popover/enUS/noArrow.md
Normal file
@ -0,0 +1,11 @@
|
||||
# No Arrow
|
||||
```html
|
||||
<n-popover :arrow="false">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
</n-popover>
|
||||
```
|
||||
139
demo/documentation/components/popover/enUS/placement.md
Normal file
139
demo/documentation/components/popover/enUS/placement.md
Normal file
@ -0,0 +1,139 @@
|
||||
# Placement
|
||||
```html
|
||||
<div class="popover-grid">
|
||||
<n-popover placement="top-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
|
||||
Top Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="top" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
|
||||
Top
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="top-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 1 / 4/ 2 / 5;">
|
||||
Top End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="left-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
|
||||
Left Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="left" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
|
||||
Left
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="left-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
|
||||
Left End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="right-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 2 / 5 / 3 / 6;">
|
||||
Right Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="right" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 3 / 5 / 4 / 6;">
|
||||
Right
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="right-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 4 / 5 / 5 / 6;">
|
||||
Right End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
|
||||
Bottom Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
|
||||
Bottom
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 5 / 4 / 6 / 5;">
|
||||
Bottom End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
Oops!
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.popover-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 48px;
|
||||
}
|
||||
```
|
||||
22
demo/documentation/components/popover/enUS/rawContent.md
Normal file
22
demo/documentation/components/popover/enUS/rawContent.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Raw Content
|
||||
```html
|
||||
<n-popover raw :arrow="false">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
</n-button>
|
||||
</template>
|
||||
<div
|
||||
style="width: 100px; height: 100px; background-color: red; transform-origin: inherit;"
|
||||
>
|
||||
Who kicks a hole in the sky so the heaven cry over me.
|
||||
</div>
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
```
|
||||
47
demo/documentation/components/popover/enUS/trigger.md
Normal file
47
demo/documentation/components/popover/enUS/trigger.md
Normal file
@ -0,0 +1,47 @@
|
||||
# Trigger
|
||||
```html
|
||||
<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Hover)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover v-model="showPopover" placement="bottom" trigger="manual">
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
California Girls(Manual)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Click)
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
11
demo/documentation/components/popover/enUS/width.md
Normal file
11
demo/documentation/components/popover/enUS/width.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Width
|
||||
```html
|
||||
<n-popover :width="500">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
</n-popover>
|
||||
```
|
||||
0
demo/documentation/components/popover/index.entry
Normal file
0
demo/documentation/components/popover/index.entry
Normal file
0
demo/documentation/components/popover/zhCN/index.md
Normal file
0
demo/documentation/components/popover/zhCN/index.md
Normal file
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-tag>Real Love</n-tag>
|
||||
<n-tag
|
||||
type="success"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
Yes It Is
|
||||
</n-tag>
|
||||
<n-tag
|
||||
type="warning"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
I'm Down
|
||||
</n-tag>
|
||||
<n-tag
|
||||
type="error"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
Yesterday
|
||||
</n-tag>
|
||||
<n-tag
|
||||
type="info"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
I'm Looking Through You
|
||||
</n-tag>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.$NMessage.info('tag close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--STYLE_EXAMPLE_START-->
|
||||
<style
|
||||
scoped
|
||||
>
|
||||
.n-tag {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
<!--STYLE_EXAMPLE_END-->
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Tag / n-tag
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -19,9 +19,10 @@
|
||||
<div />
|
||||
<div class="theme-picker">
|
||||
<n-select
|
||||
v-model="NApp.$parent.theme"
|
||||
v-model="theme"
|
||||
size="small"
|
||||
:options="options"
|
||||
@change="handleThemeChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="lang-picker">
|
||||
@ -78,6 +79,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleThemeChange (theme) {
|
||||
this.NApp.$parent.theme = theme
|
||||
},
|
||||
handleLangInput (lang) {
|
||||
this.$emit('lang-change', lang)
|
||||
}
|
||||
@ -88,7 +92,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.nav {
|
||||
display: grid;
|
||||
grid-template-columns: 272px 1fr 128px 160px;
|
||||
grid-template-columns: 272px 1fr 96px 140px;
|
||||
grid-template-rows: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
10
demo/init.js
10
demo/init.js
@ -25,7 +25,7 @@ import modalDemo from './documentation/components/modalDemo'
|
||||
import nimbusFormCardDemo from './documentation/components/nimbusFormCardDemo'
|
||||
import messageDemo from './documentation/components/messageDemo'
|
||||
import tooltipDemo from './documentation/components/tooltipDemo'
|
||||
import popoverDemo from './documentation/components/popoverDemo'
|
||||
import popover from './documentation/components/popover'
|
||||
import alertDemo from './documentation/components/alertDemo'
|
||||
import datePickerDemo from './documentation/components/datePickerDemo'
|
||||
import inputNumberDemo from './documentation/components/inputNumberDemo'
|
||||
@ -46,7 +46,7 @@ import nimbusConfirmCardDemo from './documentation/components/nimbusConfirmCardD
|
||||
import paginationDemo from './documentation/components/paginationDemo'
|
||||
import startPage from './documentation/components/startPage'
|
||||
import collapseDemo from './documentation/components/collapseDemo'
|
||||
import tagDemo from './documentation/components/tag'
|
||||
import tag from './documentation/components/tag'
|
||||
import timelineDemo from './documentation/components/timelineDemo'
|
||||
import progressDemo from './documentation/components/progressDemo'
|
||||
import dividerDemo from './documentation/components/dividerDemo'
|
||||
@ -105,7 +105,7 @@ const routes = [
|
||||
component: homeDemo
|
||||
},
|
||||
{
|
||||
path: '/n-popover-debug',
|
||||
path: '/:lang/:theme/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
@ -138,7 +138,7 @@ const routes = [
|
||||
{ path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
|
||||
{ path: '/n-message', component: messageDemo },
|
||||
{ path: '/n-tooltip', component: tooltipDemo },
|
||||
{ path: '/n-popover', component: popoverDemo },
|
||||
{ path: '/n-popover', component: popover },
|
||||
{ path: '/n-notification', component: notificationDemo },
|
||||
{ path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo },
|
||||
{ path: '/n-pagination', component: paginationDemo },
|
||||
@ -158,7 +158,7 @@ const routes = [
|
||||
{ path: '/n-steps', component: stepsDemo },
|
||||
{ path: '/n-collapse', component: collapseDemo },
|
||||
{ path: '/n-progress', component: progressDemo },
|
||||
{ path: '/n-tag', component: tagDemo },
|
||||
{ path: '/n-tag', component: tag },
|
||||
{ path: '/n-timeline', component: timelineDemo },
|
||||
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
|
||||
{ path: '/n-back-top', component: backTopDemo },
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.5.2",
|
||||
"version": "0.5.3",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user