如何使用有流畅用户界面的网格布局？
如何使用有流畅用户界面的网格布局？
提问于 2020-05-06 07:53:03
在安装@fluentui/react之后，我尝试使用类似于下面的doc https://developer.microsoft.com/en-us/fluentui#/styles/web/layout的网格
ReactDOM.render(
<React.StrictMode>
<div className="ms-Grid" dir="ltr">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm4 ms-xl4">A</div>
<div className="ms-Grid-col ms-sm8 ms-xl8">B</div>
</div>
</div>
</React.StrictMode>,
document.getElementById('root')
);但是它不起作用，其他控制组件工作得很好。我错过了什么吗？
他们的医生只提到npm包。
Stack Overflow用户
发布于 2021-08-07 18:11:24
堆栈为react fluent提供了网格布局。
来自文件：
Stack是一个容器类型的组件，它抽象了一个柔性盒的实现，以便定义它的子组件的布局。
示例：
const { DefaultPalette, Slider, Stack, IStackStyles, IStackTokens, ThemeProvider, initializeIcons } = window.FluentUIReact;
// Initialize icons in case this example uses them
initializeIcons();
// Non-mutating styles definition
const itemStyles: React.CSSProperties = {
alignItems: 'center',
background: DefaultPalette.themePrimary,
color: DefaultPalette.white,
display: 'flex',
height: 50,
justifyContent: 'center',
width: 50,
};
// Tokens definition
const sectionStackTokens: IStackTokens = { childrenGap: 10 };
const wrapStackTokens: IStackTokens = { childrenGap: 30 };
const HorizontalStackWrapExample: React.FunctionComponent = () => {
const [stackWidth, setStackWidth] = React.useState<number>(100);
// Mutating styles definition
const stackStyles: IStackStyles = {
root: {
background: DefaultPalette.themeTertiary,
width: `${stackWidth}%`,
},
};
return (
<Stack tokens={sectionStackTokens}>
<Slider
label="Change the stack width to see how child items wrap onto multiple rows:"
min={1}
max={100}
step={1}
defaultValue={100}
showValue={true}
onChange={setStackWidth}
/>
<Stack horizontal wrap styles={stackStyles} tokens={wrapStackTokens}>
<span style={itemStyles}>1</span>
<span style={itemStyles}>2</span>
<span style={itemStyles}>3</span>
<span style={itemStyles}>4</span>
<span style={itemStyles}>5</span>
<span style={itemStyles}>6</span>
<span style={itemStyles}>7</span>
<span style={itemStyles}>8</span>
<span style={itemStyles}>9</span>
<span style={itemStyles}>10</span>
</Stack>
</Stack>
);
};
const HorizontalStackWrapExampleWrapper = () => <ThemeProvider><HorizontalStackWrapExample /></ThemeProvider>;
ReactDOM.render(<HorizontalStackWrapExampleWrapper />, document.getElementById('content'))
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61630028
复制相关文章
相似问题
腾讯云开发者
