--
ملف لدعم اللغات التي تعتمد الإتجاه من اليمين إلى اليسار في إطار العمل materialize
-- materialize rtl support (v1)- CSS: 100% 💯
- Components: 100% 💯
- Javascript: 99% 🥇 -- Carousel: !!😓 carousel-item direction >[ ]<
- Forms: 100% 💯
1)_ Download and added after original materialize:
<!-- materialize -->
<link rel="stylesheet" href="materialize.min.css"/>
<!-- materialize right-to-left -->
<link rel="stylesheet" href="materialize.rtl.min.css"/>
2)_ CDN:
<!-- latest materialize -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Dogfalo/materialize/dist/css/materialize.min.css"/>
<!-- materialize right-to-left -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mohamadlounnas/materialize-rtl-support@master/dist/css/materialize.rtl.min.css"/>
material icons (add the class "rtlx"): Which icons should be mirrored for RTL?
<i class="material-icons rtlx">play_arrow</i>
Navbar:
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
Sidenav:
$('.sidenav').sidenav({
edge: 'right'
});
Range:
// -> https://refreshless.com/nouislider/slider-options/#section-direction
var slider = document.getElementById('my-range');
noUiSlider.create(slider, {
//...
direction: 'rtl',
//...
});
Tabs:
var elems = document.querySelectorAll('.tabs');
var instance = M.Tabs.init(elems, {
duration:0
});
functions:
/**
* detect page direction
*/
function isRTL(el)
{
var x = document.getElementById(el) || document.body;
if (x.currentStyle) {
var y = x.currentStyle['direction'];
}
else if (window.getComputedStyle) {
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue('direction');
}
if (y == 'rtl') {
return true;
} else {
return false;
}
}
Enjoy ;)