Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
amundsen_dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Surendar Reddy Mangannagari
amundsen_dev
Commits
3bbb6c9e
Unverified
Commit
3bbb6c9e
authored
Feb 28, 2019
by
Daniel
Committed by
GitHub
Feb 28, 2019
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added a styled tab component (#29)
- Leverages existing bootstrap-react tab components
parent
8def1174
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
84 additions
and
0 deletions
+84
-0
index.tsx
...en_application/static/js/components/common/Tabs/index.tsx
+40
-0
styles.scss
..._application/static/js/components/common/Tabs/styles.scss
+44
-0
No files found.
amundsen_application/static/js/components/common/Tabs/index.tsx
0 → 100644
View file @
3bbb6c9e
import
*
as
React
from
'react'
;
import
{
Tab
,
Tabs
}
from
'react-bootstrap'
;
import
'./styles.scss'
;
export
interface
TabsProps
{
tabs
:
TabInfo
[];
defaultTab
?:
string
;
onSelect
?:
(
key
:
string
)
=>
void
;
}
interface
TabInfo
{
content
:
JSX
.
Element
;
key
:
string
;
title
:
string
;
}
const
TabsComponent
:
React
.
SFC
<
TabsProps
>
=
({
tabs
,
defaultTab
,
onSelect
})
=>
{
return
(
<
Tabs
id=
"tab"
className=
"tabs-component"
defaultActiveKey=
{
defaultTab
}
onSelect=
{
onSelect
}
>
{
tabs
.
map
((
tab
)
=>
{
return
(
<
Tab
title=
{
tab
.
title
}
eventKey=
{
tab
.
key
}
key=
{
tab
.
key
}
>
{
tab
.
content
}
</
Tab
>
)
})
}
</
Tabs
>
)
};
export
default
TabsComponent
;
amundsen_application/static/js/components/common/Tabs/styles.scss
0 → 100644
View file @
3bbb6c9e
@import
'variables'
;
.tabs-component
{
.nav.nav-tabs
{
border
:
none
;
>
li
{
&
.active
>
a
{
&
,
&
:hover
{
color
:
$gradient-4
;
}
&
:after
{
opacity
:
1
;
}
}
>
a
{
background
:
none
;
border
:
none
;
color
:
$gray-light
;
font-size
:
$font-size-large
;
line-height
:
$line-height-large
;
&
:hover
{
color
:
$text-color
;
}
// Active tab indicator
&
:after
{
border
:
2px
solid
$gradient-4
;
bottom
:
0
;
content
:
""
;
left
:
0
;
opacity
:
0
;
position
:
absolute
;
transition
:
opacity
200ms
ease-in
;
width
:
100%
;
}
}
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment