mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
feat(thing): thing component is for describe a thing
This commit is contained in:
07akioni
parent
b002dc06cf
commit
69b9d7f049
58
demo/documentation/components/thing/enUS/basic.md
Normal file
58
demo/documentation/components/thing/enUS/basic.md
Normal file
@ -0,0 +1,58 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-thing>
|
||||
<template v-slot:avatar>
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
<md-cash />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<template v-slot:header>
|
||||
Money
|
||||
</template>
|
||||
<template v-slot:header-extra>
|
||||
<n-button circle size="tiny">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
<template v-slot:description>
|
||||
It is what I want.
|
||||
</template>
|
||||
Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts, such as taxes, in a particular country or socio-economic context.
|
||||
<template v-slot:footer>
|
||||
The King of Money
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
<n-button size="tiny" style="margin-right: 8px;">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
Add 1$
|
||||
</n-button>
|
||||
<n-button size="tiny" style="margin-right: 8px;">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
Add 10$
|
||||
</n-button>
|
||||
<n-button size="tiny">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
Add 100$
|
||||
</n-button>
|
||||
</template>
|
||||
</n-thing>
|
||||
```
|
||||
```js
|
||||
import mdCash from 'naive-ui/lib/icons/md-cash'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdCash
|
||||
}
|
||||
}
|
||||
```
|
||||
58
demo/documentation/components/thing/enUS/indent.md
Normal file
58
demo/documentation/components/thing/enUS/indent.md
Normal file
@ -0,0 +1,58 @@
|
||||
# Content Indent
|
||||
```html
|
||||
<n-thing content-indent>
|
||||
<template v-slot:avatar>
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
<md-cash />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<template v-slot:header>
|
||||
Money
|
||||
</template>
|
||||
<template v-slot:header-extra>
|
||||
<n-button circle size="tiny">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
<template v-slot:description>
|
||||
It is what I want.
|
||||
</template>
|
||||
Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts, such as taxes, in a particular country or socio-economic context.
|
||||
<template v-slot:footer>
|
||||
The King of Money
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
<n-button size="tiny" style="margin-right: 8px;">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
Add 1$
|
||||
</n-button>
|
||||
<n-button size="tiny" style="margin-right: 8px;">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
Add 10$
|
||||
</n-button>
|
||||
<n-button size="tiny">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
Add 100$
|
||||
</n-button>
|
||||
</template>
|
||||
</n-thing>
|
||||
```
|
||||
```js
|
||||
import mdCash from 'naive-ui/lib/icons/md-cash'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdCash
|
||||
}
|
||||
}
|
||||
```
|
||||
6
demo/documentation/components/thing/enUS/index.md
Normal file
6
demo/documentation/components/thing/enUS/index.md
Normal file
@ -0,0 +1,6 @@
|
||||
# Thing
|
||||
|
||||
```demo
|
||||
basic
|
||||
indent
|
||||
```
|
||||
0
demo/documentation/components/thing/index.entry
Normal file
0
demo/documentation/components/thing/index.entry
Normal file
0
demo/documentation/components/thing/zhCN/index.md
Normal file
0
demo/documentation/components/thing/zhCN/index.md
Normal file
8
packages/common/Thing/index.js
Normal file
8
packages/common/Thing/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Thing from './src/main.vue'
|
||||
|
||||
Thing.install = function (Vue) {
|
||||
Vue.component(Thing.name, Thing)
|
||||
}
|
||||
|
||||
export default Thing
|
||||
104
packages/common/Thing/src/main.vue
Normal file
104
packages/common/Thing/src/main.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-thing"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
:style="synthesizedStyle"
|
||||
>
|
||||
<div v-if="$slots.avatar && contentIndent" class="n-thing-avatar">
|
||||
<slot name="avatar" />
|
||||
</div>
|
||||
<div class="n-thing-main">
|
||||
<div v-if="!contentIndent" class="n-thing-avatar-header-wrapper">
|
||||
<div v-if="$slots.avatar && !contentIndent" class="n-thing-avatar">
|
||||
<slot name="avatar" />
|
||||
</div>
|
||||
<div class="n-thing-header-wrapper">
|
||||
<div class="n-thing-header">
|
||||
<div v-if="$slots.header || title" class="n-thing-header__title">
|
||||
<slot name="header">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="$slots['header-extra'] || titleExtra" class="n-thing-header__extra">
|
||||
<slot name="header-extra">
|
||||
{{ titleExtra }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.description || description" class="n-thing-main__description">
|
||||
<slot name="description">
|
||||
{{ description }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="n-thing-header">
|
||||
<div v-if="$slots.header || title" class="n-thing-header__title">
|
||||
<slot name="header">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="$slots['header-extra'] || titleExtra" class="n-thing-header__extra">
|
||||
<slot name="header-extra">
|
||||
{{ titleExtra }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.description || description" class="n-thing-main__description">
|
||||
<slot name="description">
|
||||
{{ description }}
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="$slots.default || content" class="n-thing-main__content">
|
||||
<slot>
|
||||
{{ content }}
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="n-thing-main__footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
<div v-if="$slots.action" class="n-thing-main__action">
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'NThing',
|
||||
mixins: [ withapp, themeable ],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
titleExtra: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
contentIndent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.$slots, this.titleExtra)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
53
styles/Thing.scss
Normal file
53
styles/Thing.scss
Normal file
@ -0,0 +1,53 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(thing) {
|
||||
display: flex;
|
||||
color: $--n-secondary-text-color;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
font-size: 14px;
|
||||
@include b(thing-avatar) {
|
||||
margin-right: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@include b(thing-avatar-header-wrapper) {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@include b(thing-header-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@include b(thing-main) {
|
||||
flex-grow: 1;
|
||||
@include b(thing-header) {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
@include e(title) {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: $--n-text-color;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
}
|
||||
@include e(extra) {
|
||||
|
||||
}
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@include e(description) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
@include e(content) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@include e(footer) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@include e(action) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user