mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
feat: new doc in progress
This commit is contained in:
07akioni
parent
7020d2812b
commit
d64a0688cc
322
demo/components/buttonDemoX.vue
Normal file
322
demo/components/buttonDemoX.vue
Normal file
@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="doc"
|
||||
>
|
||||
<div class="doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
n-button
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="doc-body" />
|
||||
<div class="section-header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div class="section">
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button round>
|
||||
Cancel
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
Delete
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
round
|
||||
auto-text-color
|
||||
@click="handleClick"
|
||||
>
|
||||
handleClick
|
||||
</n-button>
|
||||
<n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
Round Button
|
||||
</div>
|
||||
<div class="section">
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button round>
|
||||
Cancel
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
Delete
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
round
|
||||
auto-text-color
|
||||
@click="handleClick"
|
||||
>
|
||||
handleClick
|
||||
</n-button>
|
||||
<n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
Button Type
|
||||
</div>
|
||||
<div class="section">
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button round>
|
||||
Cancel
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
Delete
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
round
|
||||
auto-text-color
|
||||
@click="handleClick"
|
||||
>
|
||||
handleClick
|
||||
</n-button>
|
||||
<n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
Icon Button
|
||||
</div>
|
||||
<div class="section">
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button round>
|
||||
Cancel
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
Delete
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
round
|
||||
auto-text-color
|
||||
@click="handleClick"
|
||||
>
|
||||
handleClick
|
||||
</n-button>
|
||||
<n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
Simulate Transparent Text
|
||||
</div>
|
||||
<div class="section">
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button round>
|
||||
Cancel
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
Delete
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
round
|
||||
auto-text-color
|
||||
@click="handleClick"
|
||||
>
|
||||
handleClick
|
||||
</n-button>
|
||||
<n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import docCodeEditorMixin from './docCodeEditorMixin'
|
||||
export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
methods: {
|
||||
handleClick () {
|
||||
alert('handleClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.doc {
|
||||
width: 780px;
|
||||
margin: 0 auto;
|
||||
.doc-header {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
align-items: center;
|
||||
}
|
||||
.doc-body {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.section-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section {
|
||||
background: #5C657EFF;
|
||||
padding: 18px;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.n-button {
|
||||
margin-right: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@ export default {
|
||||
mounted () {
|
||||
this.$refs.doc.querySelectorAll('textarea').forEach(ta => {
|
||||
CodeMirror.fromTextArea(ta, {
|
||||
lineNumbers: true,
|
||||
lineNumbers: false,
|
||||
mode: 'htmlmixed'
|
||||
})
|
||||
})
|
||||
|
||||
@ -3,27 +3,33 @@
|
||||
ref="doc"
|
||||
class="doc"
|
||||
>
|
||||
<h1>n-tooltip</h1>
|
||||
<hr>
|
||||
<h2>基本用法</h2>
|
||||
<n-tooltip>
|
||||
<template v-slot:activator>
|
||||
<button>hello tooltip</button>
|
||||
</template>
|
||||
<div>
|
||||
This is the contextual help
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<br><br>
|
||||
<div class="doc-header">
|
||||
<n-gradient-text :font-size="18">
|
||||
n-tooltip
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="doc-body" />
|
||||
<div class="section-header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div class="section">
|
||||
<n-tooltip>
|
||||
<template v-slot:activator>
|
||||
<n-button>hello tooltip</n-button>
|
||||
</template>
|
||||
<div>
|
||||
This is the contextual help
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
<textarea rows="5"><n-tooltip>
|
||||
<template v-slot:activator>
|
||||
scaffold
|
||||
<n-button>hello tooltip</n-button>
|
||||
</template>
|
||||
<div>
|
||||
This is the contextual help
|
||||
</div>
|
||||
</n-tooltip></textarea>
|
||||
<hr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -36,11 +42,29 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.doc {
|
||||
width: 900px;
|
||||
margin: auto;
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 3em;
|
||||
width: 780px;
|
||||
margin: 0 auto;
|
||||
.doc-header {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
align-items: center;
|
||||
}
|
||||
.doc-body {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.section-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section {
|
||||
background: #5C657EFF;
|
||||
padding: 18px;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
110
demo/demo.vue
110
demo/demo.vue
@ -2,82 +2,11 @@
|
||||
<div class="demo">
|
||||
<n-nimbus-service-layout
|
||||
service-icon="md-contacts"
|
||||
name="NAIVE UI"
|
||||
name="NAIVE UI (0.1.49)"
|
||||
:items="items"
|
||||
>
|
||||
123
|
||||
<router-view />
|
||||
</n-nimbus-service-layout>
|
||||
<!-- <div class="section">
|
||||
<router-link to="/n-nimbus-home-layout">
|
||||
home / n-nimbus-home-layout
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-nimbus-service-layout">
|
||||
service / n-nimbus-service-layout
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-gradient-text">
|
||||
渐变文字 / n-gradient-text
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-icon">
|
||||
图标 / n-icon
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-checkbox">
|
||||
多选框 / n-checkbox
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-button">
|
||||
按钮 / n-button
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-switch">
|
||||
开关 / n-switch
|
||||
</router-link><br>
|
||||
<router-link to="/n-table">
|
||||
表格 / n-table
|
||||
</router-link><br>
|
||||
<router-link to="/n-input">
|
||||
输入 / n-input
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-select">
|
||||
选择 / n-select
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-modal">
|
||||
模态框 / n-modal
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-nimbus-form-card">
|
||||
Nimbus 弹出式表单 / n-nimbus-form-card
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-message">
|
||||
通知 / $NMessage
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-tooltip">
|
||||
帮助 / n-tooltip
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/n-notification">
|
||||
通知 / $NNotification
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link
|
||||
to="/n-nimbus-confirm-card"
|
||||
>
|
||||
Nimbus 确认框 / n-nimbus-confirm-card
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link
|
||||
to="/n-pagination"
|
||||
>
|
||||
分页 / n-pagination
|
||||
</router-link>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -86,6 +15,9 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
name: 'Installation'
|
||||
},
|
||||
{
|
||||
name: 'Nimbus',
|
||||
path: '/',
|
||||
@ -114,55 +46,55 @@ export default {
|
||||
childItems: [
|
||||
{
|
||||
name: 'Button',
|
||||
path: '/'
|
||||
path: '/n-button'
|
||||
},
|
||||
{
|
||||
name: 'Checkbox',
|
||||
path: '/'
|
||||
path: '/n-checkbox'
|
||||
},
|
||||
{
|
||||
name: 'Gradient Text',
|
||||
path: '/'
|
||||
path: '/n-gradient-text'
|
||||
},
|
||||
{
|
||||
name: 'Icon',
|
||||
path: '/'
|
||||
path: '/n-icon'
|
||||
},
|
||||
{
|
||||
name: 'Input',
|
||||
path: '/'
|
||||
path: '/n-input'
|
||||
},
|
||||
{
|
||||
name: 'Message',
|
||||
path: '/'
|
||||
path: '/n-message'
|
||||
},
|
||||
{
|
||||
name: 'Modal',
|
||||
path: '/'
|
||||
path: '/n-modal'
|
||||
},
|
||||
{
|
||||
name: 'Notification',
|
||||
path: '/'
|
||||
path: '/n-notification'
|
||||
},
|
||||
{
|
||||
name: 'Pagination',
|
||||
path: '/'
|
||||
path: '/n-pagination'
|
||||
},
|
||||
{
|
||||
name: 'Select',
|
||||
path: '/'
|
||||
path: '/n-select'
|
||||
},
|
||||
{
|
||||
name: 'Switch',
|
||||
path: '/'
|
||||
path: '/n-switch'
|
||||
},
|
||||
{
|
||||
name: 'Table',
|
||||
path: '/'
|
||||
path: '/n-table'
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
path: '/'
|
||||
path: '/n-tooltip'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -187,9 +119,15 @@ export default {
|
||||
border: 1px solid #eee;
|
||||
height: auto;
|
||||
z-index: 0;
|
||||
border-radius: 6px;
|
||||
padding: 4px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.n-nimbus-service-layout__body {
|
||||
padding: 0!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -35,7 +35,7 @@ import homeDemo from './components/homeDemo'
|
||||
import gradientTextDemo from './components/gradientTextDemo'
|
||||
import iconDemo from './components/iconDemo'
|
||||
import checkboxDemo from './components/checkboxDemo'
|
||||
import ButtonDemo from './components/ButtonDemo'
|
||||
import ButtonDemo from './components/buttonDemoX'
|
||||
import switchDemo from './components/switchDemo'
|
||||
import tableDemo from './components/tableDemo'
|
||||
import inputDemo from './components/inputDemo'
|
||||
@ -78,24 +78,28 @@ NimbusConfirmCard.install(Vue)
|
||||
Pagination.install(Vue)
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: demo },
|
||||
{ path: '/n-nimbus-service-layout', component: sideMenuDemo },
|
||||
{ path: '/n-nimbus-home-layout', component: homeDemo },
|
||||
{ path: '/n-gradient-text', component: gradientTextDemo },
|
||||
{ path: '/n-icon', component: iconDemo },
|
||||
{ path: '/n-checkbox', component: checkboxDemo },
|
||||
{ path: '/n-button', component: ButtonDemo },
|
||||
{ path: '/n-switch', component: switchDemo },
|
||||
{ path: '/n-table', component: tableDemo },
|
||||
{ path: '/n-input', component: inputDemo },
|
||||
{ path: '/n-select', component: selectDemo },
|
||||
{ path: '/n-modal', component: modalDemo },
|
||||
{ path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
|
||||
{ path: '/n-message', component: messageDemo },
|
||||
{ path: '/n-tooltip', component: tooltipDemo },
|
||||
{ path: '/n-notification', component: notificationDemo },
|
||||
{ path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo },
|
||||
{ path: '/n-pagination', component: paginationDemo }
|
||||
{ path: '/',
|
||||
component: demo,
|
||||
children: [
|
||||
{ path: '/n-nimbus-service-layout', component: sideMenuDemo },
|
||||
{ path: '/n-nimbus-home-layout', component: homeDemo },
|
||||
{ path: '/n-gradient-text', component: gradientTextDemo },
|
||||
{ path: '/n-icon', component: iconDemo },
|
||||
{ path: '/n-checkbox', component: checkboxDemo },
|
||||
{ path: '/n-button', component: ButtonDemo },
|
||||
{ path: '/n-switch', component: switchDemo },
|
||||
{ path: '/n-table', component: tableDemo },
|
||||
{ path: '/n-input', component: inputDemo },
|
||||
{ path: '/n-select', component: selectDemo },
|
||||
{ path: '/n-modal', component: modalDemo },
|
||||
{ path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
|
||||
{ path: '/n-message', component: messageDemo },
|
||||
{ path: '/n-tooltip', component: tooltipDemo },
|
||||
{ path: '/n-notification', component: notificationDemo },
|
||||
{ path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo },
|
||||
{ path: '/n-pagination', component: paginationDemo }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
@ -105,5 +109,3 @@ const router = new VueRouter({
|
||||
;(new Vue({
|
||||
router
|
||||
})).$mount('#app')
|
||||
|
||||
console.log('...')
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.1.48",
|
||||
"version": "0.1.49",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="n-nimbus-service-layout">
|
||||
<div><slot name="header" /></div>
|
||||
<div
|
||||
class="n-nimbus-service-layout__body"
|
||||
:class="{ 'n-nimbus-service-layout__body--collapsed': isCollapsed, 'n-nimbus-service-layout__body--active': !isCollapsed }"
|
||||
@ -254,11 +255,12 @@ export default {
|
||||
.n-nimbus-service-layout-drawer__header {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
height: 60px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
color: #E9E9EC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.n-nimbus-service-layout-drawer-header__content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user