neoacevedo / yii2-material
Material Design Components for Yii2
Fund package maintenance!
Other
Installs: 6
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Type:yii2-extension
Requires
- php: >=8.0
- yiisoft/yii2: ~2.0.45
Requires (Dev)
- npm-asset/rollup: ^4.28
- npm-asset/rollup--plugin-node-resolve: ^15.0
- npm-asset/rollup-plugin-styles: ^4.0
This package is auto-updated.
Last update: 2025-03-28 23:47:02 UTC
README
Donaciones:
Que sea software libre, no quiere decir que los servicios públicos lo sean.
Esta es una extensión primaria para Yii framework 2.0. Encapsula componentes de Material Design en términos de Widgets Yii.
NOTA: Material Web 3 no tiene los componentes Card
, Snackbar
, TopAppBar
ni NavigationRail
, así que se han creado desde 0 intentando seguir los lineamientos del diseño de Material 3.
Instalación
La forma preferida de instalar esta extensión es a través de composer.
Luego ejecute
php composer.phar require --prefer-dist neoacevedo/yii2-material3
o agregue
"neoacevedo/yii2-material3": "*"
a la sección require de su archivo composer.json
.
Uso
Card e Icon Buttons
<?php ... $css = <<<CSS .card { width: 192px; } .card.content { display: flex; flex-direction: column; flex: 1; justify-content: space-between; padding: 8px; gap: 16px; } CSS; $this->registerCss($css); ?> <main class="row"> <?php \neoacevedo\yii2\material\widgets\Card::begin([ 'options' => [ 'class' => 'card', 'type' => Card::MD_CARD_TYPE_FILLED ], 'actions' => [ 'icons' => [ Html::iconButton(['icon' => 'dictionary']), Html::iconButton(['icon' => 'bookmark']) ] ] ]); ?> <h5 class="md-sys-typescale-headline-small-font">Agregue su código espagueti</h5> <?php neoacevedo\yii2\material\widgets\Card::end(); ?> </main>
Material3ActiveForm y Material3ActiveField
<?php /** * @var Material3ActiveForm */ $form = Material3ActiveForm::begin([ 'id' => 'form' ]); ?> // Outlined (default) input echo $form->field($model, 'username', [ 'options' => ['class' => 'mb-3'] ])->textInput(options: ['onkeyup' => new JsExpression(expression: "if(event.key == 'Enter') { form.submit(); }")]); // Filled input echo $form->field($model, 'password', [ 'options' => ['class' => 'mb-3'] ])->passwordInput(options: ['variant' => 'filled', 'onkeyup' => new JsExpression(expression: "if(event.key == 'Enter') { form.submit(); }")]); echo $form->field($model, 'remember_me')->checkbox(); echo Html::submitButton('Iniciar sesión', ['variant' => 'filled']); <?php Material3ActiveForm::end(); ?> ?>
Dialog
<?php Dialog::begin([ 'options' => [ 'open' => true, 'no-focus-trap' => "true", 'type' => 'alert', 'quick' => true ], 'headerOptions' => [ 'showCloseButton' => true ], 'title' => 'Dialog', 'buttons' => [ Button::widget([ 'label' => 'Cancelar', 'options' => [ 'type' => Button::TYPE_TEXT, 'form' => 'form', 'value' => 'cancel', ] ]), Button::widget([ 'label' => 'Aceptar', 'options' => [ 'type' => Button::TYPE_TEXT, 'form' => 'form', 'value' => 'ok', ] ]) ] ]); ?> A simple dialog with free-form content. <?php Dialog::end(); ?>
DropdownList y List
<?php // Usando directamente el objeto. echo DropdownList::widget([ 'items' => [ '' => '', 'apple' => 'Apple', 'apricot' => 'Apricot' ], 'options' => [ 'class' => 'select', 'options' => [ '' => [ 'aria-label' => 'blank' ], 'apple' => ['selected' => true] ] ] ]); echo Lists::widget([ 'items' => [ 'Fruits', '<md-divider></md-divider>', [ 'headline' => 'Apple', 'options' => [ 'type' => Lists::ITEM_TYPE_BUTTON ] ] ], ]); // Usando la clase auxiliar Html. echo \neoacevedo\yii2\material\Html::list([ 'Fruits', [ 'label' => '', 'options' => [ 'type' => 'divider' ] ], [ 'headline' => 'Apple', 'options' => [ 'type' => 'button' ] ] ]); echo \neoacevedo\yii2\material\Html::dropDownList('name', null, [ '' => '', 'apple' => 'Apple', 'apricot' => 'Apricot' ], [ 'class' => 'select', 'options' => [ '' => [ 'aria-label' => 'blank' ], 'apple' => ['selected' => true] ] ]); ?>
Estos componentes web de Material también pueden ser usados de manera directa en el html:
<md-filled-text-field></md-filled-text-field> <md-card> ... </md-card> <md-dialog> ... </md-dialog> <md-select> <md-select-option value="1">...</md-select-option> </md-select> <md-slider></md-slider>