我有一个表格。在此表单中,当屏幕在移动大小时,必须使用导航菜单来显示表单的详细信息。
my site is multi language . when the language is the en
it must be ltr
and open the navigation from left
page and when the language is fa
it must be rtl
open the navigation from right
.
我写的代码,但我不知道如何更改导航的打开方向。我把我的代码放在这里,请帮助解决这个问题。
<button mat-raised-button onclick="openNav()" id="showInfos" color="primary">
点击打开
<div id="activity-info" class="activity-info">
<div class="activity-container">
<div class="activity-header">
<span id="closeActivityInfo" (click)="closeActivityInfo()">
<mat-icon>clear</mat-icon>
</span>
<div class="activity-info-title">
<span>
{{ "GENERAL.ACTIVITY_INFO" | translate }}
</span>
</div>
</div>
<div class="activity-content">
<div>
<div class="item">
<div class="item-label">{{ "GENERAL.CREATOR" | translate }} :</div>
<div class="item-value">
<pfa-user-field
[displayName]="oldEditModel.creator"
[row]="false"
></pfa-user-field>
</div>
</div>
</div>
</div>
</div>
</div>
CSS代码:
#showInfos {
display: block;
width: 100% !important;
margin-bottom: 7px !important;
}
#closeActivityInfo {
display: block;
}
.activity-info-title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.activity-info {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.activity-container {
width: 100%;
}
.edit-form {
width: 100%;
}
.form-content {
height: 100%;
}
.showInfos {
width: 60px;
height: 40px;
background-color: #e52727;
color: white;
position: absolute;
right: 40px;
bottom: 20px;
}
}
这是js代码:
function openNav(){
document.getElementById("activity-info").style.width = "80%";
}
您可以通过在动画开始之前更改div的初始位置来实现。
all you have to do to make it open from the right is to remove the
left
property and addright
property with the same value as inleft
property in.activity-info
in css, so to open it from the left use the following:并从右侧打开它,请使用以下命令:
那么不一次又一次地重复代码的解决方案是什么? 非常简单,您将有1个班级(主班)和2个其他班级(根据语言从右或左打开)
所以这是主要的类:
左课:
正确的班级:
并在html中:
you have add the appropriate class to div based on the language. here you can find how to add class to the element.