Как создать компонент, который имеет 50% цвета фона в Vue - PullRequest
Новая
       42

Как создать компонент, который имеет 50% цвета фона в Vue

0 голосов
/ 06 июня 2019

Я работаю над начальной загрузкой. Мне нужно построить компонент, который имеет 50% от background-color и оставить пустым (по вертикали). Компонент должен занимать 100% экрана после панели навигации, и он должен иметь 50%. Этот компонент будет иметь различные подкомпоненты.

Как-то так, Но прямая линия, разделяющая их. (как и красная линия)

enter image description here

Я попытался добавить высоту и цвет фона вручную. Это кое-как, работает. Но я собираюсь сделать это в bootstrap-vue.

Вот основной код: CardGrouper.vue: 

<template lang="html">

  <div class="h-100" >
    <h1>card-grouper Component</h1>
    <div class="h-50" style=" background-color: #C8544F">
      Height 50%
    </div>
  </div>

</template>

<script lang="js">
  export default  {
    name: 'CardGrouper',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >

</style>

Я также пробовал разные классы начальной загрузки, чтобы добавить 50% фона. Но это не сработало.

Как это сделать, используя Bootstrap-vue и vue. В частности, я ищу чистое решение для начальной загрузки. так как я разрабатываю адаптивное приложение.

Спасибо за помощь

1 Ответ

1 голос
/ 07 июня 2019

Вы можете сделать это, используя линейные градиенты: 

.full{
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom, blue 50%, yellow 50%);
}
<div class="full"></div>
...