角度三态拨动开关 [英] Three state toggle switch in angular
问题描述
在我的angular 6应用程序中，我需要使用具有顺序的三态拨动开关，
---ON---NA---OFF---
我为此使用了以下 HTML ，
<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="">
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" checked="checked">
<label for="na" onclick="">N/A</label>
<input id="off" name="state-d" type="radio">
<label for="off" onclick="">OFF</label>
<a></a>
</div>
由于文件中包含很多代码，因此无法共享 css 文件.
工作示例: https ://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig
在其中您可以看到两次制成的开关盒，其中第一个完全是硬编码的单选按钮.
但是我接下来试图使它动态化，但是我无法获得与所选开关相同的UI和值.
我需要的是，需要制作三个状态切换开关，其值将为On --- NA --- Off.如果用户切换到Off，则state-d的值需要为Off，如果其On则state-d的值必须为On，对于NA同样.默认情况下，需要选择NA(选中).
我需要像链接 https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig
但是，单选按钮必须是动态的，就像我在同一链接的第二个按钮中尝试过的那样.
HTML
<div *ngFor="let option of options" class="switch-toggle switch-3 switch-candy">
<div class="radio">
<input type="radio"
name="state-d"
id="{{option.id}}"
[(ngModel)]="value"
[value]="option.value"
/>
<label for="{{option.id}}">{{option.id}}
</label>
</div>
</div>
Ts:
public options = [
{value: "on", id:"On"},
{value: "na", id:"NA"},
{value: "off", id:"Off"},
]
我还需要获取当前开关的值.
请通过动态生成单选按钮帮助我达到预期的结果，并在切换按钮时将NA默认值设置为相应的值.
使用任何第三方库(甚至不允许使用角形材料)或jquery ，无需即可获得预期结果.如果UI有所更改但可以预期，则效果很好结果是纯角度的，基于typescript/javascript.
我真的很喜欢ng-bootstrap的单选按钮
在不使用第三方库的情况下进行一些类似的设计可使用CSS.如果我们有类似的选项 只需添加 删除插入符号"，并为单选按钮赋予一些样式.好吧，制作一个更复杂的动画.我将尝试使用定义三个状态的Angular Animations，但我不太确定如何制作 已更新(使用Angular动画)
在这种情况下，Angulars动画很容易.只需定义三个状态(我举一个非常简单的例子(我的选项将是一个简单的数组) 动画仅定义了状态，以及如何将一种状态传递给另一种状态 动画只说，当[@posX]为'uno'时，不进行翻译；当[@posX]为'dos'时，向左翻译100px；当[@posX]为'tres'时，向200px
一个html将是两个位于相同位置的div(我使用margin-top:-2rem) 还有一个CSS来隐藏插入符号"并为标签赋予宽度. 您可以在 stackblitz 注意:显然，这是一个丑陋的示例，其内嵌样式而不是.css In my angular 6 application i am in the need to use three state toggle switch which has the order, For which i have used the following Html, Couldn't share the css file because it has lot of codes.. Working Example: https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig In which you could able to see two times made switch boxes in which the first one is entirely hard coded radio buttons.. But in second i am trying to make it dynamic but i am unable to get the same UI and value of the selected switch.. The thing i am in the need is, Need to make three state toggle switch which will have values as I am need of result as like first one in the link https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig But the radio buttons needs to be dynamic as like i am tried in second one in the same link.. (It doesn't works). Html: Ts: Also i need to get the value of the current switch. Kindly help me to achieve the expected result via dynamic generation of radio buttons and make the Result is expected without using any third-party libraries (even angular material not allowed) or jquery.. It is good if there is change in the UI but expected result is in pure angular, typescript/javascript based. really I like the radio-buttons of ng-bootstrap https://ng-bootstrap.github.io/#/components/buttons/examples#radio
(well, you can add as style To avoid the "ugly" shadow in focus) Make some similar without third-party libraries is play with css. if we has an options like Simply add remove the "caret" and give some style to radio buttons. well, make an animation it's more complex. I'll try using Angular Animations defining three states, but I'm not pretty sure how make it Updated using Angular animations
Angulars animation in this case is easy. Just defined three states (I make a very simple example (my options will be a simple array) An animation is only defined states and how pass to one state to other The animation only say that, when [@posX] was 'uno', no translate, when [@posX] was 'dos' translate 100px to the left and when [@posX] was 'tres' translate 200px An html will be two divs that are in the same position (I use margin-top:-2rem) And a css to hide the "caret" and give width to the labels. you can see in the stackblitz NOTE: Obviously is an ugly example with style in-line and not in .css 这篇关于角度三态拨动开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<div *ngFor="let option of options" style="display:inline"
[className]="value==option.value?'active':'noactive'" >
<input class="radio" type="radio" name="state-d" id="{{option.id}}"
[(ngModel)]="value" [value]="option.value" />
<label for="{{option.id}}">
{{option.id}}
</label>
</div>
[type="radio"].radio {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.active{
color:red;
}
.noactive{
color:blue;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('posX',[
state('uno',style({transform:'translateX(0)'})),
state('dos',style({transform:'translateX(100px)'})),
state('tres',style({transform:'translateX(200px)'})),
transition('* => uno',animate(200)),
transition('* => dos',animate(200)),
transition('* => tres',animate(200)),
])
]
})
export class AppComponent {
pos:string='uno';
pos2:string='uno';
options=['uno','dos','tres'];
}
<div style="background-color:transparent;">
<div *ngFor="let option of options" style="display:inline;" >
<input class="radio" type="radio" name="state-d" id="{{'l'+option}}"
[(ngModel)]="pos" [value]="option" />
<label class="radio" for="{{'l'+option}}">
{{option}}
</label>
</div>
</div>
<div style="overflow:hidden;margin-top:-2rem">
<div [@posX]="pos" (@posX.done)="pos2=pos" style="background:blue;width:100px" >
{{pos2}}
</div>
</div>
[type="radio"].radio {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label.radio
{
width:100px;
}
---ON---NA---OFF---<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="">
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" checked="checked">
<label for="na" onclick="">N/A</label>
<input id="off" name="state-d" type="radio">
<label for="off" onclick="">OFF</label>
<a></a>
</div>
On --- NA --- Off. IF user switch to Off then the value of state-d needs to be Off and if its On then the value of state-d needs to be On and likewise for NA. In default the NA needs to be selected (checked)..<div *ngFor="let option of options" class="switch-toggle switch-3 switch-candy">
<div class="radio">
<input type="radio"
name="state-d"
id="{{option.id}}"
[(ngModel)]="value"
[value]="option.value"
/>
<label for="{{option.id}}">{{option.id}}
</label>
</div>
</div>
public options = [
{value: "on", id:"On"},
{value: "na", id:"NA"},
{value: "off", id:"Off"},
]
NA default value upon switching the buttons make change the values accordingly...btn-primary.focus, .btn-primary:focus {
box-shadow: 0 0 0 0;
}
<div *ngFor="let option of options" style="display:inline"
[className]="value==option.value?'active':'noactive'" >
<input class="radio" type="radio" name="state-d" id="{{option.id}}"
[(ngModel)]="value" [value]="option.value" />
<label for="{{option.id}}">
{{option.id}}
</label>
</div>
[type="radio"].radio {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.active{
color:red;
}
.noactive{
color:blue;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('posX',[
state('uno',style({transform:'translateX(0)'})),
state('dos',style({transform:'translateX(100px)'})),
state('tres',style({transform:'translateX(200px)'})),
transition('* => uno',animate(200)),
transition('* => dos',animate(200)),
transition('* => tres',animate(200)),
])
]
})
export class AppComponent {
pos:string='uno';
pos2:string='uno';
options=['uno','dos','tres'];
}
<div style="background-color:transparent;">
<div *ngFor="let option of options" style="display:inline;" >
<input class="radio" type="radio" name="state-d" id="{{'l'+option}}"
[(ngModel)]="pos" [value]="option" />
<label class="radio" for="{{'l'+option}}">
{{option}}
</label>
</div>
</div>
<div style="overflow:hidden;margin-top:-2rem">
<div [@posX]="pos" (@posX.done)="pos2=pos" style="background:blue;width:100px" >
{{pos2}}
</div>
</div>
[type="radio"].radio {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label.radio
{
width:100px;
}
