代码之家 › 专栏 › 技术社区 › rahul

如何使用卡片组件创建手风琴

react-bootstrap bootstrap-4 reactjs

rahul · 技术社区 · 6 年前

我正在使用 反应引导1.0.0-beta.3 ,用于支持 引导4 更新。

在这之前我用 反应引导0.32.1 使用面板和面板组创建手风琴。

但在引导程序升级之后,建议使用卡组件。我试着做同样的事情:

<CardGroup>
 <Card eventKey={this.state.eventKey} className="border-0">
              <Card.Header>
                <div className="row">
                  <div className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                    <Card.Title>
                      This is test
                    </Card.Title>
                  </div>
                  <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    Test Text 123
                  </div>
                </div>
              </Card.Header>
              <Card.Body>
                Test Text 456
              </Card.Body>
           </Card>
</CardGroup>

我在这里面临两个问题:

如何使一张牌取全宽。
如何使这种结构表现得像手风琴。

像这样:

1 回复 | 直到 6 年前

Matt Carlotta 6 年前

您需要创建自定义 components 和CSS className S.

工作实例 : https://codesandbox.io/s/8zkrw9jw50

组件/accordian.js

import React from "react";
import Card from "../../components/Card";

const panels = [
  "Add Edit Menus",
  "Resource Management",
  "Asset Management",
  "User Management",
  "Account Management"
];

export default () => (
  <div className="app-container">
    <div className="accordion-container">
      {panels.map(title => (
        <Card key={title} title={title} />
      ))}
    </div>
  </div>
);

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Row, Col, Card } from "react-bootstrap";
import Collapse from "../Collapse";
import Button from "../Button";

const { Body, Header, Title } = Card;

class CardComponent extends Component {
  state = { isActive: false };

  toggleVisibility = () =>
    this.setState(prevState => ({ isActive: !this.state.isActive }));

  render = () => (
    <div className={`${this.state.isActive ? "active" : "inactive"}`}>
      <Card>
        <Header style={{ padding: 0 }}>
          <Row>
            <Col xs={9}>
              <Button onClick={this.toggleVisibility}>
                {!this.state.isActive ? "+" : "-"}
              </Button>
              <Title style={{ display: "inline-block" }}>
                {this.props.title}
              </Title>
            </Col>
            <Col style={{ paddingTop: 7 }} xs={3}>
              Test Text 123
            </Col>
          </Row>
        </Header>
        <Collapse>
          <Body style={{ padding: 10 }}>Test Text 456</Body>
        </Collapse>
      </Card>
    </div>
  );
}

export default CardComponent;

CardComponent.propTypes = {
  title: PropTypes.string.isRequired
};

组件/按钮.js

import styled from "styled-components";

const StyledButton = styled.button`
  color: #909090;
  background-color: transparent;
  font-weight: bold;
  outline: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.3s ease-in-out;
  margin: 0 15px;
  width: 25px;

  &:hover {
    color: #333333;
  }

  &:focus {
    outline: none;
  }
`;

export default StyledButton;

import React from "react";
import PropTypes from "prop-types";

const Collapse = ({ children }) => (
  <span className="folding-pannel">{children}</span>
);

export default Collapse;

Collapse.propTypes = {
  children: PropTypes.node.isRequired
};

.accordion-container {
  width: 100%;
}

.app-container {
  margin: 20px;
}

.active,
.inactive {
  margin-bottom: 5px;
}

.active .folding-pannel {
  transition: all 0.3s ease-in-out;
  height: 42px;
}

.inactive .folding-pannel {
  transform: perspective(0px) rotateX(90deg);
  transition: all 0.3s ease-in-out;
  height: 0;
}