代码之家 › 专栏 › 技术社区 › fun joker

如何在语义反应ui网格中添加元素?

semantic-ui-react reactjs html

fun joker · 技术社区 · 5 年前

我正在使用react语义ui。我想在网格系统中添加一个搜索栏。搜索栏应该几乎占据整个宽度(参见屏幕截图2)。

搜索栏应与现有边栏相邻。目前,我可以添加搜索栏旁边的边栏,但宽度没有增加的边栏为什么? 我希望搜索栏有完整的宽度,即直到屏幕右侧结束。

代码:

export default class DashBoard extends Component {

  render() {

    return (
      <div className={styles.container}>
        <Grid stackable columns={3}>
        <Grid.Row>
          <Grid.Column className={styles.sideBar} width={3}>
            <Segment className={styles.sideBarContent}>
                <Header as='h3' className={styles.sideBarHeader}>DashBoard</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donations</Header>
                <Header as='h3' className={styles.sideBarHeader}>Events</Header>
                <Header as='h3' className={styles.sideBarHeader}>Reports</Header>
                <Header as='h3' className={styles.sideBarHeader}>Profile</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donor Intelligence</Header>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <div className={styles.searchBar}>
               <Search size='big'/>
            </div>
            <Segment className={styles.piechartContent}>
              <PieChart width={250} height={300}/>
            </Segment>
            <Segment className={styles.multilinechartContent}>
              <MultilineChart width={350} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <Segment className={styles.barchartContent}>
              <BarChart width={475} height={375}/>
            </Segment>
            <Segment className={styles.donutchartContent}>
              <DonutChart width={375} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={2}>
            <Card className={styles.card1}>
              <Card.Content>
                <Card.Header className={styles.cardHeader1}>Â£93,300.56</Card.Header>
                <Card.Description className={styles.cardDescription1}>Remittances - All Time</Card.Description>
              </Card.Content>
            </Card>
            <Card className={styles.card2}>
              <Card.Content>
                <Card.Header className={styles.cardHeader2}>53</Card.Header>
                <Card.Description className={styles.cardDescription2}>Parishes / Churches</Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </div>
    )
  }
}

截图:

截图1:

1 回复 | 直到 5 年前

isherwood Stefan Svrkota 5 年前

您需要两列,在主列中需要两行。(如果包装正确,您可能不需要两个实际的行元素,但这可能有助于使结构更清楚地使用行。)

 _______________________________
|         | ___________________ |
|         || row w/ 1 col      ||
|         ||___________________||
|         | ___________________ |
|         ||         ||        ||
|         || row w/  ||        ||
|         || 2 cols  ||        ||
|         ||         ||        ||
|         ||         ||        ||
|         ||_________||________||
 _______________________________
    ^-- sidebar col
                     ^-- main col