Borales
10 years ago
2 changed files with 0 additions and 167 deletions
@ -1,69 +0,0 @@
|
||||
Віджети Bootstrap |
||||
================= |
||||
|
||||
> Примітка: Цей розділ знаходиться на стадії розробки. |
||||
|
||||
З коробки Yii включає підтримку розмітки [Bootstrap 3](http://getbootstrap.com/) та компонентів фреймворку |
||||
(також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити |
||||
процес розробки клієнтської частини сайту. |
||||
|
||||
Ядро Bootstrap представлене двома частинами: |
||||
|
||||
- Основи CSS, такі як система макету сітки, типографія, допоміжні класи і адаптивні утиліти. |
||||
- Готові до використання компоненти, такі як форми, меню, нумерація сторінок (pagination), модальні вікна, вкладки (tabs) і т.д. |
||||
|
||||
Основи |
||||
------ |
||||
|
||||
Yii не загортає основи bootstrap в код PHP, оскільки в цьому випадку, сам по собі HTML є дуже простим. |
||||
Ви можете знайти детальну інформацію про використання основ на [сайті документації bootstrap](http://getbootstrap.com/css/). |
||||
Проте Yii забезпечує зручний спосіб підключення ресурсів bootstrap до ваших сторінок за допомогою всього одного рядка до |
||||
файла `AppAsset.php`, розташованого в каталозі `@app/assets`: |
||||
|
||||
```php |
||||
public $depends = [ |
||||
'yii\web\YiiAsset', |
||||
'yii\bootstrap\BootstrapAsset', // цей рядок |
||||
]; |
||||
``` |
||||
|
||||
Використання bootstrap через менеджер ресурсів Yii дозволяє мінімізувати свої ресурси і обʼєднати із вашими власними |
||||
ресурсами коли це необхідно. |
||||
|
||||
Віджети Yii |
||||
----------- |
||||
|
||||
Найбільш складні компоненти bootstrap загорнуті в Yii віджети, щоб забезпечити більш надійний синтаксис та інтегрувати його з |
||||
можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap`: |
||||
|
||||
- [[yii\bootstrap\ActiveForm|ActiveForm]] |
||||
- [[yii\bootstrap\Alert|Alert]] |
||||
- [[yii\bootstrap\Button|Button]] |
||||
- [[yii\bootstrap\ButtonDropdown|ButtonDropdown]] |
||||
- [[yii\bootstrap\ButtonGroup|ButtonGroup]] |
||||
- [[yii\bootstrap\Carousel|Carousel]] |
||||
- [[yii\bootstrap\Collapse|Collapse]] |
||||
- [[yii\bootstrap\Dropdown|Dropdown]] |
||||
- [[yii\bootstrap\Modal|Modal]] |
||||
- [[yii\bootstrap\Nav|Nav]] |
||||
- [[yii\bootstrap\NavBar|NavBar]] |
||||
- [[yii\bootstrap\Progress|Progress]] |
||||
- [[yii\bootstrap\Tabs|Tabs]] |
||||
|
||||
*Використання .less файлів в Bootstrap* |
||||
------------------------------------------- |
||||
|
||||
Якщо ви хочете включити [CSS Bootstrap напряму до ваших less файлів](http://getbootstrap.com/getting-started/#customizing) |
||||
вам необхідно відключити завантаження оригінальних bootstrap css файлів. |
||||
Ви можете зробити це, встановивши CSS властивість [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] порожньою. |
||||
Для цього вам необхідно налаштувати [компонент додатка](structure-application-components.md) `assetManager` наступним чином: |
||||
|
||||
```php |
||||
'assetManager' => [ |
||||
'bundles' => [ |
||||
'yii\bootstrap\BootstrapAsset' => [ |
||||
'css' => [], |
||||
] |
||||
] |
||||
] |
||||
``` |
||||
@ -1,98 +0,0 @@
|
||||
Віджети jQuery UI |
||||
================= |
||||
|
||||
> Примітка: Цей розділ знаходиться на стадії розробки. |
||||
|
||||
Yii включає підтримку бібліотеки [jQuery UI](http://api.jqueryui.com/) в офіційному розширенні. jQuery UI є |
||||
зберігачем набору інтерфейсів користувача, який забезпечує роботу з ефектами, віджетами і темами, що побудований |
||||
на основі JavaScript-бібілотеки jQuery. |
||||
|
||||
Встановлення |
||||
------------ |
||||
|
||||
Кращим способом для встановлення даного розширення є встановлення через [composer](http://getcomposer.org/download/). |
||||
|
||||
Запустіть |
||||
|
||||
``` |
||||
php composer.phar require --prefer-dist yiisoft/yii2-jui "*" |
||||
``` |
||||
|
||||
або додайте |
||||
|
||||
``` |
||||
"yiisoft/yii2-jui": "*" |
||||
``` |
||||
|
||||
в потрібний розділ `composer.json` файлу. |
||||
|
||||
Віджети Yii |
||||
----------- |
||||
|
||||
Найбільш складні компоненти jQuery UI загорнуті в Yii віджети, щоб запезпечити більш надійний синтаксис та інтегрувати |
||||
з можливостями фреймворку. Всі віджети належать до простору імен `\yii\jui`: |
||||
|
||||
- [[yii\jui\Accordion|Accordion]] |
||||
- [[yii\jui\AutoComplete|AutoComplete]] |
||||
- [[yii\jui\DatePicker|DatePicker]] |
||||
- [[yii\jui\Dialog|Dialog]] |
||||
- [[yii\jui\Draggable|Draggable]] |
||||
- [[yii\jui\Droppable|Droppable]] |
||||
- [[yii\jui\Menu|Menu]] |
||||
- [[yii\jui\ProgressBar|ProgressBar]] |
||||
- [[yii\jui\Resizable|Resizable]] |
||||
- [[yii\jui\Selectable|Selectable]] |
||||
- [[yii\jui\Slider|Slider]] |
||||
- [[yii\jui\SliderInput|SliderInput]] |
||||
- [[yii\jui\Sortable|Sortable]] |
||||
- [[yii\jui\Spinner|Spinner]] |
||||
- [[yii\jui\Tabs|Tabs]] |
||||
|
||||
В наступних розділах розглядаються деякі приклади використання цих віджетів. |
||||
|
||||
Обробка вводу дати з допомогою DatePicker <span id="datepicker-date-input"></span> |
||||
----------------------------------------- |
||||
|
||||
Збирання вводу дат від користувачів можливо виконати даже зручним способом, завдяки віджету [[yii\jui\DatePicker|DatePicker]]. |
||||
В наступному прикладі ми будемо використовувати модель `Task`, яка має атрибут `deadline`, який повинен бути встановлений |
||||
користувачем, використовуючи [ActiveForm](input-forms.md). Значення атрибуту буде збережено в якості мітки часу Unix в базі даних. |
||||
|
||||
В цій ситуації є 3 компоненти, що взаємодіють між собою: |
||||
|
||||
- Віджет [[yii\jui\DatePicker|DatePicker]], який використовується в формі для відображення поля введення атрибуту моделі. |
||||
- Компонент додатку [formatter](output-formatter.md), який відповідає за формат дати, що відображається користувачеві. |
||||
- [DateValidator](tutorial-core-validators.md#date), який перевіряє що ввів користувач і конвертує в мітку часу Unix. |
||||
|
||||
Спершу ми додамо поле вибору дати до форми, використовуючи метод [[yii\widgets\ActiveField::widget()|widget()]] поле форми: |
||||
|
||||
```php |
||||
<?= $form->field($model, 'deadline')->widget(\yii\jui\DatePicker::className(), [ |
||||
// якщо ви використовуєте bootstrap, наступний рядок буде встановлювати правильний стиль для поля вводу |
||||
'options' => ['class' => 'form-control'], |
||||
// ... ви можете налаштувати більше властивостей DatePicker тут |
||||
]) ?> |
||||
``` |
||||
|
||||
Другим кроком буде налаштування валідатора дати в [методі моделі rules()](input-validation.md#declaring-rules): |
||||
|
||||
```php |
||||
public function rules() |
||||
{ |
||||
return [ |
||||
// ... |
||||
|
||||
// забезпечить збереження порожних значень в базі данних у вигляді NULL |
||||
['deadline', 'default', 'value' => null], |
||||
|
||||
// валідація дати і перезапис `deadline` з міткою часу Unix |
||||
['deadline', 'date', 'timestampAttribute' => 'deadline'], |
||||
]; |
||||
} |
||||
``` |
||||
|
||||
Ми можемо також додати [стандартні значення фільтру](input-validation.md#handling-empty-inputs), щоб забезпечити збереження порожніх |
||||
значень в базі данних у вигляді `NULL`. Ви можете пропустити цей крок, якщо значення дати є [обовʼязковим](tutorial-core-validators.md#required). |
||||
|
||||
Формат за замовчуванням для вибору дати і валідації значення дати міститься в `Yii::$app->formatter->dateFormat`, таким чином, |
||||
ви можете використовувати ці властивості, щоб налаштувати формат дати для всього додатку. |
||||
Щоб змінити формат дати ви повинні налаштувати [[yii\validators\DateValidator::format]] та [[yii\jui\DatePicker::dateFormat]]. |
||||
Loading…
Reference in new issue