如何在使用碳组件的组件旁边添加左侧面板？答案

【问题标题】：How to add a left panel right next to a component using carbon components?如何在使用碳组件的组件旁边添加左侧面板？
【发布时间】：2023-02-13 22:39:19
【问题描述】：

我有一个 Sveltekit 应用程序，对于我的家庭路线，我想显示一个基于 carbon components 的表格。我想通过在表格旁边添加一个左侧面板来过滤表格中显示的数据。我基本上是在寻找their example

但我不知道他们是怎么解决的。我知道导航栏有一个导航面板，但这个面板与导航无关，应该只出现在我的主路线上。

我试图修改官方codebox示例以显示我目前所拥有的（请原谅，我以前从未使用过 React ）。我希望技术（React / Vue / Svelte）不重要。

import React from "react";
import { render } from "react-dom";
import {
  Header,
  HeaderName,
  HeaderNavigation,
  HeaderMenuItem,
  Theme,
  Content,
  DataTable,
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableHeader,
  TableBody,
  TableCell
} from "@carbon/react";

const App = () => (
  <Theme theme="g100">
    <Header>
      <HeaderName>Nav goes here</HeaderName>
      <HeaderNavigation>
        <HeaderMenuItem>Link 1</HeaderMenuItem>
      </HeaderNavigation>
    </Header>
    <Content>
      {/* TODO add sidebar for filters right next to the table */}

      <DataTable
        rows={[
          {
            id: 1,
            name: "First element"
          }
        ]}
        headers={[
          {
            key: "name",
            header: "Name"
          }
        ]}
      >
        {({ rows, headers, getHeaderProps, getTableProps }) => (
          <TableContainer title="DataTable">
            <Table {...getTableProps()}>
              <TableHead>
                <TableRow>
                  {headers.map((header) => (
                    <TableHeader {...getHeaderProps({ header })}>
                      {header.header}
                    </TableHeader>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    {row.cells.map((cell) => (
                      <TableCell key={cell.id}>{cell.value}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </DataTable>
    </Content>
  </Theme>
);

render(<App />, document.getElementById("root"));

我考虑过使用 Grid component 但随后两列的宽度相同并且网格随附一个大的水平边距。

如果网格是工作的正确组成部分，我如何告诉第一列（过滤器）使用它需要的宽度，第二列（表格）填充其余部分？

您对如何设置左侧面板有任何想法吗？

【问题讨论】：

标签： javascript reactjs svelte carbon-components carbon-components-svelte

【解决方案1】：

Grid 是用于这样布局的组件。它有多种选项来修改其行为，并且应该配置为响应式。

它有一个最大宽度，可能是为了提高可读性，因为大屏幕上的长行更难处理。这个限制可以通过设置fullWidth来取消。

还有一些填充可以通过noGutterLeft/Right删除。

design system specification 中更详细地记录了网格系统的响应能力。 “虚拟”列的数量取决于屏幕尺寸。此计数范围从 4 到 16。

例如。在这种情况下，您可能希望设置sm={4}，以便该列在小屏幕上跳到表格上方的全角，并设置md={2}以占用更少的空间。

<Content>
    <Grid fullWidth noGutterLeft noGutterRight>
        <Row>
            <Column sm={4} md={2}>
                <div class="panel">
                    Left Panel
                </div>
            </Column>
            <Column>Content</Column>
        </Row>
    </Grid>
</Content>

REPL

【讨论】：