Examples Bootstrap Version 4.5.2 + FriendsOfCake/bootstrap-ui

custom switch(raw html) reference

custom switch(helper use)

<?php
$templates = [
'customCheckboxContainer' => '<div class="form-group custom-control custom-switch
    {{type}}{{required}}">{{content}}{{help}}</div>',
'customCheckboxContainerError' => '<div class="form-group custom-control custom-switch
    {{type}}{{required}} is-invalid">{{content}}{{error}}{{help}}</div>',
];
?>
<?= $this->Form->create(null, ['class' => 'highlight']); ?>
<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('Toggle this switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch3',
    'id' => 'customSwitch3',
    'custom' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->control('Disabled switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch4',
    'id' => 'customSwitch4',
    'custom' => true,
    'disabled' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

PHP(ctp)

<?php
$templates = [
'customCheckboxContainer' => '<div class="form-group custom-control custom-switch
    switch-md {{type}}{{required}}">{{content}}{{help}}</div>',
'customCheckboxContainerError' => '<div class="form-group custom-control custom-switch
    switch-md {{type}}{{required}} is-invalid">{{content}}{{error}}{{help}}</div>',
];
?>
<?= $this->Form->create(null, [
    'valueSources' => 'query',
]) ?>
<?= $this->Form->control('Input Text'); ?>

<?= $this->Form->control('Toggle this switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch5',
    'id' => 'customSwitch5',
    'custom' => true,
    'class' => ' switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Toggle this switch primary', [
    'type' => 'checkbox',
    'name' => 'customSwitch6',
    'id' => 'customSwitch6',
    'custom' => true,
    'class' => 'sw-primary switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Toggle this switch secondary', [
    'type' => 'checkbox',
    'name' => 'customSwitch7',
    'id' => 'customSwitch7',
    'custom' => true,
    'class' => 'sw-secondary switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Toggle this switch success', [
    'type' => 'checkbox',
    'custom' => true,
    'name' => 'customSwitch8',
    'id' => 'customSwitch8',
    'class' => 'sw-success switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Toggle this switch info', [
    'type' => 'checkbox',
    'name' => 'customSwitch9',
    'id' => 'customSwitch9',
    'custom' => true,
    'class' => 'sw-info switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Toggle this switch warning', [
    'type' => 'checkbox',
    'name' => 'customSwitch10',
    'id' => 'customSwitch10',
    'custom' => true,
    'class' => 'sw-warning switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Toggle this switch danger', [
    'type' => 'checkbox',
    'custom' => true,
    'name' => 'customSwitch11',
    'id' => 'customSwitch11',
    'class' => 'sw-danger switch',
    'templates' => $templates,
]);?>
<?= $this->Form->control('Disabled switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch12',
    'id' => 'customSwitch12',
    'custom' => true,
    'disabled' => true,
    'class' => ' switch',
    'templates' => $templates,
]);?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

custom switch(helper use) inline

PHP(ctp)

<?php
$templates = [
  'customCheckboxInlineContainer' => '<div class="form-group custom-control custom-switch
     custom-control-inline {{type}}{{required}}">{{content}}</div>',
  'customCheckboxInlineContainerError' => '<div class="form-group custom-control custom-switch
     custom-control-inline {{type}}{{required}} is-invalid">{{content}}</div>',
];
?>
<?= $this->Form->create(null, [
    'class' => 'form-inline',
    'valueSources' => 'query',
    // 'align' => 'inline',
]) ?>

<?= $this->Form->control('Toggle this switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch13',
    'id' => 'customSwitch13',
    'custom' => true,
    'inline' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->control('Disabled switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch14',
    'id' => 'customSwitch14',
    'custom' => true,
    'inline' => true,
    'disabled' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->end() ?>

PHP(ctp)

<?php
$templates = [
  'customCheckboxInlineContainer' => '<div class="form-group custom-control custom-switch
     switch-md custom-control-inline {{type}}{{required}}">{{content}}</div>',
  'customCheckboxInlineContainerError' => '<div class="form-group custom-control custom-switch
     switch-md custom-control-inline {{type}}{{required}} is-invalid">{{content}}</div>',
];
?>
<?= $this->Form->create(null, [
    'class' => 'form-inline',
    'valueSources' => 'query',
    // 'align' => 'inline',
]) ?>

<?= $this->Form->control('Toggle this switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch15',
    'id' => 'customSwitch15',
    'custom' => true,
    'inline' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->control('Disabled switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch16',
    'id' => 'customSwitch16',
    'custom' => true,
    'inline' => true,
    'disabled' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->end() ?>

custom switch(helper use) horizontal

PHP(ctp)

<?php
$templates = [
    'customCheckboxFormGroup' => '<div class="offset-md-2 col-md-10"><div class="custom-control
       custom-switch">{{input}}{{label}}</div>{{error}}{{help}}</div>',
];
?>
<?= $this->Form->create(null, [
    'valueSources' => 'query',
    'align' => 'horizontal',
]) ?>

<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('Toggle this switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch17',
    'id' => 'customSwitch17',
    'custom' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->control('Disabled switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch18',
    'id' => 'customSwitch18',
    'custom' => true,
    'disabled' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

custom switch(helper use) horizontal

PHP(ctp)

<?php
$templates = [
    'customCheckboxFormGroup' => '<div class="offset-md-2 col-md-10"><div class="custom-control
       custom-switch switch-md">{{input}}{{label}}</div>{{error}}{{help}}</div>',
];
?>
<?= $this->Form->create(null, [
    'valueSources' => 'query',
    'align' => 'horizontal',
]) ?>

<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('Toggle this switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch19',
    'id' => 'customSwitch19',
    'custom' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->control('Disabled switch element', [
    'type' => 'checkbox',
    'name' => 'customSwitch20',
    'id' => 'customSwitch20',
    'custom' => true,
    'disabled' => true,
    'class' => ' switch',
    'hiddenField' => false,
    'templates' => $templates,
]);?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

switch-md用のスタイルシート

CSS

@charset "utf-8";
/* switch */
.custom-control.custom-switch.switch-md {
  padding-left: calc(calc(calc(1.9375rem * .92) * 2) + 2px);
}
.custom-switch.switch-md input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.custom-switch.switch-md input + label {
  display: inline-block;
}
.custom-switch.switch-md input + .custom-control-label {
  min-width: calc(calc(1.9375rem * .92) * 2);
  height: calc(1.9375rem * .8);
  line-height: calc(1.9375rem * .8);
  /*text-indent: calc(calc(calc(0.5rem * .8) * 2) + .5rem);*/
}
.custom-switch.switch-md input + .custom-control-label::before {
  top: 0px;
  left: calc(calc(calc(-1.9375rem * .92) * 2) - 2px);
  width: calc(calc(1.9375rem * .8) * 2);
  height: calc(1.9375rem * .8);
  border-radius: 1.9rem;
}
.custom-switch.switch-md input + .custom-control-label::after {
  top: 2px;
  left: calc(calc(-1.9375rem * .92) * 2);
  width: calc(calc(1.9375rem * .8) - calc(2px * 2));
  height: calc(calc(1.9375rem * .8) - calc(2px * 2));
  border-radius: 50%;
}
.custom-switch.switch-md .custom-control-input:checked ~ .custom-control-label::after {
  -webkit-transform: translateX(1.58rem);
  transform: translateX(1.58rem);
}

.custom-control.custom-control-inline.custom-switch {
  justify-content: flex-start;
  /*padding-left: 0;*/
}
.custom-control.custom-control-inline.custom-switch > .custom-control-label {
  /*padding-left: calc(calc(1.9375rem * .9) * 2);*/
  /*width: calc(100% - calc(calc(1.9375rem * .9) * 2));*/
}
.sw-primary.custom-control-input ~ .custom-control-label::before {
    border-color: #007bff;
}
.sw-secondary.custom-control-input ~ .custom-control-label::before {
    border-color: #6c757d;
}
.sw-success.custom-control-input ~ .custom-control-label::before {
    border-color: #28a745;
}
.sw-info.custom-control-input ~ .custom-control-label::before {
    border-color: #17a2b8;
}
.sw-warning.custom-control-input ~ .custom-control-label::before {
    border-color: #ffc107;
}
.sw-danger.custom-control-input ~ .custom-control-label::before {
    border-color: #dc3545;
}

.sw-primary.custom-control-input:checked~.custom-control-label::before {

}
.sw-secondary.custom-control-input:checked~.custom-control-label::before {
    background-color: #6c757d;
}
.sw-success.custom-control-input:checked~.custom-control-label::before {
    background-color: #28a745;
}
.sw-info.custom-control-input:checked~.custom-control-label::before {
    background-color: #17a2b8;
}
.sw-warning.custom-control-input:checked~.custom-control-label::before {
    background-color: #ffc107;
}
.sw-danger.custom-control-input:checked~.custom-control-label::before {
    background-color: #dc3545;
}