英文:
Fluent UI Details List start from the left
问题
我有一个如下的用户界面：
使用Fluent UI DetailsList实现。在显示列表之前，我看到左侧有很多空间。
我如何将其更新为：
英文:
I have a UI as follows:
implemented using Fluent UI DetailsList. I see a lot of space on the left before displaying the list.
How do I update this to:
答案1
得分: 1
如果您不需要在表格中进行选择，请将 selectionMode={SelectionMode.none} 传递给 DetailsList 组件，它将完全移除选择列并将您的列表向左移动。然而，表格中“悬停”灰色部分左侧的额外空白必须是特定于应用程序的，因为DetailsList 默认情况下不会这样做，您可以在这个代码沙盒中查看，它紧靠页面边缘的填充：https://codesandbox.io/s/rough-morning-z7v25g?file=/src/App.tsx
import { DetailsList, SelectionMode } from "@fluentui/react";
export default function App() {
const items = [
{ age: 31, name: "Bob" },
{ age: 30, name: "Alice" }
];
const columns = [
{
key: "age",
fieldName: "name",
name: "Age",
minWidth: 100
},
{
key: "name",
fieldName: "name",
name: "Name",
minWidth: 100
}
];
return (
<DetailsList
items={items}
columns={columns}
selectionMode={SelectionMode.none}
/>
);
}
英文:
If you don't need selection in your table you can pass selectionMode={SelectionMode.none} into the DetailsList component, and it will remove the selection column entirely and shift your list to the left. However, the additional whitespace to the left of the "hovered" gray portion of the table must be application specific, because DetailsList does not do that by default, you can see here in this code sandbox that it's right up against the edge of the page padding: https://codesandbox.io/s/rough-morning-z7v25g?file=/src/App.tsx
import { DetailsList, SelectionMode } from "@fluentui/react";
export default function App() {
const items = [
{ age: 31, name: "Bob" },
{ age: 30, name: "Alice" }
];
const columns = [
{
key: "age",
fieldName: "name",
name: "Age",
minWidth: 100
},
{
key: "name",
fieldName: "name",
name: "Name",
minWidth: 100
}
];
return (
<DetailsList
items={items}
columns={columns}
selectionMode={SelectionMode.none}
/>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论