office-ui-fabric-react#IStackTokens TypeScript Examples

The following examples show how to use office-ui-fabric-react#IStackTokens. 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: NavCon.tsx    From AIPerf with MIT License 5 votes vote down vote up 
stackTokens: IStackTokens = {
    childrenGap: 15
}
Example #2
Source File: Intermediate.tsx    From AIPerf with MIT License 5 votes vote down vote up 
stackTokens: IStackTokens = {
    childrenGap: 20
}
Example #3
Source File: ErrorPage.tsx    From hypertrons-crx with Apache License 2.0 5 votes vote down vote up 
stackTokens: IStackTokens = { childrenGap: 20 }
Example #4
Source File: SpfxFluentuiPanel.tsx    From SPFx with Mozilla Public License 2.0 5 votes vote down vote up 
stackTokens: IStackTokens = { childrenGap: 20 }
Example #5
Source File: SpfxFluentuiMessagebar.tsx    From SPFx with Mozilla Public License 2.0 5 votes vote down vote up 
stackTokens: IStackTokens = { childrenGap: 40 }
Example #6
Source File: SpfxPnpIconpicker.tsx    From SPFx with Mozilla Public License 2.0 5 votes vote down vote up 
stackTokens: IStackTokens = { childrenGap: 40 }
Example #7
Source File: SpfxReactConfetti.tsx    From SPFx with Mozilla Public License 2.0 5 votes vote down vote up 
stackTokens: IStackTokens = { childrenGap: 40 }
Example #8
Source File: Overview.tsx    From AIPerf with MIT License 4 votes vote down vote up 
render(): React.ReactNode {
        const { trialConcurrency } = this.state;
        const { experimentUpdateBroadcast, metricGraphMode } = this.props;
        const searchSpace = this.convertSearchSpace();
        const bestTrials = this.findBestTrials();
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
        const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
        const noDataMessage = bestTrials.length > 0 ? '' : 'No data';

        const titleMaxbgcolor = (metricGraphMode === 'max' ? '#999' : '#b3b3b3');
        const titleMinbgcolor = (metricGraphMode === 'min' ? '#999' : '#b3b3b3');

        const stackTokens: IStackTokens = {
            childrenGap: 30,
        };
        return (
            <div className="overview">
                {/* status and experiment block */}
                <Stack>
                    <Title1 text="Experiment" icon="11.png" />
                    <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
                </Stack>

                <Stack horizontal className="overMessage">
                    {/* status block */}
                    <Stack.Item grow className="prograph overviewBoder cc">
                        <Title1 text="Status" icon="5.png" />
                        <Progressed
                            bestAccuracy={bestAccuracy}
                            concurrency={trialConcurrency}
                            changeConcurrency={this.changeConcurrency}
                            experimentUpdateBroadcast={experimentUpdateBroadcast}
                        />
                    </Stack.Item>
                    {/* experiment parameters search space tuner assessor... */}
                    <Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder">
                        <Title1 text="Search space" icon="10.png" />
                        <Stack className="experiment">
                            <SearchSpace searchSpace={searchSpace} />
                        </Stack>
                    </Stack.Item>
                    <Stack.Item grow styles={{root: {width: 450}}}>
                        <Title1 text="Config" icon="4.png" />
                        <Stack className="experiment">
                            {/* the scroll bar all the trial profile in the searchSpace div*/}
                            <div className="experiment searchSpace">
                                <TrialInfo
                                    experimentUpdateBroadcast={experimentUpdateBroadcast}
                                    concurrency={trialConcurrency}
                                />
                            </div>
                        </Stack>
                    </Stack.Item>
                </Stack>

                <Stack>
                    <Stack horizontal className="top10bg">
                        <div
                            className="title"
                            onClick={this.clickMaxTop}
                        >
                            <Title1 text="Top10 Maximal trials" icon="max.png" bgcolor={titleMaxbgcolor} />
                        </div>
                        <div
                            className="title minTitle"
                            onClick={this.clickMinTop}
                        >
                            <Title1 text="Top10 Minimal trials" icon="min.png" bgcolor={titleMinbgcolor} />
                        </div>
                    </Stack>
                    <Stack horizontal tokens={stackTokens}>
                        <div style={{ width: '40%', position: 'relative'}}>
                            <Accuracy
                                accuracyData={accuracyGraphData}
                                accNodata={noDataMessage}
                                height={404}
                            />
                        </div>
                        <div style={{ width: '60%'}}>
                        <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
                        </div>
                    </Stack>
                </Stack>
            </div>
        );
    }