mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tabs): css in js (#299)

Browse Source
This commit is contained in:
Wanli Song 2020-09-03 21:08:48 +08:00 committed by 07akioni
parent d74fe96949
commit 4dcc7d5b99
12 changed files with 438 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Tabs/index.js
View File

@ -1,10 +0,0 @@
import Tab from './src/Tabs.vue'
import NTabPane from './src/TabPane.vue'
Tab.install = function (Vue) {
Vue.component(Tab.name, Tab)
Vue.component(NTabPane.name, NTabPane)
Vue.component('NTabPanel', NTabPane)
}
export default Tab

2
src/_styles/index.scss
View File

@ -10,6 +10,6 @@
@import './Form.scss';
@import './Popover.scss';
@import './Table.scss';
@import './Tabs.scss';
// @import './Tabs.scss';
@import './Tooltip.scss';
@import './Upload.scss';

6
src/index.js
View File

@ -57,7 +57,7 @@ import Statistic from './statistic'
import Steps from './steps'
import Switch from './switch'
import Table from './Table'
import Tabs from './Tabs'
import Tabs from './tabs'
import Tag from './tag'
import Thing from './thing'
import Time from './time'
@ -186,6 +186,8 @@ import timePickerLightStyle from './time-picker/styles/light'
import timePickerDarkStyle from './time-picker/styles/dark'
import timelineLightStyle from './timeline/styles/light'
import timelineDarkStyle from './timeline/styles/dark'
import tabsLightStyle from './tabs/styles/light'
import tabsDarkStyle from './tabs/styles/dark'
// Can be remove after refactoring
import baseSelectionLightStyle from './_base/selection/styles/light'
@ -401,6 +403,8 @@ export default create({
timePickerDarkStyle,
timelineLightStyle,
timelineDarkStyle,
tabsLightStyle,
tabsDarkStyle,
// Can be remove after refactoring
baseSelectionLightStyle,
baseSelectionDarkStyle

10
src/tabs/index.js Normal file
View File

@ -0,0 +1,10 @@
import Tab from './src/Tabs.vue'
import TabPane from './src/TabPane.vue'
Tab.install = function (Vue, naive) {
Vue.component(naive.componentPrefix + Tab.name, Tab)
Vue.component(naive.componentPrefix + TabPane.name, TabPane)
Vue.component('NTabPanel', TabPane)
}
export default Tab

2
src/Tabs/src/TabPane.vue → src/tabs/src/TabPane.vue
View File

@ -2,7 +2,7 @@
import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
export default {
name: 'NTabPane',
name: 'TabPane',
inject: [ 'NTab' ],
props: {
label: {

10
src/Tabs/src/Tabs.vue → src/tabs/src/Tabs.vue
View File

@ -94,9 +94,11 @@ import iosArrowForward from '../../_icons/ios-arrow-forward'
import mdClose from '../../_icons/md-close'
import resizeObserverDelegate from '../../_utils/delegate/resizeObserverDelegate'
import throttle from 'lodash-es/throttle'
import usecssr from '../../_mixins/usecssr'
import styles from './styles'
export default {
name: 'NTabs',
name: 'Tabs',
provide () {
return {
NTab: this
@ -108,7 +110,11 @@ export default {
iosArrowForward,
mdClose
},
mixins: [ withapp, themeable ],
mixins: [
withapp,
themeable,
usecssr(styles)
],
model: {
prop: 'active-name',
event: 'active-name-change'

15
src/tabs/src/styles/index.js Normal file
View File

@ -0,0 +1,15 @@
import baseStyle from './themed-base.cssr.js'
import sizeStyle from './themed-size.cssr.js'
export default [
{
key: 'syntheticTheme',
watch: ['syntheticTheme'],
CNode: baseStyle
},
{
key: 'labelSize',
watch: ['labelSize'],
CNode: sizeStyle
}
]

284
src/tabs/src/styles/themed-base.cssr.js Normal file
View File

@ -0,0 +1,284 @@
import { c, cM, cTB, cB, cE } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
tabTextColorDefault,
tabTextColorActive,
tabTextColorHover,
tabTextColorDisabled,
tabBarBackgroundColor,
tabScrollButtonColorDefault,
tabScrollButtonColorDisabled,
tabCloseButtonColorDeault,
cardTabBackgroundColor,
cardTabBorderColor,
cardTabTextColorDefault,
cardTabTextColorActive,
navBorderColor,
panelTextColor,
strongFontWeight,
borderRadius
} = props.$local
const {
easeInOutCubicBezier
} = props.$base
return cTB('tabs', {
raw: `
width: 100%;
transition: background-color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
`
}, [
cM('flex', [
cB('tabs-nav', [
cB('tabs-nav-scroll', {
raw: `
width: 100%
`
}, [
cB('tabs-label-wrapper', {
raw: `
width: 100%;
`
}, [
cB('tabs-label', {
raw: `
margin-right: 0;
`
})
])
])
])
]),
cB('tabs-nav', {
raw: `
line-height: 1.75;
display: flex;
background-clip: padding-box;
transition: border-color .3s ${easeInOutCubicBezier};
`
}, [
cB('tabs-nav-scroll', {
raw: `
overflow: hidden;
`
}),
cB('tabs-nav-scroll-button', {
raw: `
font-size: 20px;
height: 20px;
line-height: 20px;
align-self: center;
cursor: pointer;
transition: color .3s ${easeInOutCubicBezier};
`
}, [
cM('left', {
raw: `
margin-right: 8px;
`
}),
cM('right', {
raw: `
margin-left: 8px;
`
}),
cB('icon', {
fill: tabScrollButtonColorDefault
}),
cM('disabled', {
raw: `
cursor: not-allowed;
`
}, [
cB('icon', {
fill: tabScrollButtonColorDisabled
})
])
])
]),
cB('tabs-label-wrapper', {
raw: `
display: inline-block;
font-weight:${strongFontWeight};
white-space: nowrap;
position: relative;
`
}, [
cB('tabs-label-bar', {
raw: `
position: absolute;
bottom: 2px;
height: 2px;
border-radius: 1px;
transition: left .2s ${easeInOutCubicBezier}, max-width .2s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier};
`,
backgroundColor: tabBarBackgroundColor
}, [
cM('transition-disabled', {
raw: `
transition: none;
`
})
]),
cB('tabs-label', {
raw: `
cursor: pointer;
white-space: nowrap;
flex-wrap: nowrap;
display: inline-flex;
align-items: center;
transition: background-color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
`
}, [
cM('disabled', {
raw: `
cursor: not-allowed
`
}),
cE('close', {
raw: `
margin-left: 8px;
font-size: 16px;
line-height: 16px;
height: 16px;
cursor: pointer;
transition: color .3s ${easeInOutCubicBezier};
`
}, [
cB('icon', {
fill: tabCloseButtonColorDeault
})
]),
cE('label', {
raw: `
transition: color .3s ${easeInOutCubicBezier};
`,
color: tabTextColorDefault
})
])
]),
cB('tab-panel', {
raw: `
width: 100%;
margin-top: 8px;
transition: color .3s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier};
`,
color: panelTextColor
}),
cM('line-type', [
cB('tabs-nav', [
cB('tabs-nav-scroll-button', {
raw: `
padding-bottom: 4px;
`
})
]),
cB('tabs-label', {
raw: `
box-sizing: border-box;
padding-bottom: 2px;
vertical-align: bottom;
`
}, [
cE('label', {
raw: `
font-size: 14px;
`
}),
c('&:not(:last-child)', {
raw: `
margin-right: 36px;
`
}),
c('&:hover', [
cE('label', {
color: tabTextColorHover
})
]),
cM('active', [
cE('label', {
color: tabTextColorActive
})
]),
cM('disabled', [
cE('label', {
color: tabTextColorDisabled
})
])
])
]),
cM('card-type', [
cB('tabs-nav', {
raw: `
box-sizing: border-box;
padding-top: 4px;
padding-bottom: 4px;
`,
borderTop: `1px solid ${navBorderColor}`,
borderBottom: `1px solid ${navBorderColor}`
}, [
cB('tabs-nav-scroll-button', [
cM('left', {
raw: `
margin-left: 2px;
margin-right: 2px;
`
}),
cM('right', {
raw: `
margin-left: 2px;
margin-right: 2px;
`
})
]),
cB('tabs-label-bar', {
raw: `
bottom: 0;
border-radius: 0;
`
})
]),
cB('tabs-label', {
raw: `
margin-right: 4px;
box-sizing: border-box;
height: 34px;
line-height: 34px;
padding: 0 16px;
position: relative;
vertical-align: bottom;
border-radius: ${borderRadius};
border: 1px solid transparent;
`
}, [
cE('label', {
raw: `
font-size: 14px;
`,
color: cardTabTextColorDefault
}),
c('&:hover', {
backgroundColor: cardTabBackgroundColor
}),
cM('active', {
backgroundColor: cardTabBackgroundColor,
border: `1px solid ${cardTabBorderColor}`
}, [
cE('label', {
raw: `
font-size: 14px;
`,
color: cardTabTextColorActive
})
]),
cM('disabled', [
cE('label', {
color: tabTextColorDisabled
})
])
])
])
])
}
])

19
src/tabs/src/styles/themed-size.cssr.js Normal file
View File

@ -0,0 +1,19 @@
import { c, cM, cB, cE } from '../../../_utils/cssr'
export default c([
({ props }) => {
const { labelSize } = props.$instance
const fontSize = props.$local.fontSize[labelSize]
return cB('tabs', [
cM(`${labelSize}-size`, [
cM('line-type', [
cB('tabs-label', [
cE('label', {
fontSize: fontSize
})
])
])
])
])
}
])

8
src/tabs/styles/_common.js Normal file
View File

@ -0,0 +1,8 @@
export default {
fontSize: {
small: '13px',
medium: '14px',
large: '16px',
huge: '18px'
}
}

43
src/tabs/styles/dark.js Normal file
View File

@ -0,0 +1,43 @@
import create from '../../styles/_utils/create-component-base'
import sizeVariables from './_common'
export default create({
name: 'Tabs',
theme: 'dark',
getDerivedVariables ({ base, derived }) {
const {
secondaryTextOverlayColor,
primaryColor,
disabledTextOverlayColor,
iconOverlayColor,
disabledIconOverlayColor,
closeOverlayColor,
tabBackgroundOverlayColor,
primaryTextOverlayColor,
dividerOverlayColor
} = derived
const {
strongFontWeight,
borderRadius
} = base
return {
...sizeVariables,
tabTextColorDefault: secondaryTextOverlayColor,
tabTextColorActive: primaryColor,
tabTextColorHover: primaryColor,
tabTextColorDisabled: disabledTextOverlayColor,
tabBarBackgroundColor: primaryColor,
tabScrollButtonColorDefault: iconOverlayColor,
tabScrollButtonColorDisabled: disabledIconOverlayColor,
tabCloseButtonColorDeault: closeOverlayColor,
cardTabBackgroundColor: tabBackgroundOverlayColor,
cardTabBorderColor: 'transparent',
cardTabTextColorDefault: secondaryTextOverlayColor,
cardTabTextColorActive: primaryTextOverlayColor,
navBorderColor: dividerOverlayColor,
panelTextColor: secondaryTextOverlayColor,
strongFontWeight: strongFontWeight,
borderRadius: borderRadius
}
}
})

44
src/tabs/styles/light.js Normal file
View File

@ -0,0 +1,44 @@
import create from '../../styles/_utils/create-component-base'
import sizeVariables from './_common'
export default create({
name: 'Tabs',
theme: 'light',
getDerivedVariables ({ base, derived }) {
const {
secondaryTextColor,
primaryColor,
disabledTextColor,
iconOverlayColor,
disabledIconOverlayColor,
closeColor,
tabBackgroundOverlayColor,
borderColor,
primaryTextColor,
dividerOverlayColor
} = derived
const {
strongFontWeight,
borderRadius
} = base
return {
...sizeVariables,
tabTextColorDefault: secondaryTextColor,
tabTextColorActive: primaryColor,
tabTextColorHover: primaryColor,
tabTextColorDisabled: disabledTextColor,
tabBarBackgroundColor: primaryColor,
tabScrollButtonColorDefault: iconOverlayColor,
tabScrollButtonColorDisabled: disabledIconOverlayColor,
tabCloseButtonColorDeault: closeColor,
cardTabBackgroundColor: tabBackgroundOverlayColor,
cardTabBorderColor: borderColor,
cardTabTextColorDefault: secondaryTextColor,
cardTabTextColorActive: primaryTextColor,
navBorderColor: dividerOverlayColor,
panelTextColor: secondaryTextColor,
strongFontWeight: strongFontWeight,
borderRadius: borderRadius
}
}
})