1

Задачка вроде не сложная, а таску надо решить очень срочно.

https://codepen.io/archivisions/pen/JvLwNb

var app = angular.module("App", []);

app.controller("Ctrl", function ($scope) {

    $scope.colors = [
        {
            Name: "ЗЕЛЕНЫЙ",
            Value: 1,
            Color: "#47c28d"
        },
        {
            Name: "КРАСНЫЙ",
            Value: 2,
            Color: "red"
        },
        {
            Name: "СИНИЙ",
            Value: 3,
            Color: "blue"
        }
    ];

    $scope.color = 1;

});
*{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
head{
  max-width:100%;
  min-width:0%;
}
.button {
  display:inline-block;
  flex-direction: row;
  vertical-align: baseline;
  font-size: 10.5px;
  padding-right: 20px;
  padding-left: 20px;
  width:98px;
  height:24px;
}
.text{
  flex-direction: row;
  wigth:100%;
  font-size: 11px;
  padding-left:4px;
  color: gray;
}
.form{
  padding:2px 4px;
  height:30px;
}
.form-group{
  flex-direction: row;
  display:inline-block;
  text-align: center;
  cursor: pointer;
  heihth:30px;
}

input{
  width:0px;
  heigth:0px;
}
label{
  cursor: pointer;
  
}
p{
  display:inline-block;
  flex-direction: row;
  wigth:100%;
  font-size: 11px;
  padding-left:3px;
  color: gray;
  margin: 0 auto;
  padding:0 auto;
}
<html>
<head>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body ng-app="App" ng-controller="Ctrl">
    <div class="container">
        <h1 style="margin-top:60px; margin-bottom:20px">Таска по CSS</h1>

        <p>
            Привести набор radio button к виду на картинке, не меняя логику работы (т.е. тип контролла и не добавлять скриптов). Верстку менять можно :) <br />
            <a><img src="https://image.ibb.co/cqqvAd/radio.png" alt="radio" border="0"></a>
        </p>
        <div class="text">Выберите цвет</div>
        <div class="form">
            <div class="form-group" ng-repeat="c in colors">
                <div class="button" style="border: 1px solid {{c.Color}}; color: {{c.Color}} ">
                    <label><input type="radio" name="color" ng-model="$parent.color" value="{{c.Value}}">{{c.Name}}</label>
                </div>
            </div>
        </div>
        <p>color: {{color}}</p>
    </div>
</body>
</html>

Если можно пропишите в комментах что поменялось или что добавилось. СПС!

7
  • Надо привести набор radio button к виду на картинке, не меняя логику работы (т.е. тип контролла и не добавлять скриптов). Верстку менять можно :) 10 мая 2018 в 22:53
  • 1
    мысли... просто мысли: codepen.io/anon/pen/JvLqNv 11 мая 2018 в 3:21
  • подредактировал codepen.io/archivisions/pen/JvLwNb только немогу понять как текст приподнять (по центру поставить), и всетаки как сделать чтобы сработала копка на active или hover... :( 11 мая 2018 в 15:43
  • код можно в js добавлять? 11 мая 2018 в 19:30
  • 1
    вроде все заработало, как я вижу. 12 мая 2018 в 21:07

1 ответ 1

1

Доработал.

var app = angular.module("App", []);

app.controller("Ctrl", function ($scope) {

    $scope.colors = [
        {
            Name: "ЗЕЛЕНЫЙ",
            Value: 1,
            Color: "#47c28d"
        },
        {
            Name: "КРАСНЫЙ",
            Value: 2,
            Color: "red"
        },
        {
            Name: "СИНИЙ",
            Value: 3,
            Color: "blue"
        }
    ];

    $scope.color = 1;

});
*{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.text{
  flex-direction: row;
  wigth:100%;
  font-size: 11px;
  padding-left:5px;
  color: gray;
}

.form{
  padding:2px 5px;
  height:100%;
}

.form-group{
  display:inline-block;
  text-align: center;
  cursor: pointer;
  heihth:25px;
}

input{
  width:0px;
  heigth:0px;
}

.label-form{
  cursor: pointer;
  font-weight: 500;  
  text-align: center;
  width:98px;
  height:24px;
  background-color: #fdfdfd;
  flex-direction: row;
  font-size: 11px;
  letter-spacing: -0.5px;
}

.unchecked {
  border: 1px solid #c3c3c3 !important; 
  color: #7d8083 !important;
}
.label-form > input[type="radio"] {
  margin: 3px 0;
}

p{
  display:inline-block;
  flex-direction: row;
  font-size: 11px;
  padding-left:3px;
  color: gray;
}
.text-color{
  display:border-box;
  margin: 0 auto;
}
<html>
<head>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body ng-app="App" ng-controller="Ctrl">
    <div class="container">
        <h1 style="margin-top:60px; margin-bottom:20px">Таска по CSS</h1>

        <p>
            Привести набор radio button к виду на картинке, не меняя логику работы (т.е. тип контролла и не добавлять скриптов). Верстку менять можно :) <br />
            <a><img src="https://image.ibb.co/cqqvAd/radio.png" alt="radio"></a>
        </p>
        <div class="text">Выберите цвет</div>
        <div class="form">
            <div class="form-group" ng-repeat="c in colors">
                    <label  ng-class="{'label-form':true, 'unchecked': c.Value != color}" style="border: 1px solid {{c.Color}}; color: {{c.Color}}"><input type="radio" name="color" ng-model="$parent.color" value="{{c.Value}}">{{c.Name}}</label>
            </div>
        </div>
      <div class="text-color">
        <p>color: {{color}}</p>
      </div>
   </div>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.