Программирование и дизайн

{"ops":[{"insert":"Прозрачная форма у которой меняется цвет границы, при активации, "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форма 7 (Посмотреть...)"},{"insert":":\n<form class=\"bforma\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"text\" class=\"bfild\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"bbut\" type=\"submit\"></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Стили формы 7 :\n<style> /* Стили для формы 7 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bforma{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 300px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 0 auto;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild, .bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" outline: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 100%;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding-left: 15px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: 3px solid #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-webkit-input-placeholder {color:#fff; opacity:1;}/* webkit */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-moz-placeholder {color:#fff; opacity:1;}/* Firefox 19+ */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-moz-placeholder {color:#fff; opacity:1;}/* Firefox 18- */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-ms-input-placeholder {color:#fff; opacity:1;}/* IE */"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":".bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" cursor: pointer;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bbut:before{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" content: \"\\f002\";"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-family: FontAwesome;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-size: 16px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:focus{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: yellowgreen;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}

{"ops":[{"insert":"Давайте рассмотрим другие варианты оформления, например, если у вас подключены "},{"attributes":{"bold":true},"insert":"Bootstrap"},{"insert":" и "},{"attributes":{"bold":true},"insert":"Font-awesome"},{"insert":", вы можете сделать форму поиска, как на моем сайте.\n<form action=\"\" method=\"get\" class=\"input-group\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"search\" name=\"search\" class=\"form-control search\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <span class=\"input-group-btn\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"btn btn-default\" type=\"submit\"><i class=\"fa fa-search\"></i></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </span>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавим стили и получим "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 4 (Посмотреть...):"},{"insert":"\n<style> /*Стили для формы 4*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 0; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 250px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 45px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 2px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: double 2px transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: linear-gradient(white, white), radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -webkit-linear-gradient(white, white), -webkit-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -moz-linear-gradient(white, white), -moz-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -ms-linear-gradient(white, white), -ms-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -o-linear-gradient(white, white), -o-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-origin: border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-clip: content-box, border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 0 0 0 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" text-indent: 20px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .btn-default{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 30px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #fff; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 2px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}

{"ops":[{"insert":"Для начала у вас уже должен быть готовый проект Laravel, хотя бы с одной страницей на которой мы разместим кнопку открытия нашего модального окна.\nУстанавливаем Livewire\ncomposer require livewire/livewire"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Устанавливаем компонент LivewireUI Modal\ncomposer require livewire-ui/modal"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Публикуем модульный шаблон\nphp artisan vendor:publish --tag=livewire-ui-modal-views"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Создаем модель\nphp artisan make:livewire ModalContact"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"white"},"insert":" "},{"insert":"\nРедактируем "},{"attributes":{"bold":true},"insert":"ModalContact"},{"insert":" в "},{"attributes":{"bold":true},"insert":"app/Http/Livewire"},{"insert":"\n\n"},{"attributes":{"color":"yellow"},"insert":"<?php"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" namespace App\\Http\\Livewire;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" use LivewireUI\\Modal\\"},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class ModalContact extends "},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"{"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   public function render()"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   {"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       return view('livewire.modal-contact');"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   }"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"}"},{"insert":"\n \nВносим редактирование в "},{"attributes":{"bold":true},"insert":"modal.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/vendor/livewire-ui-modal "},{"insert":"\n"},{"attributes":{"bold":true},"insert":" "},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"<div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @isset($jsPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <*script>{!! file_get_contents($jsPath) !!}</*script>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @isset($cssPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <*style>{!! file_get_contents($cssPath) !!}</*style>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-data=\"LivewireUIModal()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-init=\"init()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:close.stop=\"setShowPropertyTo(false)\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.escape.window=\"closeModalOnEscape()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.tab.prevent=\"$event.shiftKey || nextFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.shift.tab.prevent=\"prevFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       class=\"fixed inset-0 z-10 overflow-y-auto\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"      "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"display: none; margin-top: 0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <div class=\"flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-on:click=\"closeModalOnClickAway()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-start=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-end=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-start=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-end=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               class=\"fixed inset-0 transition-all transform\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               <div class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <span class=\"hidden sm:inline-block sm:align-middle sm:h-screen\" aria-hidden=\"true\">&#8203;</span>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-show=\"show && showActiveComponent\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-start=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-end=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-start=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-end=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-bind:class=\"modalWidth\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               class=\"inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               id=\"modal-container\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"              "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"margin-bottom: 250px; z-index: 1000000000000000000;\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @forelse($components as $id => $component)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                   <div x-show.immediate=\"activeComponent == '{{ $id }}'\" x-ref=\"{{ $id }}\" wire:key=\"{{ $id }}\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                       @livewire($component['name'], $component['attributes'], key($id))"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                   </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @empty"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @endforelse"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"</div>"},{"insert":"\n \nРедактируем стили для корректного отображения модульного окна (в зависимости от размеров окна стили могут меняться)\nИ создаем само окно "},{"attributes":{"bold":true},"insert":"modal-contact.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/livewire "},{"insert":"в котором мы можем разместить все что нам нужно.\n \nТакже мы можем создавать сколько угодно модульных окон создавая другие модели\nphp artisan make:livewire ModalName"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Теперьнам осталось только разместить кнопку на странице\n<button class=\" \" onclick=\"Livewire.emit('openModal', 'modal-contact')\">Модальное окно</button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Удачи!\n"}]}

{"ops":[{"attributes":{"underline":true,"bold":true},"insert":"(Начало в предыдущей статье."},{"attributes":{"bold":true},"insert":") "},{"insert":"Следующее свойство для скрытия элемента visibility. Если установить значение "},{"attributes":{"bold":true},"insert":"hidden"},{"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"bold":true},"insert":"opacity"},{"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"bold":true},"insert":"transition"},{"insert":". Дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство "},{"attributes":{"bold":true},"insert":"visibility: visible"},{"insert":". \nПроведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer, и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока. \n"}]}