Semantic-Org/Semantic-UI-React

Tab: in vertical mode with renderActiveOnly styling broken for all content except first tab

Open

#3,412 创建于 2019年2月2日

在 GitHub 查看
 (6 评论) (0 反应) (0 负责人)JavaScript (13,136 star) (4,065 fork)batch import
bughelp wantedstale

描述

Bug Report

Steps

Create a tab in vertical mode with renderActive Only set to false

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', pane: 'Tab 1 Content' },
  { menuItem: 'Tab 2', pane: 'Tab 2 Content' },
  { menuItem: 'Tab 3', pane: 'Tab 3 Content' },
]

const TabExampleBasicAll = () => <Tab panes={panes} menu={{vertical: true, fluid: true}} renderActiveOnly={false} />

export default TabExampleBasicAll

Expected Result

Outer box for all content items should be the same.

Actual Result

When you navigate to any item other than the first, the top border is not shown

Version

0.84.0

Testcase

https://codesandbox.io/s/825yxr5zn0

Screenshots

贡献者指南

技术栈
javascriptreactcss
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
ReactCSSSemantic UI React basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
80
研究方向
The bug is in the Tab component's styling when `renderActiveOnly={false}` and vertical menu. Inspect the CSS classes applied to the active and inactive tab panes. The top border is missing on non first panes. Check the Tab component's rendering logic in `src/modules/Tab/Tab.js` and associated CSS files. The testcase at https://codesandbox.io/s/825yxr5zn0 can be used to reproduce. Look for CSS rules that conditionally apply border top based on active state.
Tab: in vertical mode with renderActiveOnly styling broken for all content except first tab · Semantic-Org/Semantic-UI-React#3412 | Good First Issue