office-ui-fabric-react#Separator TypeScript Examples
The following examples show how to use
office-ui-fabric-react#Separator.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SearchPage.tsx From art with MIT License | 6 votes |
|
render() {
return (
<Stack className="main" role="main">
<NavBar />
<Stack className="search__topstack">
<SearchControl updateTerms={this.updateTerms} />
<Separator />
<Stack horizontal>
<Stack>
<TagList
activeFilters={this.state.activeFilters}
facets={this.state.facets}
selectAndApplyFilters={this.selectAndApplyFilters}
clearActiveFilters={this.clearActiveFilters}
/>
</Stack>
<Separator vertical />
<SearchGrid results={this.state.results} handleTrackEvent={this.handleTrackEvent} />
</Stack>
</Stack>
</Stack>
)
}
Example #2
| Source File: ExplorePage.tsx From art with MIT License | 4 votes |
|
render() {
return (
<Stack className="main" role="main">
<NavBar />
<div className="page-wrap" style={{ position: "relative", top: "-20px", width: "100%", overflow: "hidden" }}>
<HideAt breakpoint="mediumAndBelow">
<div className="explore__background-banner">
<img className="explore__parallax" alt={"Banner comparing two artworks"} src={bannerImage} />
<div className="explore__banner-text">Explore the hidden connections between art of different cultures and media.</div>
</div>
<div className="explore__solid">
<Stack horizontal horizontalAlign="center" verticalAlign="center" wrap>
<div className="explore__pick-image-text">Pick an image to get started:</div>
<ListCarousel
items={defaultArtworks}
selectorCallback={(am) => {
this.props.history.push("/app/" + encodeURIComponent('?id=' + am.id!));
this.executeQueryWithDefaults(am.id!)
}}
selectedArtwork={this.state.queryArtwork} />
</Stack>
</div>
<div style={{ backgroundColor: "white" }}><Separator /></div>
<div ref={this.startRef} className="explore__compare-block explore__solid">
<Stack horizontal>
<Stack.Item className={halfStack} grow={1}>
<QueryArtwork artwork={this.state.queryArtwork} />
</Stack.Item>
<Stack.Item className={halfStack} grow={1}>
<ResultArtwork artwork={this.state.chosenArtwork} />
</Stack.Item>
</Stack>
</div>
</HideAt>
<ShowAt breakpoint="mediumAndBelow">
<div className="explore__solid">
<Stack horizontal horizontalAlign="center" verticalAlign="center" wrap>
<div className="explore__pick-image-text">Pick an image to get started:</div>
<ListCarousel
items={defaultArtworks}
selectorCallback={(am) => {
this.props.history.push("/app/" + encodeURIComponent('?id=' + am.id!));
this.executeQueryWithDefaults(am.id!)
}}
selectedArtwork={this.state.chosenArtwork!} />
</Stack>
</div>
<Separator />
<div className="explore__compare-block explore__solid">
<Stack horizontal horizontalAlign="center" wrap>
<Stack.Item grow={1}>
<QueryArtwork artwork={this.state.queryArtwork} />
</Stack.Item>
<Stack.Item grow={1}>
<ResultArtwork artwork={this.state.chosenArtwork} />
</Stack.Item>
</Stack>
</div>
</ShowAt>
<div className="explore__solid">
<Stack horizontalAlign="center">
<Stack horizontal horizontalAlign="center">
<button
onClick={() => {
if (isBeta) {
this.props.history.push("/app/" + encodeURIComponent('?id=' + this.state.chosenArtwork.id!));
this.executeQueryWithDefaults(this.state.chosenArtwork.id!);
logEvent("Matches", { "Location": "ResultImage" });
} else {
this.openModal()
};
}}
className="explore__buttons button">Use Match as Query</button>
<Popup
open={this.state.open}
closeOnDocumentClick
onClose={this.closeModal}
>
<div className="modal">
<button className="close" onClick={this.closeModal}>
×
</button>
{betaMessageDiv}
</div>
</Popup>
</Stack>
</Stack>
<Separator />
<div className="explore__big-text">Choose Different Cultures and Media:</div>
<Stack horizontal horizontalAlign="start" verticalAlign="center" wrap>
<Options
value={this.state.cultureFilter}
choices={cultures}
changeConditional={this.changeCulture} />
<ListCarousel
items={this.state.cultureItems!}
selectorCallback={this.setResultArtwork}
selectedArtwork={this.state.chosenArtwork!} />
</Stack>
<Separator />
<Stack horizontal horizontalAlign="start" verticalAlign="center" wrap>
<Options
value={this.state.mediumFilter}
choices={media}
changeConditional={this.changeMedium} />
<ListCarousel
items={this.state.mediumItems!}
selectorCallback={this.setResultArtwork}
selectedArtwork={this.state.chosenArtwork!} />
</Stack>
<Separator />
<Stack horizontal horizontalAlign="center">
<SubmitControl placeholder="Search the collection for other artworks" />
</Stack>
<Stack horizontalAlign="center">
<div className="explore__big-text">Learn More:</div>
<HideAt breakpoint="small">
<div className="explore__horizontal-img-container">
<a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2007.07177" >
<button className="explore__buttons button">Read The Paper</button></a>
<a target="_blank" rel="noopener noreferrer" href="https://note.microsoft.com/MSR-Webinar-Visual-Analogies-Registration-Live.html" >
<button className="explore__buttons button">Watch The Webinar</button></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/microsoft/art" >
<button className="explore__buttons button">Github</button></a>
</div>
</HideAt>
<ShowAt breakpoint="small">
<a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2007.07177" >
<button className="explore__buttons button">Read The Paper</button></a>
<a target="_blank" rel="noopener noreferrer" href="https://note.microsoft.com/MSR-Webinar-Visual-Analogies-Registration-Live.html" >
<button className="explore__buttons button">Watch The Webinar</button></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/microsoft/art" >
<button className="explore__buttons button">Github</button></a>
</ShowAt>
</Stack>
</div>
</div>
</Stack>
)
}
