0
heroku react create app buildpack을 사용하여 작은 웹 앱에 react semantic ui을 사용합니다.반응 Semantic UI - 모바일보기 marginRight
나는 유체 용기 오른쪽에 여백이 생깁니다. Chrome의 관리자는 본문, 페이지 또는 기타 요소에 여백이 표시되지 않습니다.
첨부 된 사진을 참조하십시오.
이 내 코드입니다 : 그냥 추측
import React from 'react';
import MainMenu from '../../components/menu';
import * from '../../components/search/searchComponents';
import {Button, Container, Image, Item, Label, Responsive, Segment} from 'semantic-ui-react';
/*START TESTDATA*/
const data= [
]
/*END TESTDATA*/
export default class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
searchType: undefined,
searchResults: [],
showSearchResultDetails: false,
mainSearchStyleHeight: 'calc(100vh - 40px)',
mainSearchStylePTop: 'calc(33vh - 40px)',
mainSearchStyleTransition: undefined,
};
}
searchButtonHandleOnClick(){
this.setState({
mainSearchStyleHeight: '100%',
mainSearchStylePTop: '2rem',
mainSearchStylePBottom: '2rem',
mainSearchStyleTransition: 'height: 1s ease-in',
searchResults: dishes
})
}
handleSearchResultOnClick(item){
this.setState({showSearchResultDetails: true})
}
render() {
/*TODO: add css transition here*/
var mainSearchStyle = {
height: this.state.mainSearchStyleHeight,
paddingTop: this.state.mainSearchStylePTop,
paddingBottom: this.state.mainSearchStylePBottom,
transition: this.state.mainSearchStyleTransition
}
const searchBtn = <Button basic icon="search" content="Suchen" onClick={this.searchButtonHandleOnClick.bind(this)}/>
return (
<div>
<MainMenu/>
<Container fluid id="mainSearch" style={mainSearchStyle}>
<Container>
<Responsive as={Segment} minWidth={768} raised padded="very">
<SearchByAttr/>
<div className="txt-center mt-2">
{searchBtn}
</div>
</Responsive>
<Responsive maxWidth={767} className="pt-3 pb-3">
<SearchByAttr/>
<div className="txt-center mt-2">
{searchBtn}
</div>
</Responsive>
</Container>
</Container>
<Container id="mainSearchResults" className="p-1">
{/*TODO: move this to search components*/}
<Item.Group divided>
{this.state.searchResults.length > 0 && this.state.searchResults.map(item=>(
<Item key={item.name}>
<Image
size="small"
src='http://via.placeholder.com/300x250'
label={{ color: 'blue', content: '4,90 Euro', icon: 'spoon', ribbon: true }}
/>
<Item.Content>
<Item.Header as='a' onClick={this.handleSearchResultOnClick.bind(this, item)}>
{item.name}
</Item.Header>
<Item.Meta>
<span className='cinema'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</span>
</Item.Meta>
<Item.Description>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</Item.Description>
<Item.Extra>
<Label content='vegan' />
<Label content='laktosefrei' />
<Label content='low carb' />
</Item.Extra>
</Item.Content>
</Item>
))}
</Item.Group>
</Container>
<SearchResultDetails
open={this.state.showSearchResultDetails}
onClose={()=>this.setState({showSearchResultDetails: false})}
/>
</div>
);
}
};
어떤 구성 요소를 사용 했습니까? 여기에 코드를 게시 할 수 있습니까? – amir
수정 된 게시물을 참조하십시오. –