반응형
Vuetify v-tabs v-tab 항목 오버플로 창 너비
메인 앱에서 라우팅하는 Vue 컴포넌트가 있는데 윈도우 크기를 조정하면 v-tab-tem이 윈도우 너비(사이드 스크롤 바도 아님)를 넘어 확장됩니다.궁금한 점은 라우터 뷰가 앱의 폭(70%)을 존중하고 컴포넌트로 라우팅될 때 앱의 폭을 초과하지 않도록 하려면 어떻게 해야 하는가입니다.
<template>
<v-container>
<v-tabs vertical center-active color="light-green darken-1">
<v-tab>Multi-Model Ensemble</v-tab>
<v-tab>Individual Models</v-tab>
<v-tab>PM2.5 evaluation</v-tab>
<v-tab>ICAP Smoke AOD</v-tab>
<v-tab>Fire Danger Risk</v-tab>
<v-tab>Fire Weather Index</v-tab>
<v-tab>Sub seasonal outlook</v-tab>
<v-tab>Geomet Demo</v-tab>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - Multi-Model Forecast Ensemble
</v-card-title>
<v-card-subtitle>
Multi-Model ensemble
</v-card-subtitle>
<v-container fluid>
<v-row align="center" justify="center">
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_Avg.gif"
transition="scale-transition"
width="800"/>
</v-card>
<v-card width="45%">
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_Ext.gif"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
<v-row align="center" justify="center">
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_Med.gif"
transition="scale-transition"
width="800"/>
</v-card>
<v-card width="45%">
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_StDev.gif"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
</v-container>
<v-card-text>
The animations show a forecast of up to 48 hours at 3-hourly intervals.
The multi-model products have been generated from various atmospheric chemical and/or aerosol transport models which are represented using a common geographical domain and spatial resolution.
There are two products describing centrality (multi-model median and mean) and two products describing the spread (standard deviation and range of variation).
The multi-model ensemble regional members are ECCC FireWork and NOAA NCEP NAQFC. The global members are ECMWF IFS CAMS, FMI SILAM, JMA MASINGAR and NASA GEOS-FP.
It is important to note that different models may have very different characteristics (e.g. global or regional models, horizontal and vertical resolutions, smoke emission characteristics, physics and chemistry parameterisations, presence or absence of smoke assimilation, feedback to the meteorological model etc.) In addition, some of these predictions are experimental or produced for research purposes only. Information on the various models’ configuration can be found on their respective websites and in the literature.
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - Individual Models
</v-card-title>
<v-container fluid>
<v-row align="center" justify="center">
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/gifs/RAQDPS_20200207T12Z+1-46h_northAmerica_lcc_AF.gif"
transition="scale-transition"
width="800"/>
</v-card>
<v-card width="45%">
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/gifs/CMAQ_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
<v-row align="center" justify="center">
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/gifs/CAMS_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
transition="scale-transition"
width="800"/>
</v-card>
<v-card width="45%">
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/gifs/GEOS_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
<v-row align="center" justify="center">
<v-card>
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/gifs/SILAM_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
</v-container>
<v-card-text>
<p>
The animations show a forecast of up to 48 hours at 3-hourly intervals.
</p>
<br>
<p>
The individual products have been generated from various atmospheric chemical and/or aerosol transport models which are represented using a common geographical domain and spatial resolution.
</p>
<br>
<p>
There are two products describing centrality (multi-model median and mean) and two products describing the spread (standard deviation and range of variation).
</p>
<br>
<p>
The multi-model ensemble regional members are ECCC FireWork and NOAA NCEP NAQFC. The global members are ECMWF IFS CAMS, FMI SILAM, JMA MASINGAR and NASA GEOS-FP.
</p>
<br>
<p>
It is important to note that different models may have very different characteristics (e.g. global or regional models, horizontal and vertical resolutions, smoke emission characteristics, physics and chemistry parameterisations, presence or absence of smoke assimilation, feedback to the meteorological model etc.) In addition, some of these predictions are experimental or produced for research purposes only. Information on the various models’ configuration can be found on their respective websites and in the literature.
</p>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - PM2.5 Evaluation
</v-card-title>
<v-card-text>
<p>
Multi-Model ensemble members fine particulate matter concentrations forecasts are evaluated against observations from North American networks (AirNow, CAPMoN, NAPS, etc.).
</p>
<br>
<p>
<em class="warning"> Coming soon: </em>
graphs with <a href="https://aqdb.cmc.ec.gc.ca/vaqum/">VAQUM</a> data. Talk with Yordan for <a href="http://iweb.cmc.ec.gc.ca/~afsurdv/PlotlyExp.html"> his work this summer with Plotly.</a>
</p>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - ICAP Smoke AOD
</v-card-title>
<v-card-subtitle>
ICAP Smoke Aerosol Optical Depth
</v-card-subtitle>
<v-container fluid>
<v-row align="center" justify="center">
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/gifs/icap_20200208T00Z+0-120H_smoke_aod_mean_northAmerica_lcc_Band1.gif"
transition="scale-transition"
width="800"/>
</v-card>
<v-card width="45%">
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/gifs/icap_20200208T00Z+0-120H_smoke_aod_stdv_northAmerica_lcc_Band1.gif"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
</v-container>
<v-card-text>
The animations show a forecast of up to 120 hours at 6-hourly intervals.
The International Cooperative for Aerosol Prediction (ICAP) is an international forum for aerosol forecast centres, remote sensing data providers and lead system developers to share best practices and discuss pressing issues facing the operational aerosol community. In the plots above, the ICAP Multi-Model Ensemble (MME) smoke aerosol optical depth (AOD) is used.
This product is constructed from the following aerosol forecast systems: ECMWF CAMS, NASA GEOS-FP, NRL NAAPS, and JMA MASINGAR.
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - Fire Danger Risk
</v-card-title>
<v-card-subtitle>
Fire Danger Risk Map
</v-card-subtitle>
<v-container fluid>
<v-row align="center" justify="center">
<v-card>
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/img/fdr20200207.png"
transition="scale-transition"
width="800"/>
</v-card>
<v-spacer></v-spacer>
<v-card>
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/img/legend_fdr.jpg"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
</v-container>
<v-card-text>
<p>
Fire Danger is a relative index of how easy it is to ignite vegetation, how difficult a fire may be to control, and how much damage a fire may do.
</p>
<br>
<p>
Note: These general fire descriptions apply to most coniferous forests. The national fire danger maps show conditions as classified by the provincial and territorial fire management agencies. Choice and interpretation of classes may vary between provinces. For fuel-specific fire behavior, consult the Fire Behavior Prediction maps.
</p>
<br>
<a href="https://cwfis.cfs.nrcan.gc.ca/maps/fw?type=fdr"> Link to NRCan source </a>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - Fire Weather Index
</v-card-title>
<v-card-subtitle>
Fire Weather Index Map
</v-card-subtitle>
<v-container fluid>
<v-row align="center" justify="center">
<v-card>
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/img/fwi-konstantinos.png"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
</v-container>
<v-card-text>
<p>
The Fire Weather Index is a component of the Canadian Forest Fire Weather Index (FWI) System. It is a numeric rating of fire intensity. It combines the Initial Spread Index and the Buildup Index.
</p>
<p>
The computation of FWI depends solely on meteorological conditions.
</p>
<ul style="margin-left: 2em;">
<li>
<p>
Noon temperature (Celsius)
</p>
</li>
<li>
<p>
Noon relative humidity (%)
</p>
</li>
<li>
<p>
Accumulated Precipitation over the previous 24h, at noon (in mm)
</p>
</li>
<li>
<p>
Noon wind speed (km/h)
</p>
</li>
<li>
<p>
Previous days moisture fuel indices (Fine fuel, duff moisture, and drought).
</p>
</li>
</ul>
<br>
<p>
It is suitable as a general index of fire danger throughout the forested areas of Canada.
</p>
<a href="https://cwfis.cfs.nrcan.gc.ca/maps/fw?type=fwi"> Link to NRCan source </a>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-title>
North American Regional VFSP-WAS Demo - Subseasonal Outlook
</v-card-title>
<v-card-subtitle>
Subseasonal Outlook Map
</v-card-subtitle>
<v-container fluid>
<v-row align="center" justify="center">
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/img/2020022700_054_E1_canada_I_ANOMALY@PRECIPITATION_anomaly@probability@combined@672_768.png"
transition="scale-transition"
width="800"/>
</v-card>
<v-card width="45%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="../assets/img/2020022700_054_E1_canada_I_ANOMALY@TEMPERATURE_anomaly@probability@combined@666_768.png"
transition="scale-transition"
width="800"/>
</v-card>
</v-row>
</v-container>
<v-card-text>
<p>
The monthly forecast is updated each Thursday and covers the 28 days starting on the following Monday.
</p>
<br>
<p>
The forecasted anomaly is produced from the average conditions forecasted over that period by the Global Ensemble Prediction System (GEPS).
</p>
<br>
<p>
A 20 year climatology (1998-2017) of this prediction system obtained from a reforecast is also used in the computation of the forecast anomaly.
</p>
<br>
<a href="http://collaboration.cmc.ec.gc.ca/cmc/cmoi/product_guide/docs/tech_specifications/tech_specifications_GEPS_6.0.0_e.pdf" class="bluelink"> See the GEPS6.0.0 reforecast technical note </a>
</v-card-text>
</v-card>
</v-tab-item>
<!-- <v-tab-item>
<h3>Smoke Forecasts</h3>
<v-tabs color="light-green darken-2">
<v-tab>Smoke Aerosol Optical Depth</v-tab>
<v-tab>PM<sub>10</sub> Surface Concentration</v-tab>
<v-tab>PM<sub>2.5</sub> Surface Concentration</v-tab>
<v-tab-item>
<h4>Smoke Aerosol Optical Depth</h4>
</v-tab-item>
<v-tab-item>
<h4>PM<sub>10</sub> Surface Concentration</h4>
</v-tab-item>
<v-tab-item>
<h4>PM<sub>2.5</sub> Surface Concentration</h4>
</v-tab-item>
</v-tabs>
</v-tab-item> -->
<v-tab-item>
<OpenLayersPlayroom />
</v-tab-item>
</v-tabs>
</v-container>
</template>
<script>
import OpenLayersPlayroom from './OpenLayersPlayroom'
export default {
components: {
OpenLayersPlayroom
}
}
</script>
오버플로의 원인은 다음과 같습니다.<v-img>모든 컴포넌트에 너비가 아닌 최대 너비 받침대를 설정합니다.
<v-img
alt="GIF 2"
class="shrink mr-2"
contain
src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_StDev.gif"
transition="scale-transition"
max-width="800"/>
이것은 Vuetify 팀원이 작성한 버그입니다.이 버그는 https://github.com/vuetifyjs/vuetify/issues/11397 에서 구독할 수 있습니다.
편집: 각 탭을 v-tabs가 라우팅하는 구성 요소로 구분하면 모든 문제를 해결할 수 있습니다.
<template>
<v-container>
<v-tabs vertical color="light-green darken-1">
<v-tab v-for="tab in tabsList" :key="tab.id" :to="tab.route" exact>{{ tab.name }}</v-tab>
<v-tabs-items>
<router-view/>
</v-tabs-items>
</v-tabs>
</v-container>
</template>
이 스타일을 추가하면 각 컴포넌트의 회전목마 문제가 해결됩니다.
<style scoped>
.v-carousel .v-window-item {
position: absolute;
top: 0;
width: 100%;
}
.v-carousel-item {
height: auto;
}
</style>
언급URL : https://stackoverflow.com/questions/61781278/vuetify-v-tabs-v-tab-item-overflows-window-width
반응형
'itsource' 카테고리의 다른 글
| 자바 프로그래머들은 왜 변수 이름을 "clazz"로 짓는 것을 좋아합니까? (0) | 2022.08.15 |
|---|---|
| Vuex Getter Hook(파라암 포함) (0) | 2022.08.15 |
| 수집되지 않은 참조 오류:Index.html에 vue 설정을 넣을 때 Vue가 정의되지 않음 (0) | 2022.08.15 |
| vuex 스토어에서 JSON 데이터를 사용하는 방법(웹 팩 없음) (0) | 2022.08.15 |
| Android 애플리케이션의 빌드/버전 번호는 어떻게 얻을 수 있습니까? (0) | 2022.08.15 |