文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用卡片组件创建手风琴

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

Stack Overflow用户

提问于 2018-11-30 12:50:25

回答 1查看 2K关注 0票数 0

我使用的是Reactive1.0.0-beta.3，它是为支持引导4更新而构建的。

在此之前，我使用了react引导0.32.1，并使用面板和面板组创建了手风琴。

但是，在引导升级之后，建议使用Card组件。我试图做到这样的行为：

<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>

我在这里面临两个问题：

如何制作一张卡，以获得全宽度。
如何使这种结构表现得像手风琴。

就像这样：

reactjs

bootstrap-4

react-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-30 20:09:41

您需要创建自定义的components和css className。

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

components/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>
);

components/Card.js

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
};

components/Button.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;

components/Collapse.js

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
};

styles.css

.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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53557946

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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