mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
doc: refactor introduction
This commit is contained in:
07akioni
parent
4733320cea
commit
f48b987cfa
12
README.md
12
README.md
@ -26,25 +26,27 @@ Run `npm run test-cov` to test all components and see detailed test coverage rep
|
||||
## Want to see how component works
|
||||
1. Run `npm run dev`
|
||||
2. Open `http://localhost:8086/` in browser.
|
||||
|
||||
## Want to add your own component
|
||||
There is no guideline for now. If you want to know how to do it, you can explore by yourself or ask `lecong.zhang@tusimple.ai`.
|
||||
|
||||
## Publish a new version
|
||||
1. You **MUST** change your version according to [semver](https://semver.org/)
|
||||
2. `npm run release`
|
||||
3. You **MAY** publish documentation by running `npm run release-doc`
|
||||
|
||||
## Installation & Usage
|
||||
First install it.
|
||||
```
|
||||
|
||||
```bash
|
||||
npm install --save-dev naive-ui
|
||||
```
|
||||
Then add the following lines in you entry point js file.
|
||||
```
|
||||
...
|
||||
```js
|
||||
import naiveUi from 'naive-ui'
|
||||
import 'naive-ui/dist/lib/index.css
|
||||
import 'naive-ui/dist/lib/index.css'
|
||||
|
||||
Vue.use(naiveUi)
|
||||
...
|
||||
```
|
||||
## Component Develop Status
|
||||
|Component|Develop status|Unit Test|Note|
|
||||
|
||||
@ -5,3 +5,63 @@ exports.alias = {
|
||||
packages: path.resolve(__dirname, '../packages'),
|
||||
examples: path.resolve(__dirname, '../examples')
|
||||
}
|
||||
|
||||
exports.docLoaders = [
|
||||
{
|
||||
test: /index.entry$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocEntryLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /index\.md$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /(README\.md$|\.vue\.md$)/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIMdLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.md$/,
|
||||
exclude: [/index\.md$/, /README\.md$/, /\.vue\.md$/]
|
||||
},
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /\.demo\.vue$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../doc/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.vue$/,
|
||||
exclude: /\.demo\.vue$/
|
||||
},
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: [/node_modules/],
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: ['style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
resourceQuery: /blockType=i18n/,
|
||||
type: 'javascript/auto',
|
||||
loader: '@kazupon/vue-i18n-loader'
|
||||
}
|
||||
]
|
||||
|
||||
@ -34,61 +34,7 @@ const webpackConfig = {
|
||||
children: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /index.entry$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocEntryLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /index\.md$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.md$/,
|
||||
exclude: /index\.md$/
|
||||
},
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /\.demo\.vue$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../doc/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.vue$/,
|
||||
exclude: /\.demo\.vue$/
|
||||
},
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: [/node_modules/],
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: ['style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
resourceQuery: /blockType=i18n/,
|
||||
type: 'javascript/auto',
|
||||
loader: '@kazupon/vue-i18n-loader'
|
||||
}
|
||||
]
|
||||
rules: config.docLoaders
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
|
||||
@ -29,72 +29,7 @@ const webpackConfig = {
|
||||
children: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /index.entry$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocEntryLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /index\.md$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.md$/,
|
||||
exclude: /index\.md$/
|
||||
},
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /\.demo\.vue$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../doc/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.vue$/,
|
||||
exclude: /\.demo\.vue$/
|
||||
},
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: [/node_modules/],
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
// {
|
||||
// test: /\.(scss|css)$/,
|
||||
// use: [
|
||||
// 'style-loader',
|
||||
// 'css-loader',
|
||||
// 'sass-loader'
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader', 'sass-loader']
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
resourceQuery: /blockType=i18n/,
|
||||
type: 'javascript/auto',
|
||||
loader: '@kazupon/vue-i18n-loader'
|
||||
}
|
||||
]
|
||||
rules: config.docLoaders
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
|
||||
@ -29,72 +29,7 @@ const webpackConfig = {
|
||||
children: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /index.entry$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocEntryLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /index\.md$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.md$/,
|
||||
exclude: /index\.md$/
|
||||
},
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: /\.demo\.vue$/,
|
||||
loader: ['vue-loader', path.resolve(__dirname, '../doc/NaiveUIDemoLoader.js')]
|
||||
},
|
||||
{
|
||||
test: {
|
||||
test: /\.vue$/,
|
||||
exclude: /\.demo\.vue$/
|
||||
},
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: [/node_modules/],
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
// {
|
||||
// test: /\.(scss|css)$/,
|
||||
// use: [
|
||||
// 'style-loader',
|
||||
// 'css-loader',
|
||||
// 'sass-loader'
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader', 'sass-loader']
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
resourceQuery: /blockType=i18n/,
|
||||
type: 'javascript/auto',
|
||||
loader: '@kazupon/vue-i18n-loader'
|
||||
}
|
||||
]
|
||||
rules: config.docLoaders
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
|
||||
@ -40,11 +40,23 @@ export default {
|
||||
items () {
|
||||
return [
|
||||
{
|
||||
name: 'Start',
|
||||
name: 'Naive UI',
|
||||
path: `/${this.lang}/${this.theme}` + '/intro'
|
||||
},
|
||||
{
|
||||
name: 'Getting Started',
|
||||
path: `/${this.lang}/${this.theme}` + '/start'
|
||||
},
|
||||
{
|
||||
name: 'Nimbus',
|
||||
name: 'Develop Guidelines',
|
||||
path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
|
||||
},
|
||||
{
|
||||
name: 'Develop Status',
|
||||
path: `/${this.lang}/${this.theme}` + '/status'
|
||||
},
|
||||
{
|
||||
name: 'Nimbus Components',
|
||||
path: `/${this.lang}/${this.theme}` + '/',
|
||||
childItems: [
|
||||
{
|
||||
@ -66,7 +78,7 @@ export default {
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Common',
|
||||
name: 'Common Components',
|
||||
childItems: [
|
||||
{
|
||||
name: 'AdvanceTable',
|
||||
@ -380,7 +392,7 @@ body {
|
||||
.n-doc-section {
|
||||
.n-doc-section__header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.n-doc-section__view {
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
LoadingBar / n-loading-bar
|
||||
</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,47 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basis Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button @click="handleStart">
|
||||
start
|
||||
</n-button>
|
||||
<n-button @click="handleFinish">
|
||||
finish
|
||||
</n-button>
|
||||
<n-button @click="handleError">
|
||||
error
|
||||
</n-button>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">Inspect some value here</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStart () {
|
||||
this.$NLoadingBar.start()
|
||||
},
|
||||
handleFinish () {
|
||||
this.$NLoadingBar.finish()
|
||||
},
|
||||
handleError () {
|
||||
this.$NLoadingBar.error()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
class="readme"
|
||||
>
|
||||
<div class="n-doc-body">
|
||||
<div
|
||||
class="n-doc-section__text-content"
|
||||
v-html="readme"
|
||||
/>
|
||||
</div>
|
||||
<readme />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import readme from '../../readme'
|
||||
import docCodeEditorMixin from './docCodeEditorMixin'
|
||||
import readme from '../../../README.md'
|
||||
import { replaceEmojiWithImages } from '../../utils'
|
||||
|
||||
export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
data () {
|
||||
return {
|
||||
readme
|
||||
}
|
||||
components: {
|
||||
readme
|
||||
},
|
||||
mounted () {
|
||||
replaceEmojiWithImages(this.$refs.doc)
|
||||
@ -31,805 +23,10 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.markdown-body .octicon {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
vertical-align: text-bottom;
|
||||
<style scoped>
|
||||
.readme {
|
||||
padding: 24px 0 24px 0;
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.markdown-body .anchor {
|
||||
float: left;
|
||||
line-height: 1;
|
||||
margin-left: -20px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.markdown-body .anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.markdown-body h1 .octicon-link,
|
||||
.markdown-body h2 .octicon-link,
|
||||
.markdown-body h3 .octicon-link,
|
||||
.markdown-body h4 .octicon-link,
|
||||
.markdown-body h5 .octicon-link,
|
||||
.markdown-body h6 .octicon-link {
|
||||
color: #1b1f23;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor,
|
||||
.markdown-body h2:hover .anchor,
|
||||
.markdown-body h3:hover .anchor,
|
||||
.markdown-body h4:hover .anchor,
|
||||
.markdown-body h5:hover .anchor,
|
||||
.markdown-body h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor .octicon-link,
|
||||
.markdown-body h2:hover .anchor .octicon-link,
|
||||
.markdown-body h3:hover .anchor .octicon-link,
|
||||
.markdown-body h4:hover .anchor .octicon-link,
|
||||
.markdown-body h5:hover .anchor .octicon-link,
|
||||
.markdown-body h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
color: #e9e9ec;
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c {
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c1,
|
||||
.markdown-body .pl-s .pl-v {
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
.markdown-body .pl-e,
|
||||
.markdown-body .pl-en {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.markdown-body .pl-s .pl-s1,
|
||||
.markdown-body .pl-smi {
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ent {
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.markdown-body .pl-k {
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.markdown-body .pl-pds,
|
||||
.markdown-body .pl-s,
|
||||
.markdown-body .pl-s .pl-pse .pl-s1,
|
||||
.markdown-body .pl-sr,
|
||||
.markdown-body .pl-sr .pl-cce,
|
||||
.markdown-body .pl-sr .pl-sra,
|
||||
.markdown-body .pl-sr .pl-sre {
|
||||
color: #032f62;
|
||||
}
|
||||
|
||||
.markdown-body .pl-smw,
|
||||
.markdown-body .pl-v {
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
.markdown-body .pl-bu {
|
||||
color: #b31d28;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ii {
|
||||
background-color: #b31d28;
|
||||
color: #fafbfc;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c2 {
|
||||
background-color: #d73a49;
|
||||
color: #fafbfc;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c2:before {
|
||||
content: "^M";
|
||||
}
|
||||
|
||||
.markdown-body .pl-sr .pl-cce {
|
||||
color: #22863a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ml {
|
||||
color: #735c0f;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mh,
|
||||
.markdown-body .pl-mh .pl-en,
|
||||
.markdown-body .pl-ms {
|
||||
color: #005cc5;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi {
|
||||
color: #24292e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mb {
|
||||
color: #24292e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body .pl-md {
|
||||
background-color: #ffeef0;
|
||||
color: #b31d28;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi1 {
|
||||
background-color: #f0fff4;
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mc {
|
||||
background-color: #ffebda;
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi2 {
|
||||
background-color: #005cc5;
|
||||
color: #f6f8fa;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mdr {
|
||||
color: #6f42c1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ba {
|
||||
color: #586069;
|
||||
}
|
||||
|
||||
.markdown-body .pl-sg {
|
||||
color: #959da5;
|
||||
}
|
||||
|
||||
.markdown-body .pl-corl {
|
||||
color: #032f62;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-body details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.markdown-body summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
background-color: transparent;
|
||||
color: #63e2b7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a:active,
|
||||
.markdown-body a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
font-weight: 600;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
margin: .67em 0;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
background-color: transparent;
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body kbd,
|
||||
.markdown-body pre {
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #dfe2e5;
|
||||
margin: 15px 0;
|
||||
background-color: #e1e4e8;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.markdown-body [type=checkbox] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-body hr:before {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.markdown-body hr:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
color: #333;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown-body td,
|
||||
.markdown-body th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2 {
|
||||
font-weight: 600;
|
||||
padding-bottom: .3em;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.markdown-body h3,
|
||||
.markdown-body h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown-body h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
border-left: .25em solid #dfe2e5;
|
||||
color: #6a737d;
|
||||
padding: 0 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body ol,
|
||||
.markdown-body ul {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.markdown-body ol ol ol,
|
||||
.markdown-body ol ul ol,
|
||||
.markdown-body ul ol ol,
|
||||
.markdown-body ul ul ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.markdown-body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body pre {
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
word-wrap: normal;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body input::-webkit-inner-spin-button,
|
||||
.markdown-body input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body .border {
|
||||
border: 1px solid #e1e4e8!important;
|
||||
}
|
||||
|
||||
.markdown-body .border-0 {
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
.markdown-body .border-bottom {
|
||||
border-bottom: 1px solid #e1e4e8!important;
|
||||
}
|
||||
|
||||
.markdown-body .rounded-1 {
|
||||
border-radius: 3px!important;
|
||||
}
|
||||
|
||||
.markdown-body .bg-white {
|
||||
background-color: #fff!important;
|
||||
}
|
||||
|
||||
.markdown-body .bg-gray-light {
|
||||
background-color: #fafbfc!important;
|
||||
}
|
||||
|
||||
.markdown-body .text-gray-light {
|
||||
color: #6a737d!important;
|
||||
}
|
||||
|
||||
.markdown-body .mb-0 {
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
|
||||
.markdown-body .my-2 {
|
||||
margin-bottom: 8px!important;
|
||||
margin-top: 8px!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-0 {
|
||||
padding-left: 0!important;
|
||||
}
|
||||
|
||||
.markdown-body .py-0 {
|
||||
padding-bottom: 0!important;
|
||||
padding-top: 0!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-1 {
|
||||
padding-left: 4px!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-2 {
|
||||
padding-left: 8px!important;
|
||||
}
|
||||
|
||||
.markdown-body .py-2 {
|
||||
padding-bottom: 8px!important;
|
||||
padding-top: 8px!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-3,
|
||||
.markdown-body .px-3 {
|
||||
padding-left: 16px!important;
|
||||
}
|
||||
|
||||
.markdown-body .px-3 {
|
||||
padding-right: 16px!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-4 {
|
||||
padding-left: 24px!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-5 {
|
||||
padding-left: 32px!important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-6 {
|
||||
padding-left: 40px!important;
|
||||
}
|
||||
|
||||
.markdown-body .f6 {
|
||||
font-size: 12px!important;
|
||||
}
|
||||
|
||||
.markdown-body .lh-condensed {
|
||||
line-height: 1.25!important;
|
||||
}
|
||||
|
||||
.markdown-body .text-bold {
|
||||
font-weight: 600!important;
|
||||
}
|
||||
|
||||
.markdown-body:before {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.markdown-body:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.markdown-body>:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
|
||||
.markdown-body>:last-child {
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
|
||||
.markdown-body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body blockquote,
|
||||
.markdown-body dl,
|
||||
.markdown-body ol,
|
||||
.markdown-body p,
|
||||
.markdown-body pre,
|
||||
.markdown-body table,
|
||||
.markdown-body ul {
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body blockquote>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body blockquote>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body kbd {
|
||||
background-color: #fafbfc;
|
||||
border: 1px solid #d1d5da;
|
||||
border-bottom-color: #c6cbd1;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||
color: #444d56;
|
||||
display: inline-block;
|
||||
font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
line-height: 10px;
|
||||
padding: 3px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ul ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
word-wrap: break-all;
|
||||
}
|
||||
|
||||
.markdown-body li>p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markdown-body li+li {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
.markdown-body dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body dl dt {
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body dl dd {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.markdown-body table th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body table td,
|
||||
.markdown-body table th {
|
||||
border: 1px solid #dfe2e5;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
.markdown-body table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #c6cbd1;
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.markdown-body img[align=right] {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown-body img[align=left] {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
margin: 0;
|
||||
padding: .2em .4em;
|
||||
}
|
||||
|
||||
.markdown-body pre>code {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markdown-body .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: inline;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
max-width: auto;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.markdown-body .commit-tease-sha {
|
||||
color: #444d56;
|
||||
display: inline-block;
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.markdown-body .blob-wrapper {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.markdown-body .blob-wrapper-embedded {
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.markdown-body .blob-num {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: rgba(27,31,35,.3);
|
||||
cursor: pointer;
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
min-width: 50px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.markdown-body .blob-num:hover {
|
||||
color: rgba(27,31,35,.6);
|
||||
}
|
||||
|
||||
.markdown-body .blob-num:before {
|
||||
content: attr(data-line-number);
|
||||
}
|
||||
|
||||
.markdown-body .blob-code {
|
||||
line-height: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.markdown-body .blob-code-inner {
|
||||
color: #24292e;
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: 12px;
|
||||
overflow: visible;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.markdown-body .pl-token.active,
|
||||
.markdown-body .pl-token:hover {
|
||||
background: #ffea7f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-body :checked+.radio-label {
|
||||
border-color: #0366d6;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="1"] {
|
||||
-moz-tab-size: 1;
|
||||
tab-size: 1;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="2"] {
|
||||
-moz-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="3"] {
|
||||
-moz-tab-size: 3;
|
||||
tab-size: 3;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="4"] {
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="5"] {
|
||||
-moz-tab-size: 5;
|
||||
tab-size: 5;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="6"] {
|
||||
-moz-tab-size: 6;
|
||||
tab-size: 6;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="7"] {
|
||||
-moz-tab-size: 7;
|
||||
tab-size: 7;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="8"] {
|
||||
-moz-tab-size: 8;
|
||||
tab-size: 8;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="9"] {
|
||||
-moz-tab-size: 9;
|
||||
tab-size: 9;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="10"] {
|
||||
-moz-tab-size: 10;
|
||||
tab-size: 10;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="11"] {
|
||||
-moz-tab-size: 11;
|
||||
tab-size: 11;
|
||||
}
|
||||
|
||||
.markdown-body .tab-size[data-tab-size="12"] {
|
||||
-moz-tab-size: 12;
|
||||
tab-size: 12;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item+.task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item input {
|
||||
margin: 0 .2em .25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
32
demo/documentation/intro/devGuidelines.vue
Normal file
32
demo/documentation/intro/devGuidelines.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="readme"
|
||||
>
|
||||
<readme />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import readme from './devGuidelines.vue.md'
|
||||
import { replaceEmojiWithImages } from '../../utils'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
readme
|
||||
},
|
||||
mounted () {
|
||||
replaceEmojiWithImages(this.$refs.doc)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.readme {
|
||||
padding: 24px 0 24px 0;
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
30
demo/documentation/intro/devGuidelines.vue.md
Normal file
30
demo/documentation/intro/devGuidelines.vue.md
Normal file
@ -0,0 +1,30 @@
|
||||
# Develop Guidelines
|
||||
## Git Commit Message Style
|
||||
You **MUST** follow [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
|
||||
|
||||
If you want see some example, see [Angular Commits on Github](https://github.com/angular/angular/commits/master).
|
||||
## Coding Style
|
||||
### Javascript Style
|
||||
You **MUST** follow [Standard JS](https://standardjs.com/).
|
||||
### SCSS Style
|
||||
Run `npm run lint-style` to check styles.
|
||||
### Check Both
|
||||
Run `npm run lint`
|
||||
You **MUST** fix all lint warnings and errors before you push your branch.
|
||||
## Unit test
|
||||
If you create a component, you **MUST** add unit test for it.
|
||||
|
||||
Run `npm run test` to test all components.
|
||||
Run `npm run test-cov` to test all components and see detailed test coverage report.
|
||||
|
||||
## See How Component Works
|
||||
1. Run `npm run dev`
|
||||
2. Open `http://localhost:8086/` in browser.
|
||||
|
||||
## Add Your Own Component
|
||||
There is no guideline for now. If you want to know how to do it, you can explore by yourself or ask `lecong.zhang@tusimple.ai`.
|
||||
|
||||
## Publish a New Version
|
||||
1. You **MUST** change your version according to [semver](https://semver.org/)
|
||||
2. `npm run release`
|
||||
3. You **MAY** publish documentation by running `npm run release-doc`
|
||||
32
demo/documentation/intro/intro.vue
Normal file
32
demo/documentation/intro/intro.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="readme"
|
||||
>
|
||||
<readme />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import readme from './intro.vue.md'
|
||||
import { replaceEmojiWithImages } from '../../utils'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
readme
|
||||
},
|
||||
mounted () {
|
||||
replaceEmojiWithImages(this.$refs.doc)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.readme {
|
||||
padding: 24px 0 24px 0;
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
2
demo/documentation/intro/intro.vue.md
Normal file
2
demo/documentation/intro/intro.vue.md
Normal file
@ -0,0 +1,2 @@
|
||||
# Naive UI
|
||||
Naive UI is a Vue-Based Frontend Component Library of TuSimple.
|
||||
32
demo/documentation/intro/start.vue
Normal file
32
demo/documentation/intro/start.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="readme"
|
||||
>
|
||||
<readme />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import readme from './start.vue.md'
|
||||
import { replaceEmojiWithImages } from '../../utils'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
readme
|
||||
},
|
||||
mounted () {
|
||||
replaceEmojiWithImages(this.$refs.doc)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.readme {
|
||||
padding: 24px 0 24px 0;
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
17
demo/documentation/intro/start.vue.md
Normal file
17
demo/documentation/intro/start.vue.md
Normal file
@ -0,0 +1,17 @@
|
||||
# Getting Started
|
||||
|
||||
## Installation
|
||||
First install it.
|
||||
|
||||
```bash
|
||||
npm install --save-dev naive-ui
|
||||
```
|
||||
|
||||
## Usage
|
||||
Add the following lines in you entry point js file.
|
||||
```js
|
||||
import naive from 'naive-ui'
|
||||
import 'naive-ui/dist/lib/index.css'
|
||||
|
||||
Vue.use(naive)
|
||||
```
|
||||
32
demo/documentation/intro/status.vue
Normal file
32
demo/documentation/intro/status.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="readme"
|
||||
>
|
||||
<readme />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import readme from './status.vue.md'
|
||||
import { replaceEmojiWithImages } from '../../utils'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
readme
|
||||
},
|
||||
mounted () {
|
||||
replaceEmojiWithImages(this.$refs.doc)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.readme {
|
||||
padding: 24px 0 24px 0;
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
94
demo/documentation/intro/status.vue.md
Normal file
94
demo/documentation/intro/status.vue.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Develop Status
|
||||
|
||||
## Components
|
||||
|Component|Develop Status|Unit Test|Note|
|
||||
|--|:--:|:--:|--|
|
||||
|Alert|😍|❌||
|
||||
|Button|😍|🆗||
|
||||
|Checkbox|😍|🆗||
|
||||
|DatePicker|😍|❌||
|
||||
|TimePicker|😍|❌||
|
||||
|GradientText|😍|🆗||
|
||||
|Icon|😍|🆗||
|
||||
|Input|😍|🆗||
|
||||
|Message|😍|❌|Code clean in need|
|
||||
|Modal|😍|❌|Code clean in need|
|
||||
|Notification|😍|❌|Code clean in need|
|
||||
|Pagination|😍|🆗|Unit test is not enough|
|
||||
|Select|😍|🆗|Multiple search is not done|
|
||||
|Switch|😍|❌||
|
||||
|Tooltip|😍|❌||
|
||||
|Popover|😍|❌||
|
||||
|InputNumber|😍|❌||
|
||||
|Radio|😍|||
|
||||
|Tab|😍|||
|
||||
|Badge|😍|||
|
||||
|Steps|😍|||
|
||||
|Tag|😍|||
|
||||
|Divider|😍|||
|
||||
|Popconfirm|😍|||
|
||||
|BackTop|😍|||
|
||||
|Progress|😍||Multiple Value|
|
||||
|Timeline|😍|||
|
||||
|Collapse|😍|||
|
||||
|Cascader|😍|||
|
||||
|Dropdown|😍|||
|
||||
|Transfer|😍|||
|
||||
|Spin|😍|||
|
||||
|Drawer|🤔|||
|
||||
|FormItem|🤔|❌||
|
||||
|Form|🤔|❌||
|
||||
|Table|🤔|❌|Function is not fulfilled|
|
||||
|Slider|🤔|||
|
||||
|LoadingBar|😍|||
|
||||
|AutoComplete|🚧|||
|
||||
|Tree|🤔|||
|
||||
|TreeSelect|🚧|||
|
||||
|Upload|🚧|||
|
||||
|Time|🚧|||
|
||||
|Anchor|🚧|||
|
||||
|Statistic|🚧|||
|
||||
|Breadcrumb|🚧|||
|
||||
|Card|🚧|||
|
||||
|Empty|🚧|||
|
||||
|Grid|🚧|||
|
||||
|Layout|🚧|||
|
||||
|Affix|🚧|||
|
||||
|Rating|🚧|||
|
||||
|Avator|🚧|||
|
||||
|Result|🚧|||
|
||||
|Menu|✋||Not Planned|
|
||||
|Typography|✋||Not Planned|
|
||||
|Mentions|✋||Not Planned|
|
||||
|Calendar|✋||Not Planned|
|
||||
|Carousel|✋||Not Planned|
|
||||
|
||||
## Todos
|
||||
1. <del>Z-index management on `Select` & `Tooltip` & `Modal`(Low Priority)</del>
|
||||
2. Full featured table component(Medium Priority)
|
||||
3. Form component(Medium Priority)
|
||||
4. FormItem component(High Priority)
|
||||
5. Complete unit test for all existing components(High Priority)
|
||||
6. <del>Create a Markdown webpack loader to convert documentation(Low Priority)</del>
|
||||
7. <del>Refactor documentation page(for code clairity)</del>
|
||||
8. Code refactor for some 😢 messy code(which is my bad...)
|
||||
9. Refactor CSS use mixins(which means I should learn SCSS hard...)
|
||||
10. Split icons for components.
|
||||
11. Fulfill props for all components.
|
||||
12. Add keyboard event on planned components.
|
||||
13. Finish all planned components
|
||||
14. Refactor using proper html tags
|
||||
15. Unit Test
|
||||
|
||||
## RoadMap
|
||||
|Version|Milestone|
|
||||
|-|-|
|
||||
|0.3|Cascader|
|
||||
|0.4|Refactor popover, remove wrap element of it|
|
||||
|0.5|Refactor CSS using mixin. Refactor documentation. Light theme.|
|
||||
|0.6|Refactor form component|
|
||||
|0.7|Refactor table component|
|
||||
|0.8|i18n|
|
||||
|0.9|Unit Test|
|
||||
|0.10| Import on demand|
|
||||
|?| See `Todos`|
|
||||
@ -14,7 +14,7 @@
|
||||
<template>
|
||||
<div class="nav">
|
||||
<div class="ui-logo">
|
||||
NAIVE UI ({{ version }})
|
||||
Naive UI ({{ version }})
|
||||
</div>
|
||||
<div />
|
||||
<div class="theme-picker">
|
||||
|
||||
12
demo/init.js
12
demo/init.js
@ -9,6 +9,12 @@ import './styles/font.scss'
|
||||
import NaiveUI from '../index'
|
||||
import SourceBlock from './SourceBlock'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
||||
import intro from './documentation/intro/intro'
|
||||
import start from './documentation/intro/start'
|
||||
import devGuildlines from './documentation/intro/devGuidelines'
|
||||
import status from './documentation/intro/status'
|
||||
|
||||
import nimbusServiceLayoutDemo from './documentation/components/nimbusServiceLayoutDemo'
|
||||
import homeDemo from './documentation/components/homeDemo'
|
||||
import gradientTextDemo from './documentation/components/gradientTextDemo'
|
||||
@ -44,7 +50,6 @@ import stepsDemo from './documentation/components/stepsDemo'
|
||||
import notificationDemo from './documentation/components/notificationDemo'
|
||||
import nimbusConfirmCardDemo from './documentation/components/nimbusConfirmCardDemo'
|
||||
import paginationDemo from './documentation/components/paginationDemo'
|
||||
import startPage from './documentation/components/startPage'
|
||||
import collapseDemo from './documentation/components/collapseDemo'
|
||||
import tag from './documentation/components/tag'
|
||||
import timelineDemo from './documentation/components/timelineDemo'
|
||||
@ -121,7 +126,10 @@ const routes = [
|
||||
path: '/:lang/:theme/start',
|
||||
component: demo,
|
||||
children: withPrefix('/:lang/:theme', [
|
||||
{ path: '/start', component: startPage },
|
||||
{ path: '/intro', component: intro },
|
||||
{ path: '/start', component: start },
|
||||
{ path: '/dev-guildlines', component: devGuildlines },
|
||||
{ path: '/status', component: status },
|
||||
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
||||
{ path: '/n-nimbus-home-layout', component: homeDemo },
|
||||
{ path: '/n-gradient-text', component: gradientTextDemo },
|
||||
|
||||
41
demo/loaders/NaiveUIMdLoader.js
Normal file
41
demo/loaders/NaiveUIMdLoader.js
Normal file
@ -0,0 +1,41 @@
|
||||
const hljs = require('highlight.js')
|
||||
const marked = require('marked')
|
||||
// const prettier = require('prettier')
|
||||
|
||||
const escapeMap = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
}
|
||||
|
||||
function escapeForHTML (input) {
|
||||
return input.replace(/([&<>'"])/g, char => escapeMap[char])
|
||||
}
|
||||
|
||||
// Create your custom renderer.
|
||||
const renderer = new marked.Renderer()
|
||||
renderer.code = (code, language) => {
|
||||
// Check whether the given language is valid for highlight.js.
|
||||
const validLang = !!(language && hljs.getLanguage(language))
|
||||
|
||||
// Highlight only if the language is valid.
|
||||
// highlight.js escapes HTML in the code, but we need to escape by ourselves
|
||||
// when we don't use it.
|
||||
const highlighted = validLang
|
||||
? hljs.highlight(language, code).value
|
||||
: escapeForHTML(code)
|
||||
|
||||
// Render the highlighted code with `hljs` class.
|
||||
return `<pre v-pre><code class="${language}">${highlighted}</code></pre>`
|
||||
}
|
||||
|
||||
marked.setOptions({
|
||||
renderer
|
||||
})
|
||||
|
||||
module.exports = function (content) {
|
||||
// console.log(convertMd2Doc(content))
|
||||
return `<template><div class="markdown">${marked(content)}</div></template>`
|
||||
}
|
||||
@ -32,7 +32,7 @@
|
||||
position: relative;
|
||||
margin: 0 24px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
@include b(button) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@ -71,7 +71,7 @@ Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
|
||||
@ -88,7 +88,7 @@ hue-6-2: #c18401
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
|
||||
@ -4,35 +4,71 @@
|
||||
@include themes-mixin {
|
||||
@if $theme == 'dark' {
|
||||
.markdown {
|
||||
font-size: 16px;
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 32px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
code {
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 0;
|
||||
li {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 8px 0 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
a {
|
||||
color: $primary-6;
|
||||
font-size: 14px;
|
||||
}
|
||||
pre {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
& > code {
|
||||
border-radius: 6px;
|
||||
border: 1px solid $--n-divider-color;
|
||||
display: block;
|
||||
padding: 12px 16px 12px 16px;
|
||||
background-color: $--n-card-color;
|
||||
}
|
||||
}
|
||||
:not(pre) > code {
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
background-color: $--n-alpha-table-header-color;
|
||||
padding: .2em .4em;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
padding: 0em .4em .1em .4em;
|
||||
font-size: 14px;
|
||||
font-family: 'Lato';
|
||||
}
|
||||
table {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
border: 1px solid $--n-alpha-divider-color;
|
||||
border: 1px solid $--n-divider-color;
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
border-collapse: separate;
|
||||
@ -40,7 +76,7 @@
|
||||
overflow: hidden;
|
||||
// background-color: $--n-alpha-table-body-color;
|
||||
th {
|
||||
background-color: $--n-alpha-table-header-color;
|
||||
background-color: $--n-table-header-color;
|
||||
background-clip: padding-box;
|
||||
text-align: inherit;
|
||||
padding: 14px 12px;
|
||||
@ -49,14 +85,14 @@
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
border-left: none;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $--n-alpha-divider-color;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid $--n-divider-color;
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $--n-alpha-table-header-color;
|
||||
border-right: 1px solid $--n-table-header-color;
|
||||
}
|
||||
}
|
||||
td {
|
||||
background-color: $--n-alpha-table-body-color;
|
||||
background-color: $--n-table-body-color;
|
||||
background-clip: padding-box;
|
||||
padding: 12px;
|
||||
}
|
||||
@ -67,14 +103,27 @@
|
||||
}
|
||||
} @else {
|
||||
.n-app--light-theme .markdown {
|
||||
code {
|
||||
a {
|
||||
color: $primary-6;
|
||||
}
|
||||
pre {
|
||||
& > code {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(34,36,38,.15);
|
||||
}
|
||||
}
|
||||
:not(pre) > code {
|
||||
background-color: rgb(244, 244, 244);
|
||||
border: 1px solid rgb(230, 230, 230);
|
||||
}
|
||||
table {
|
||||
border: 1px solid rgba(34,36,38,.15);
|
||||
th {
|
||||
background: rgb(250, 250, 250);
|
||||
background: rgb(250, 250, 250);
|
||||
border-bottom: 1px solid $--n-divider-color;
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid rgb(250, 250, 250);
|
||||
}
|
||||
}
|
||||
td {
|
||||
background-color: white;
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
|
||||
const showdown = require('showdown')
|
||||
const converter = new showdown.Converter({
|
||||
tables: true
|
||||
})
|
||||
const text = fs.readFileSync(path.resolve(__dirname, '..', 'README.md')).toString()
|
||||
const html = converter.makeHtml(text)
|
||||
|
||||
const htmlPath = path.resolve(__dirname, '../demo/readme.js')
|
||||
fs.writeFileSync(htmlPath, 'export default `<div class="markdown-body">' + html + '</div>`\n')
|
||||
@ -1,15 +0,0 @@
|
||||
## Prequesite
|
||||
`Node.js`
|
||||
## Installation
|
||||
```
|
||||
npm install --save-dev naive-ui
|
||||
```
|
||||
## Use Naive-UI in your project
|
||||
Add following lines in your Vue app entry file
|
||||
```
|
||||
import naiveUi from 'naive-ui'
|
||||
import 'naive-ui/dist/lib/index.css
|
||||
|
||||
Vue.use(naiveUi)
|
||||
```
|
||||
Then enjoy yourself.
|
||||
@ -7,16 +7,16 @@
|
||||
"release": "npm run build && npm publish",
|
||||
"build": "cross-env NODE_ENV=development && gulp --gulpfile build/gulpfile.js build",
|
||||
"demo": "cross-env NODE_ENV=development && gulp --gulpfile build/gulpfile.js build && webpack-dev-server --config build/webpack.demo.js",
|
||||
"dev": "cross-env NODE_ENV=development && node doc/changeDemoVersion.js && node doc/injectReadme.js && webpack-dev-server --config build/webpack.dev.js",
|
||||
"dev": "cross-env NODE_ENV=development && node doc/changeDemoVersion.js && webpack-dev-server --config build/webpack.dev.js",
|
||||
"serve": "npm run dev",
|
||||
"lint": "eslint packages/**/*.{js,vue} test/**/*.{js,vue} build/**/*.{js,vue} demo/**/*.{js,vue} && stylelint \"styles/**/*.scss\"",
|
||||
"lint-style": "stylelint \"styles/**/*.scss\"",
|
||||
"test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js",
|
||||
"test-cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage",
|
||||
"test-release": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.release.js",
|
||||
"release-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && node doc/injectReadme.js && webpack --config build/webpack.doc.js && sudo bash doc/deploy-doc.sh",
|
||||
"build-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && node doc/injectReadme.js && webpack --config build/webpack.doc.js",
|
||||
"build-private-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && node doc/injectReadme.js && webpack --config build/webpack.private-doc.js"
|
||||
"release-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.doc.js && sudo bash doc/deploy-doc.sh",
|
||||
"build-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.doc.js",
|
||||
"build-private-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.private-doc.js"
|
||||
},
|
||||
"author": "lecong.zhang",
|
||||
"license": "ISC",
|
||||
@ -75,7 +75,6 @@
|
||||
"progress-bar-webpack-plugin": "^1.12.1",
|
||||
"regenerator-runtime": "^0.13.2",
|
||||
"schema-utils": "^1.0.0",
|
||||
"showdown": "^1.9.0",
|
||||
"sinon": "^7.3.2",
|
||||
"style-loader": "^0.23.1",
|
||||
"stylelint": "^10.1.0",
|
||||
|
||||
@ -109,7 +109,7 @@
|
||||
}
|
||||
}
|
||||
@include e(header) {
|
||||
background-color: $--table-header-background;
|
||||
background-color: $--table-header-background-color;
|
||||
i {
|
||||
color: $--table-header-icon-color;
|
||||
}
|
||||
|
||||
@ -175,7 +175,7 @@
|
||||
font-size: 12px;
|
||||
left: calc(100% - 9px);
|
||||
bottom: calc(100% - 9px);
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
@include e(ripple-mask) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
@include b(confirm-title-icon) {
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
&.n-divider--content-position-left {
|
||||
.n-divider__line {
|
||||
|
||||
@ -21,6 +21,7 @@ $layout-nav-height: 64px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid $service-layout-border-color;
|
||||
// box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.17);
|
||||
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
height: $layout-nav-height;
|
||||
}
|
||||
@include e(body) {
|
||||
@ -31,13 +32,12 @@ $layout-nav-height: 64px;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
background-color: $service-layout-body-background-color;
|
||||
transition: background-color .3s $default-cubic-bezier, left .3s $default-cubic-bezier;
|
||||
@include m(active) {
|
||||
left: 272px;
|
||||
transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
@include m(collapsed) {
|
||||
left: 48px;
|
||||
transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
@include m(disable-menu) {
|
||||
left: 0px;
|
||||
@ -55,17 +55,19 @@ $layout-nav-height: 64px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
// box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
|
||||
@include b(nimbus-service-layout-drawer-divider) {
|
||||
margin: 0px 25px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .08);
|
||||
}
|
||||
@include e(toggle-button) {
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transition: transform .3s $default-cubic-bezier;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
path {
|
||||
transition: fill .3s $default-cubic-bezier;
|
||||
fill: $service-layout-toggle-button-color;
|
||||
}
|
||||
position: absolute;
|
||||
@ -79,7 +81,7 @@ $layout-nav-height: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transition: opacity .3s $default-cubic-bezier;
|
||||
@include b(nimbus-service-layout-drawer-header) {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
@ -120,7 +122,7 @@ $layout-nav-height: 64px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transition: opacity 0.3s $default-cubic-bezier, color 0.3s $default-cubic-bezier;
|
||||
opacity: 1;
|
||||
}
|
||||
@include m(active) {
|
||||
@ -143,7 +145,7 @@ $layout-nav-height: 64px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transition: opacity 0.3s $default-cubic-bezier;
|
||||
opacity: 0;
|
||||
}
|
||||
@include m(active) {
|
||||
@ -152,9 +154,9 @@ $layout-nav-height: 64px;
|
||||
}
|
||||
}
|
||||
@include m(is-group-header) {
|
||||
span {
|
||||
transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
// span {
|
||||
// transition: color 0.3s $default-cubic-bezier;
|
||||
// }
|
||||
&::after { // down arrow
|
||||
content: '';
|
||||
height: 6px;
|
||||
@ -166,7 +168,7 @@ $layout-nav-height: 64px;
|
||||
top: calc(50% - 1px);
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 25% 25%;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transition: transform 0.3s $default-cubic-bezier, opacity 0.3s $default-cubic-bezier;
|
||||
}
|
||||
@include m(group-item-is-choosed) {
|
||||
span {
|
||||
@ -185,7 +187,7 @@ $layout-nav-height: 64px;
|
||||
}
|
||||
@include b(nimbus-service-layout-drawer-group-items) {
|
||||
overflow: hidden;
|
||||
transition: max-height .3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transition: max-height .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
|
||||
opacity: 1;
|
||||
@include m(collapsed) {
|
||||
max-height: 0;
|
||||
@ -196,7 +198,7 @@ $layout-nav-height: 64px;
|
||||
@include m(active) {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
@include e(toggle-button) {
|
||||
transform: translateX(50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
@ -207,7 +209,7 @@ $layout-nav-height: 64px;
|
||||
@include m(collapsed) {
|
||||
opacity: 1;
|
||||
transform: translateX(-224px);
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
pointer-events: none;
|
||||
@include e(toggle-button) {
|
||||
transform: translateX(50%) translateY(-50%) rotate(180deg);
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
.n-progress-text {
|
||||
// color: rgba(98, 187, 252, 1);
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
width: 60px;
|
||||
.n-progress-text__percentage {
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
.n-progress-text {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
// color: rgba(98, 187, 252, 1);
|
||||
.n-progress-text__percentage {
|
||||
color: inherit;
|
||||
@ -167,7 +167,7 @@
|
||||
color: rgba(23, 29, 51, 1);
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
height: 33px;
|
||||
@ -191,7 +191,7 @@
|
||||
position: absolute;
|
||||
color: rgba(23, 29, 51, 1);
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
color: rgba(255,255,255,0.3);
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
margin-left: 9px;
|
||||
.n-step-content__title-inner {
|
||||
white-space: nowrap;
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
|
||||
@include b(tab-label-wrapper) {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
@include b(tab-label-bar) {
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
background-color: $--table-body-background;
|
||||
background-color: $--table-body-background-color;
|
||||
color: $--table-body-color;
|
||||
tr {
|
||||
td {
|
||||
@ -52,13 +52,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
background-color: $--table-body-background;
|
||||
background-color: $--table-body-background-color;
|
||||
box-shadow: $--table-box-shadow;
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
thead {
|
||||
background-color: $--table-header-background;
|
||||
background-color: $--table-header-background-color;
|
||||
color: $--table-header-color;
|
||||
tr {
|
||||
th {
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
background-color: $--table-body-background;
|
||||
background-color: $--table-body-background-color;
|
||||
color: $--table-body-color;
|
||||
tr:hover {
|
||||
background-color: $--table-row-hover;
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@include m(disabled) {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
|
||||
@ -7,5 +7,5 @@
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: 700;
|
||||
src: url('./resources/fonts/LatoLatin-Bold.woff2');
|
||||
src: url('./resources/fonts/LatoLatin-Semibold.woff2');
|
||||
}
|
||||
BIN
styles/resources/fonts/Lato-Medium.woff2
Normal file
BIN
styles/resources/fonts/Lato-Medium.woff2
Normal file
Binary file not shown.
BIN
styles/resources/fonts/LatoLatin-Medium.woff2
Normal file
BIN
styles/resources/fonts/LatoLatin-Medium.woff2
Normal file
Binary file not shown.
BIN
styles/resources/fonts/LatoLatin-Semibold.woff2
Normal file
BIN
styles/resources/fonts/LatoLatin-Semibold.woff2
Normal file
Binary file not shown.
@ -1,9 +1,9 @@
|
||||
@mixin setup-dark-table {
|
||||
$--table-header-background: #2b3147 !global;
|
||||
$--table-body-background: #1f263e !global;
|
||||
$--table-header-background-color: #2b3147 !global;
|
||||
$--table-body-background-color: #1f263e !global;
|
||||
$--table-header-color: $--neutral-3 !global;
|
||||
$--table-body-color: $--neutral-4 !global;
|
||||
$--table-row-hover: $--table-header-background !global;
|
||||
$--table-row-hover: $--table-header-background-color !global;
|
||||
$--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global;
|
||||
$--table-border: none;
|
||||
//TODO:ui设计深色color
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@mixin setup-light-nimbus-service-layout {
|
||||
$service-layout-drawer-background-color: $neutral-10 !global;
|
||||
$service-layout-body-background-color: $neutral-8 !global;
|
||||
$service-layout-body-background-color: $neutral-9 !global;
|
||||
$service-layout-nav-background-color: $neutral-10 !global;
|
||||
$service-layout-color: $--n-text-color !global ;
|
||||
$service-layout-border-color: $--n-divider-color !global;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@mixin setup-light-table {
|
||||
$--table-header-background: #e8e8e8 !global;
|
||||
$--table-body-background: #fff !global;
|
||||
$--table-header-background-color: #e8e8e8 !global;
|
||||
$--table-body-background-color: #fff !global;
|
||||
$--table-header-color: #262626 !global;
|
||||
$--table-body-color: #595959 !global;
|
||||
$--table-row-hover: rgba(0,0,0,0.03) !global;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user