mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-03 04:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(typography)

Browse Source
This commit is contained in:
07akioni 2019-12-21 21:31:48 +08:00
parent d478ae05f5
commit a7533dfbf2
25 changed files with 235 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
demo/documentation/components/typography/enUS/header.md Normal file
View File

@ -0,0 +1,31 @@
# Header
```html
<div style="padding-left: 24px; position: relative;">
<div style="
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 24px;
background-color: rgba(128, 128, 128, .5);
"></div>
<n-h1>sin(x)</n-h1>
<n-h1 prefix="bar">sin(x)</n-h1>
<n-h1 prefix="bar" align-text>sin(x)</n-h1>
<n-h2>cos(x)</n-h2>
<n-h2 prefix="bar">cos(x)</n-h2>
<n-h2 prefix="bar" align-text>cos(x)</n-h2>
<n-h3>-sin(x)</n-h3>
<n-h3 prefix="bar">-sin(x)</n-h3>
<n-h3 prefix="bar" align-text>-sin(x)</n-h3>
<n-h4>-cos(x)</n-h4>
<n-h4 prefix="bar">-cos(x)</n-h4>
<n-h4 prefix="bar" align-text>-cos(x)</n-h4>
<n-h5>sin(x)</n-h5>
<n-h5 prefix="bar">sin(x)</n-h5>
<n-h5 prefix="bar" align-text>sin(x)</n-h5>
<n-h6>What a loop!</n-h6>
<n-h6 prefix="bar">What a loop!</n-h6>
<n-h6 prefix="bar" align-text>What a loop!</n-h6>
</div>
```

3
demo/documentation/components/typography/enUS/index.md
View File

@ -4,6 +4,7 @@ Naive UI provides some basic styling for common HTML tags. It also provides some
## Demos
```demo
tags
header
text
tags
```

16
demo/documentation/components/typography/enUS/tags.md
View File

@ -2,7 +2,7 @@
```html
<n-a>a tag</n-a>
<n-h1>h1 tag</n-h1>
<n-p><n-text code>Hear the Wind Sing (風の歌を聴け Kaze no uta o kike)</n-text> is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987.</n-p>
<n-p>Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987.</n-p>
<n-h2>h2 tag</n-h2>
<n-p>Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987.</n-p>
<n-h3>h3 tag</n-h3>
@ -24,7 +24,21 @@
<n-li>li tag</n-li>
<n-li>li tag</n-li>
</n-ol>
<n-ul align-text>
<n-li>li tag</n-li>
<n-li>li tag</n-li>
<n-li>li tag</n-li>
</n-ul>
<n-hr />
<n-ol align-text>
<n-li>li tag</n-li>
<n-li>li tag</n-li>
<n-li>li tag</n-li>
</n-ol>
<n-blockquote>
Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987.
</n-blockquote>
<n-blockquote align-text>
Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987.
</n-blockquote>
```

10
demo/documentation/components/typography/enUS/text.md
View File

@ -1,4 +1,5 @@
# Text
Use different type of text to display different kind of info.
```html
<n-text type="info">Info</n-text>
<n-text type="success">Success</n-text>
@ -7,4 +8,13 @@
<n-text strong>Strong</n-text>
<n-text italic>Italic</n-text>
<n-text underline>Underline</n-text>
<n-text delete>Delete</n-text>
<n-text code>Code</n-text>
<n-text code delete>Code</n-text>
```
```css
.n-text {
display: inline-block;
margin: 0 8px 12px 0;
}
```

4
demo/styles/ComponentDemo.scss
View File

@ -14,7 +14,7 @@
transition: border-color .3s $default-cubic-bezier;
border-top: 1px solid $--n-divider-color;
code {
font-family: 'FiraCode';
font-family: $--n-mono-font-family;
font-size: 14px;
}
}
@ -62,7 +62,7 @@
}
}
code, pre {
font-family: 'FiraCode';
font-family: $--n-mono-font-family;
font-size: 14px;
}
}

13
packages/common/Typography/index.js
View File

@ -1,9 +1,4 @@
import H1 from './src/h1'
import H2 from './src/h2'
import H3 from './src/h3'
import H4 from './src/h4'
import H5 from './src/h5'
import H6 from './src/h6'
import header from './src/header'
import A from './src/A'
import P from './src/P'
import Blockquote from './src/blockquote'
@ -15,6 +10,12 @@ import Text from './src/text'
const Typography = {
install (Vue) {
const H1 = header(1)
const H2 = header(2)
const H3 = header(3)
const H4 = header(4)
const H5 = header(5)
const H6 = header(6)
Vue.component(H1.name, H1)
Vue.component(H2.name, H2)
Vue.component(H3.name, H3)

2
packages/common/Typography/src/a.vue
View File

@ -6,7 +6,7 @@ export default {
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('a', {

11
packages/common/Typography/src/blockquote.vue
View File

@ -4,15 +4,22 @@ import getTheme from './getTheme'
export default {
name: 'NBlockquote',
functional: true,
props: {
alignText: {
type: Boolean,
default: false
}
},
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('blockquote', {
staticClass: 'n-blockquote',
class: {
[`n-${theme}-theme`]: theme
[`n-${theme}-theme`]: theme,
'n-blockquote--align-text': context.props.alignText
},
attrs,
on

22
packages/common/Typography/src/h1.vue
View File

@ -1,22 +0,0 @@
<script>
import getTheme from './getTheme'
export default {
name: 'NH1',
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('h1', {
staticClass: 'n-h1',
class: {
[`n-${theme}-theme`]: theme
},
attrs,
on
}, defaultSlot)
}
}
</script>

22
packages/common/Typography/src/h2.vue
View File

@ -1,22 +0,0 @@
<script>
import getTheme from './getTheme'
export default {
name: 'NH2',
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('h2', {
staticClass: 'n-h2',
class: {
[`n-${theme}-theme`]: theme
},
attrs,
on
}, defaultSlot)
}
}
</script>

22
packages/common/Typography/src/h3.vue
View File

@ -1,22 +0,0 @@
<script>
import getTheme from './getTheme'
export default {
name: 'NH3',
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('h3', {
staticClass: 'n-h3',
class: {
[`n-${theme}-theme`]: theme
},
attrs,
on
}, defaultSlot)
}
}
</script>

22
packages/common/Typography/src/h4.vue
View File

@ -1,22 +0,0 @@
<script>
import getTheme from './getTheme'
export default {
name: 'NH4',
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('h4', {
staticClass: 'n-h4',
class: {
[`n-${theme}-theme`]: theme
},
attrs,
on
}, defaultSlot)
}
}
</script>

22
packages/common/Typography/src/h5.vue
View File

@ -1,22 +0,0 @@
<script>
import getTheme from './getTheme'
export default {
name: 'NH5',
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('h5', {
staticClass: 'n-h5',
class: {
[`n-${theme}-theme`]: theme
},
attrs,
on
}, defaultSlot)
}
}
</script>

22
packages/common/Typography/src/h6.vue
View File

@ -1,22 +0,0 @@
<script>
import getTheme from './getTheme'
export default {
name: 'NH6',
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('h6', {
staticClass: 'n-h6',
class: {
[`n-${theme}-theme`]: theme
},
attrs,
on
}, defaultSlot)
}
}
</script>

37
packages/common/Typography/src/header.js Normal file
View File

@ -0,0 +1,37 @@
import getTheme from './getTheme'
export default level =>({
name: 'NH' + level,
functional: true,
props: {
type: {
type: String,
default: null
},
prefix: {
type: String,
default: null
},
alignText: {
type: Boolean,
default: false
}
},
render (h, context) {
const props = context.props
const on = context.listeners
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h(`h${level}`, {
staticClass: `n-h${level}`,
class: {
[`n-${theme}-theme`]: theme,
[`n-h${level}--${props.type}-type`]: props.type,
[`n-h${level}--prefix-bar`]: props.prefix,
[`n-h${level}--align-text`]: props.alignText
},
attrs: context.data.attrs,
on
}, defaultSlot)
}
})

2
packages/common/Typography/src/hr.vue
View File

@ -6,7 +6,7 @@ export default {
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('hr', {

2
packages/common/Typography/src/li.vue
View File

@ -6,7 +6,7 @@ export default {
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('li', {

11
packages/common/Typography/src/ol.vue
View File

@ -4,15 +4,22 @@ import getTheme from './getTheme'
export default {
name: 'NOl',
functional: true,
props: {
alignText: {
type: Boolean,
default: false
}
},
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('ol', {
staticClass: 'n-ol',
class: {
[`n-${theme}-theme`]: theme
[`n-${theme}-theme`]: theme,
[`n-ol--align-text`]: context.props.alignText
},
attrs,
on

2
packages/common/Typography/src/p.vue
View File

@ -6,7 +6,7 @@ export default {
functional: true,
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('p', {

6
packages/common/Typography/src/text.vue
View File

@ -25,7 +25,7 @@ export default {
const attrs = props
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h(isCode ? 'code' : 'span', {
return h(isCode ? 'code' : isDelete ? 'del' : 'span', {
staticClass: 'n-text',
class: {
[`n-${theme}-theme`]: theme,
@ -39,7 +39,9 @@ export default {
},
attrs,
on
}, defaultSlot)
}, isDelete & isCode ? [
h('del', {}, defaultSlot)
] : defaultSlot)
}
}
</script>

11
packages/common/Typography/src/ul.vue
View File

@ -4,15 +4,22 @@ import getTheme from './getTheme'
export default {
name: 'NUl',
functional: true,
props: {
alignText: {
type: Boolean,
default: false
}
},
render (h, context) {
const on = context.listeners
const attrs = context.props
const attrs = context.data.attrs
const theme = getTheme(context.parent)
const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
return h('ul', {
staticClass: 'n-ul',
class: {
[`n-${theme}-theme`]: theme
[`n-${theme}-theme`]: theme,
[`n-ul--align-text`]: context.props.alignText
},
attrs,
on

2
styles/Code.scss
View File

@ -11,7 +11,7 @@
@include b(code) {
margin: 0;
font-size: 14px;
font-family: 'FiraCode', monospace;
font-family: $--n-mono-font-family, monospace;
[class^=hljs] {
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
}

2
styles/Log.scss
View File

@ -3,7 +3,7 @@
@include themes-mixin {
@include b(log) {
position: relative;
font-family: 'FiraCode', monospace;
font-family: $--n-mono-font-family, monospace;
font-size: 14px;
color: $--n-secondary-text-color;
box-sizing: border-box;

172
styles/Typography.scss
View File

@ -1,81 +1,84 @@
@import './mixins/mixins.scss';
$--header-font-size: (
'1': 32px,
'2': 26px,
'3': 18px,
'4': 16px,
'5': 14px,
'6': 14px
);
$--header-margin: (
'1': 24px 0 12px 0,
'2': 24px 0 12px 0,
'3': 18px 0 12px 0,
'4': 18px 0 12px 0,
'5': 18px 0 12px 0,
'6': 18px 0 12px 0
);
$--header-prefix-width: (
'1': 16px,
'2': 16px,
'3': 12px,
'4': 12px,
'5': 12px,
'6': 12px
);
$--header-bar-width: (
'1': 4px,
'2': 4px,
'3': 3px,
'4': 3px,
'5': 3px,
'6': 3px
);
@mixin header-mixin($level) {
@include b('h' + $level) {
font-size: map-get($--header-font-size, $level);
font-weight: 700;
color: $--n-text-color;
&:first-child {
margin-top: 0
}
&:last-child {
margin-bottom: 0;
}
margin: map-get($--header-margin, $level);
transition: color .3s $default-cubic-bezier;
@include m(prefix-bar) {
position: relative;
padding-left: map-get($--header-prefix-width, $level);
&::before {
content: '';
width: map-get($--header-bar-width, $level);
border-radius: map-get($--header-bar-width, $level) / 2;
background-color: $--n-primary-color;
left: 0;
top: 0;
bottom: 0;
position: absolute;
}
@include m(align-text) {
padding-left: 0;
&::before {
left: -(map-get($--header-prefix-width, $level));
}
}
}
}
}
@include themes-mixin {
@include b(h1) {
font-size: 32px;
font-weight: 700;
color: $--n-text-color;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
transition: color .3s $default-cubic-bezier;
margin: 24px 0 12px 0;
}
@include b(h2) {
font-size: 24px;
font-weight: 700;
color: $--n-text-color;
transition: color .3s $default-cubic-bezier;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
margin: 24px 0 12px 0;
}
@include b(h3) {
font-size: 18px;
font-weight: 700;
color: $--n-text-color;
transition: color .3s $default-cubic-bezier;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
margin: 18px 0 12px 0;
}
@include b(h4) {
font-size: 16px;
font-weight: 700;
color: $--n-text-color;
transition: color .3s $default-cubic-bezier;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
margin: 18px 0 12px 0;
}
@include b(h5) {
font-size: 14px;
font-weight: 700;
color: $--n-text-color;
transition: color .3s $default-cubic-bezier;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
margin: 18px 0 12px 0;
}
@include b(h6) {
font-size: 14px;
font-weight: 700;
color: $--n-text-color;
transition: color .3s $default-cubic-bezier;
&:first-child {
margin-top: 0;
}
margin: 18px 0 12px 0;
}
@include header-mixin('1');
@include header-mixin('2');
@include header-mixin('3');
@include header-mixin('4');
@include header-mixin('5');
@include header-mixin('6');
@include b(p) {
&:first-child {
margin-top: 0;
@ -98,6 +101,9 @@
margin-bottom: 0;
}
padding-left: 1.625em;
@include m(align-text) {
padding-left: 0;
}
}
@include b(ol) {
margin: 12px 0;
@ -108,6 +114,9 @@
margin-bottom: 0;
}
padding-left: 1.625em;
@include m(align-text) {
padding-left: 0;
}
}
@include b(li) {
transition: color .3s $default-cubic-bezier;
@ -127,15 +136,15 @@
transition: color .3s $default-cubic-bezier;
color: $--n-secondary-text-color;
@include m(code) {
font-family: $--n-mono-font-family;
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
white-space: nowrap;
box-sizing: border-box;
background-clip: padding-box;
color: $--n-secondary-text-color;
padding: 0em .4em .1em .4em;
padding: .15em .45em .15em .45em;
border-radius: 3px;
font-size: 14px;
font-family: $--n-font-family;
font-size: 13px;
background-color: $--n-alpha-input-color;
border: 1px solid $--n-alpha-border-color;
}
@ -180,9 +189,12 @@
margin: 0;
margin-top: 12px;
margin-bottom: 12px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
border-left: 4px solid $--n-divider-color;
padding-left: 12px;
color: $--n-meta-text-color;
color: $--n-secondary-text-color;
@include m(align-text) {
margin-left: -16px;
}
}
}

2
styles/themes/commonVars.scss
View File

@ -1,5 +1,7 @@
$--n-font-family: 'Lato';
$--n-mono-font-family: 'FiraCode', monospace;
$--n-height: (
"small": 28px,
"medium": 34px,