Как создать связь между двумя контейнерами? - PullRequest
Новая
       5

Как создать связь между двумя контейнерами?

1 голос
/ 02 марта 2020

enter image description here

Я пытаюсь создать этот компонент. Проблема здесь заключается в связи между двумя контейнерами. Это своего рода форма регистрации для пользователей. Есть 4 раздела, и каждый раздел открывает свое собственное окно с правой стороны. Проблема в пустом пространстве между ними. Я ищу CSS решение для этой части enter image description here

Я создаю этот проект в реакции. Компонентное решение Dynami c было бы идеальным. Я открыт для любых предложений

1 Ответ

1 голос
/ 02 марта 2020

Попробуйте это. Я использовал bootstrap здесь 

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
 </script>
<script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
</script>
 <style>
    a:hover,a:focus{
    text-decoration: none;
     outline: none;
     }
    .vertical-tab{
      font-family: 'Signika', sans-serif;
      display: table;
     }
    .vertical-tab .nav-tabs{
      display: table-cell;
      width: 28%;
      min-width: 28%;
       vertical-align: top;
       border: none;
      }
    .vertical-tab .nav-tabs li{
    float: none;
   vertical-align: top;
    }
   .vertical-tab .nav-tabs li a{
     color: #fff;
     background-color: #444;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
     text-align: center;
     text-transform: uppercase;
     padding: 14px 18px 12px;
     margin: 0 0 10px 0;
     border-radius: 5px 0 0 20px;
    border: none;
    position: relative;
     z-index: 1;
     transition: all 0.5s ease 0s;
     }
    .vertical-tab .nav-tabs li a:hover,
    .vertical-tab .nav-tabs li.active a,
    .vertical-tab .nav-tabs li.active a:hover{
color: #fff;
background-color: #2e86de;
text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
border: none;
 }
.vertical-tab .nav-tabs li a:before,
.vertical-tab .nav-tabs li a:after{
content: '';
background: #fff;
height: 100%;
width: 0;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: all 0.3s ease;
 }
.vertical-tab .nav-tabs li a:after{
left: auto;
right: 0;
} 
.vertical-tab .nav-tabs li a:hover:before,
.vertical-tab .nav-tabs li.active a:before,
.vertical-tab .nav-tabs li a:hover:after,
.vertical-tab .nav-tabs li.active a:after{
width: 100%;
opacity: 0;
}
.vertical-tab .tab-content{
color: #fff;
background: #2e86de;
font-size: 15px;
letter-spacing: 1px;
line-height: 25px;
padding: 12px 15px 12px 25px;
border-radius: 0 20px 20px 5px;
display: table-cell;
position: relative;
}
.vertical-tab .tab-content h3{
font-weight: 600;
margin: 0 0 5px 0;
}
@media only screen and (max-width: 479px){
.vertical-tab .nav-tabs{
    width: 100%;
    display: block;
    border: none;
}
.vertical-tab .nav-tabs li a{
    padding: 14px 20px 12px;
    margin: 0 0 13px;
    border-radius: 5px 20px;
}
.vertical-tab .tab-content{
    padding: 20px 15px 10px;
    border-radius: 5px 20px;
    display: block;
}
.vertical-tab .tab-content h3{ font-size: 18px; }
 }
JavaScript (Vertical Tab depend on jQuery and Bootstrap.)
1
2
<script type="text/javascript" src="https://code.jquery.com/jquery- 
1.12.0.min.js"></script>
 <script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384- 
  0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
 crossorigin="anonymous"></script>
  License Terms

  </style>
   </head>
 <body>
  <div class="container">
    <div class="row">
    <div class="col-md-6">
        <div class="vertical-tab" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#Section1" 
     aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                <li role="presentation"><a href="#Section2" aria- 
    controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                <li role="presentation"><a href="#Section3" aria- 
   controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content tabs">
                <div role="tabpanel" class="tab-pane fade in active" 
    id="Section1">
                    <h3>Section 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
    vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
    dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section2">
                    <h3>Section 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
     vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
      dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section3">
                    <h3>Section 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
      elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
       vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
      dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
            </div>
        </div>
    </div>
    </div>
  </div>
  </body>
   </html>
...