首页 文章

角度材质滑块方向问题

提问于
浏览 次
0

我有angular material slider需要驻留在具有 dir="rtl" 样式的 div 内 . 但是，当我添加 dir="rtl" 标签时，滑块会变得混乱（鼠标没有正确捕捉它并且着色不准确） .
这是问题的完整HTML示例：

<html>
<head>
    <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
</head>
<body>
    <div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
        <md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
        </md-slider>
        Value: {{value}}
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>

    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
    <script>
        angular.module('MyApp', ['ngMaterial'])
        .controller('AppCtrl', function ($scope) {
        });
    </script>
</body>

我已经尝试改变滑块本身的方向并将其置于另一个 div dir="ltr" 但没有成功 .

css angularjs angular-material right-to-left

1 回答

  • 1
    <html>
<head>
    <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
    <style>
    [dir=ltr] md-slider .md-thumb {
      left: auto;
      right: auto;
    }
    [dir=ltr] md-slider .md-thumb-container {
        left: 0;
        right: auto; 
    }
    </style>
</head>
<body>
    <div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">

    <div dir="ltr">
    test
        <md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
        </md-slider>
     </div>

        Value: {{value}}
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>

    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
    <script>
        angular.module('MyApp', ['ngMaterial'])
        .controller('AppCtrl', function ($scope) {
        });
    </script>
</body>

    当你重写这个类时，它似乎工作

    回复于

相关问题