mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
fix(tabs): style glitches when different types tabs are nested, closes #850
This commit is contained in:
07akioni
parent
00399f89ea
commit
74df68485f
@ -2,15 +2,16 @@
|
||||
|
||||
## Pending
|
||||
|
||||
### Fixes
|
||||
|
||||
- Fix `n-notification`'s exported `NotificationReactive` type is not writable, closes [#876](https://github.com/TuSimple/naive-ui/issues/876).
|
||||
|
||||
### Feats
|
||||
|
||||
- `n-input-number` add `clearable` prop.
|
||||
- `n-form` add `show-label` prop, closes [#858](https://github.com/TuSimple/naive-ui/issues/858).
|
||||
|
||||
### Fixes
|
||||
|
||||
- Fix `n-notification`'s exported `NotificationReactive` type is not writable, closes [#876](https://github.com/TuSimple/naive-ui/issues/876).
|
||||
- Fix `n-tabs` style glitches when different types tabs are nested, closes [#850](https://github.com/TuSimple/naive-ui/issues/850).
|
||||
|
||||
## 2.16.4 (2021-08-16)
|
||||
|
||||
### Fixes
|
||||
|
||||
@ -2,15 +2,16 @@
|
||||
|
||||
## Pending
|
||||
|
||||
### Fixes
|
||||
|
||||
- 修复 `n-notification` 导出的 `NotificationReactive` 类型不可变，关闭 [#876](https://github.com/TuSimple/naive-ui/issues/876)
|
||||
|
||||
### Feats
|
||||
|
||||
- `n-input-number` 新增 `clearable` 属性
|
||||
- `n-form` 新增 `show-label` 属性，关闭 [#858](https://github.com/TuSimple/naive-ui/issues/858)
|
||||
|
||||
### Fixes
|
||||
|
||||
- 修复 `n-notification` 导出的 `NotificationReactive` 类型不可变，关闭 [#876](https://github.com/TuSimple/naive-ui/issues/876)
|
||||
- 修复 `n-tabs` 不同类型嵌套样式错乱，关闭 [#850](https://github.com/TuSimple/naive-ui/issues/850)
|
||||
|
||||
## 2.16.4 (2021-08-16)
|
||||
|
||||
### Fixes
|
||||
|
||||
@ -13,6 +13,7 @@ prefix
|
||||
display-directive
|
||||
addable
|
||||
line-debug
|
||||
style-inherit-debug
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
34
src/tabs/demos/zhCN/style-inherit-debug.demo.md
Normal file
34
src/tabs/demos/zhCN/style-inherit-debug.demo.md
Normal file
@ -0,0 +1,34 @@
|
||||
# Style Inherit Debug
|
||||
|
||||
```html
|
||||
<div id="app">
|
||||
<h2>one tab</h2>
|
||||
<NTabs type="line">
|
||||
<NTabPane name="One">1111</NTabPane>
|
||||
<NTabPane name="Two">1111</NTabPane>
|
||||
</NTabs>
|
||||
|
||||
<h2>one tabs Parent/Child</h2>
|
||||
<NTabs type="card">
|
||||
<NTabPane name="POne">
|
||||
<NTabs type="line">
|
||||
<NTabPane name="COne">1111</NTabPane>
|
||||
<NTabPane name="CTwo">1111</NTabPane>
|
||||
</NTabs>
|
||||
</NTabPane>
|
||||
<NTabPane name="PTwo">1111</NTabPane>
|
||||
</NTabs>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
import { NTabs, NTabPane } from 'naive-ui'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
NTabs,
|
||||
NTabPane
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -397,7 +397,16 @@ export default defineComponent({
|
||||
]}
|
||||
style={this.cssVars as CSSProperties}
|
||||
>
|
||||
<div class={`${mergedClsPrefix}-tabs-nav`}>
|
||||
<div
|
||||
class={[
|
||||
// the class should be applied here since it's possible
|
||||
// to make tabs nested in tabs, style may influence each
|
||||
// other. adding a class will make it easy to write the
|
||||
// style.
|
||||
`${mergedClsPrefix}-tabs-nav--${type}-type`,
|
||||
`${mergedClsPrefix}-tabs-nav`
|
||||
]}
|
||||
>
|
||||
{prefix ? (
|
||||
<div class={`${mergedClsPrefix}-tabs-nav__prefix`}>{prefix}</div>
|
||||
) : null}
|
||||
|
||||
@ -179,72 +179,70 @@ export default cB('tabs', `
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('line-type', [
|
||||
cB('tabs-nav', [
|
||||
cB('tabs-nav', [
|
||||
cM('line-type', [
|
||||
cE('prefix, suffix', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`)
|
||||
]),
|
||||
cB('tabs-nav-scroll-content', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-bar', `
|
||||
border-radius: 0;
|
||||
bottom: -1px;
|
||||
`)
|
||||
]),
|
||||
cM('card-type', [
|
||||
cB('tabs-nav', [
|
||||
cE('prefix, suffix', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`)
|
||||
]),
|
||||
cB('tabs-pad', `
|
||||
flex-grow: 1;
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-tab-pad', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-tab', `
|
||||
font-weight: var(--tab-font-weight);
|
||||
border: 1px solid var(--tab-border-color);
|
||||
border-top-left-radius: var(--tab-border-radius);
|
||||
border-top-right-radius: var(--tab-border-radius);
|
||||
background-color: var(--tab-color);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--tab-font-size);
|
||||
color: var(--tab-text-color);
|
||||
`, [
|
||||
cM('addable', `
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 16px;
|
||||
`, [
|
||||
cNotM('disabled', [
|
||||
c('&:hover', `
|
||||
color: var(--tab-text-color-active);
|
||||
`)
|
||||
])
|
||||
]),
|
||||
cM('closable', 'padding-right: 6px;'),
|
||||
cM('active', `
|
||||
border-bottom: 1px solid #0000;
|
||||
background-color: #0000;
|
||||
font-weight: var(--tab-font-weight-active);
|
||||
color: var(--tab-text-color-active);
|
||||
`),
|
||||
cM('disabled', 'color: var(--tab-text-color-disabled);')
|
||||
cB('tabs-nav-scroll-content', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-bar', `
|
||||
border-radius: 0;
|
||||
bottom: -1px;
|
||||
`)
|
||||
]),
|
||||
cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--tab-border-color);')
|
||||
cM('card-type', [
|
||||
cE('prefix, suffix', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-pad', `
|
||||
flex-grow: 1;
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-tab-pad', `
|
||||
transition: border-color .3s var(--bezier);
|
||||
border-bottom: 1px solid var(--tab-border-color);
|
||||
`),
|
||||
cB('tabs-tab', `
|
||||
font-weight: var(--tab-font-weight);
|
||||
border: 1px solid var(--tab-border-color);
|
||||
border-top-left-radius: var(--tab-border-radius);
|
||||
border-top-right-radius: var(--tab-border-radius);
|
||||
background-color: var(--tab-color);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--tab-font-size);
|
||||
color: var(--tab-text-color);
|
||||
`, [
|
||||
cM('addable', `
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 16px;
|
||||
`, [
|
||||
cNotM('disabled', [
|
||||
c('&:hover', `
|
||||
color: var(--tab-text-color-active);
|
||||
`)
|
||||
])
|
||||
]),
|
||||
cM('closable', 'padding-right: 6px;'),
|
||||
cM('active', `
|
||||
border-bottom: 1px solid #0000;
|
||||
background-color: #0000;
|
||||
font-weight: var(--tab-font-weight-active);
|
||||
color: var(--tab-text-color-active);
|
||||
`),
|
||||
cM('disabled', 'color: var(--tab-text-color-disabled);')
|
||||
]),
|
||||
cB('tabs-scroll-padding', 'border-bottom: 1px solid var(--tab-border-color);')
|
||||
])
|
||||
])
|
||||
])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user