I use DevExtreme with Vue.js
I am working on converting the Vuetify UI component to the DevExtreme UI component
I want to add a pop-up in the page, but the pop-up doesn't work normally.
A pop-up tag was created, but the content was empty inside the tag.
I tried many ways, but I couldn't find a solution. help me
This is tag state
<div data-app="true" class="v-application--is--ltr theme--light" id="app">
<div class="v-application--wrap"> ...page content... </div>
<!-- popup -->
<div>
<div class="dx-overlay dx-popup dx-widget dx-visibility-change-handler">
<div class="dx-overlay-content dx-popup-nomal" tabindex="0" style="width: 800px; height: 600px;">
<div class="dx-popup-content"></div>
</div>
</div>
</div>
</div>
This is code
<dx-popup v-model="isOpen" :visible="isOpen" :width="width" :height="height" :show-title="false" :show-close-button="false">
<div ref="dialog" class="u-dialog">
<u-layout height="*">
<u-layout ref="dialogTitle" class="u-dialog-header">
<div class="pa-0 text-right">
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen_exit</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="!isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent" #click="closeButtonClick()">
<v-icon color="white">close</v-icon>
</v-btn>
</div>
</u-layout>
<u-layout ref="dialogContent" height="*" class="u-dialog-content">
<component ref="comp" :is="loader" :param="paramData" :code-map="popup.codeMap" #resolve="resolve" #reject="reject"/>
</u-layout>
</u-layout>
</div>
</dx-popup>
Related
I have a card that displays a "toolbar" whenever I hover over it
Reproduction link
<template>
<v-app>
<v-main>
<div class="py-12"></div>
<v-container>
<v-menu open-on-hover location="top" transition="slide-y-transition">
<template v-slot:activator="{ props }">
<v-card v-bind="props" variant="outlined">
<v-card-title>Card goes here</v-card-title>
</v-card>
</template>
<v-card variant="outlined" class="ml-4">
<v-card-actions>
<v-btn icon="mdi-link-variant-minus" size="small" color="error" />
<v-btn icon="mdi-arrow-expand" size="small" color="primary" class="ml-4" />
</v-card-actions>
</v-card>
</v-menu>
</v-container>
</v-main>
</v-app>
</template>
But this "toolbar" should not expand to full width. I want it to be like a tab, e.g.
Adding the d-inline-block helper class to v-card-actions or to its parent v-card didn't help. I'm basically looking for
<div style="background:red">I don't want this</div>
<div style="display: inline-block; background:red; margin-top: 24px">I want this</div>
width: fit-content; for the toolbar parent block might solve it.
<div fxLayout='row' fxLayoutGap='10px' >
<button mat-raised-button class="mapButton" [disabled]="!isMapLoaded" (click)="optionsView=true">
<mat-icon svgIcon="measureOption"></mat-icon>
</button>
<div fxLayout='row' fxLayoutGap='10px' [ngClass]="optionsView? 'optionList1':'optionList'"
(mouseleave)="optionsView=false">
<div>
<mat-button-toggle #toolMeasureLine value="measure_line" matTooltip="Strecke messen" [disabled]="!isMapLoaded" (change)="onMeasureValChange($event.value)" aria-label="Distanz messen" class="toggleButton">
<mat-icon class="measureButtonLine" >lm</mat-icon>
</mat-button-toggle>
</div>
<div >
<mat-button-toggle #toolMeasureArea value="measure_area" matTooltip="Fläche messen" [disabled]="!isMapLoaded" (change)="onMeasureValChange($event.value)" aria-label="Fläche messen" class="toggleButton">
<mat-icon class="measureButtonPolygon">am</mat-icon>
</mat-button-toggle>
</div>
</div>
</div>
how can i get if i click the mat-button-toggle and the icon in mat-icon at top change?
and after i click the mat-icon again become normal again.
any ideas?
how can i center this edit icon even when one address string is longer than the other?
This is the column I'm having this problem
<el-table-column
prop="address"
label="Address">
<template slot-scope="scope">
{{scope.row.address}}
<el-button
type="primary"
icon="el-icon-edit"
circle
size="mini"
style="margin-left: 55px"
#click="open(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
Here is the complete code:
https://jsfiddle.net/xhbzpvas/
<div style="display: flex">
<address style="flex-grow: 1"/>
<icon/>
</div>
Is it possible to align element on the same height as the v-card-title in the card component of vuetify?
Currentl when using class="float-right" the element goes to the right but it is line below the title. I would like for it to be at the same level.
Here is the codepen:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
width="400"
>
<!-- Top row -->
<v-card-title>Cafe Badilico</v-card-title>
<button class="float-right">click me</button>
<!-- End of top row -->
<!-- Put components here -->
<v-card-title >
News
</v-card-title>
<v-list-item dense
>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Header</v-list-item-title>
<v-list-item-subtitle>Subheader</v-list-item-subtitle>
<v-list-item-subtitle>2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-card-title >
News
</v-card-title>
<v-list-item dense>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title >Header</v-list-item-title>
<v-list-item-subtitle >Subheader</v-list-item-subtitle>
<v-list-item-subtitle >2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card>
</v-app>
</div>
You can move the button into the title and use the v-spacer component:
<v-card-title>
Cafe Badilico
<v-spacer></v-spacer>
<button>click me</button>
</v-card-title>
https://codepen.io/El_Matella/pen/mdJrKNE
If you don't want it to be part of the title component, you can also use a flex container:
<div class="d-flex align-center justify-space-between">
<v-card-title>
Cafe Badilico
</v-card-title>
<button>click me</button>
</div>
https://codepen.io/El_Matella/pen/ZEGpjEq
I am starting my journey with Angular Material and I'm stuck on one thing.
Expansion Panel is not working (I see this panel but I can't open/close it). I found out that it's not working because of "nav component" (created with material) which I am importing in this component (when I delete "nav component" expansion panel works).
And yes, I have used
import {MatExpansionModule} from '#angular/material/expansion';
This is component with Expansion Panel
<app-navigation-bar></app-navigation-bar>
<section id="faq">
<h2>FAQ</h2>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
</section>
And here is code of the "nav component"
<section id="navigation-bar">
<mat-drawer-container class="example-container">
<mat-drawer class="left-nav" mode="side" opened>
<button class="nav-button"><i class="far fa-play-circle"></i></button>
<button class="nav-button"><i class="fab fa-500px"></i></button>
<button class="nav-button"><i class="fas fa-broadcast-tower"></i></button>
<button class="nav-button"><i class="fas fa-film"></i></button>
<button class="nav-button"><i class="fas fa-microphone"></i></button>
<button [routerLink]="['/faq']" routerLinkActive="router-link-active" class="nav-button"><i class="fas fa-info"></i></button>
<button [routerLink]="['']" routerLinkActive="router-link-active" class="nav-button" id="exit"><i class="far fa-times-circle"></i></button>
</mat-drawer>
<mat-drawer-content class="right">
</mat-drawer-content>
</mat-drawer-container>
</section>
And here is pic of it
I figured it out. When you are making component just for an element on site, make sure it doesn't have width: 100%; it makes foil effect on the site (you can't click any button because all content is under this component).