-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Divider component #92
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
@import '../../styles/colors.scss'; | ||
@import '../../styles/spacing.scss'; | ||
@import '../../styles/typography.scss'; | ||
@import '../../styles/opacity.scss'; | ||
@import '../../styles/variables.scss'; | ||
|
||
$baseClass: 'vant-divider'; | ||
|
||
$padding-base: 4px; | ||
$padding-md: $padding-base * 4; | ||
$gray-3: #ebedf0; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. these 2 colors are already defined in colors variables file |
||
$gray-6: #969799; | ||
$font-size-md: 14px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you can find the font variables in typography |
||
$border-color: $gray-3; | ||
$border-width-base: 1px; | ||
|
||
// Divider | ||
$divider-margin: $padding-md 0; | ||
$divider-text-color: $gray-6; | ||
$divider-font-size: $font-size-md; | ||
$divider-line-height: 24px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. use typography variables |
||
$divider-border-color: $border-color; | ||
$divider-content-padding: $padding-md; | ||
$divider-content-left-width: 10%; | ||
$divider-content-right-width: 10%; | ||
|
||
.#{$baseClass} { | ||
display: flex; | ||
align-items: center; | ||
margin: $divider-margin; | ||
color: $divider-text-color; | ||
font-size: $divider-font-size; | ||
line-height: $divider-line-height; | ||
border-color: $divider-border-color; | ||
border-style: solid; | ||
border-width: 0; | ||
width: 100%; | ||
|
||
&::before, | ||
&::after { | ||
display: block; | ||
flex: 1; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. do we need flex:1 if it's display block? |
||
box-sizing: border-box; | ||
height: 1px; | ||
border-color: inherit; | ||
border-style: inherit; | ||
border-width: $border-width-base 0 0; | ||
} | ||
|
||
&::before { | ||
content: ''; | ||
} | ||
|
||
&__hairline { | ||
&::before, | ||
&::after { | ||
transform: scaleY(0.5); | ||
} | ||
} | ||
|
||
&__dashed { | ||
border-style: dashed; | ||
} | ||
|
||
&__content-center, | ||
&__content-left, | ||
&__content-right { | ||
&::before { | ||
margin-right: $divider-content-padding; | ||
} | ||
|
||
&::after { | ||
margin-left: $divider-content-padding; | ||
content: ''; | ||
} | ||
} | ||
|
||
&__content-left { | ||
&::before { | ||
max-width: $divider-content-left-width; | ||
} | ||
} | ||
|
||
&__content-right { | ||
&::after { | ||
max-width: $divider-content-right-width; | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from 'react'; | ||
import Divider from '.'; | ||
import '../../styles/stories.scss'; | ||
|
||
export default { | ||
title: 'Divier', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Divider |
||
component: Divider | ||
}; | ||
|
||
export const BasicUsage = () => ( | ||
<div className='storybook__container divider'> | ||
<Divider /> | ||
</div> | ||
); | ||
|
||
export const WithText = () => ( | ||
<div className='storybook__container divider'> | ||
<Divider>Text</Divider> | ||
</div> | ||
); | ||
|
||
export const contentPosition = () => ( | ||
<div className='storybook__container divider divider__content-position'> | ||
<div> | ||
<Divider contentPosition='left'>Text</Divider> | ||
</div> | ||
<div> | ||
<Divider contentPosition='right'>Text</Divider> | ||
</div> | ||
</div> | ||
); | ||
|
||
export const Dashed = () => ( | ||
<div className='storybook__container divider'> | ||
<Divider dashed>Text</Divider> | ||
</div> | ||
); | ||
|
||
export const CustomStyle = () => ( | ||
<div className='storybook__container divider'> | ||
<Divider | ||
style={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }} | ||
> | ||
Text | ||
</Divider> | ||
</div> | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
|
||
import { Props } from './types'; | ||
|
||
import './index.scss'; | ||
import classnames from '../../utils/classNames'; | ||
|
||
const baseClass = 'vant-divider'; | ||
|
||
export default function Divider({ | ||
dashed, | ||
hairline = true, | ||
contentPosition = 'center', | ||
children, | ||
style = {} | ||
}: Props) { | ||
const props = { | ||
className: classnames(`${baseClass}`, [ | ||
{ dashed }, | ||
{ hairline }, | ||
{ | ||
[`content-${contentPosition}`]: !!children | ||
} | ||
]), | ||
style | ||
}; | ||
return ( | ||
<div role='separator' {...props}> | ||
{children} | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { CSSProperties } from 'react'; | ||
|
||
export interface Props { | ||
dashed?: boolean; | ||
hairline?: boolean; | ||
contentPosition?: 'left' | 'center' | 'right'; | ||
children?: string; | ||
style?: CSSProperties; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use the spacing variables