CSS 및 Vuejs로 Hexagon Map 만들기

19456 단어 Vue.jsCSS

만든 물건



참조 사이트


CSS Hexagon Grid - codepen
See the Pen CSS Hexagon Grid by Eric Cornelissen ( @ericornelissen )
on CodePen .
  • 기본적으로 상술한 코드를 사용했다

제작 방법


코드는 Vue CLI로 제작된 App입니다.모두 vue에 쓰기

최종 App.다음과 같이



App.vue

<template>
  <div id="hexagonA-container">
    <div v-for = "i in 150" v-bind:key="i.id" class = "hexagonA">
      <span>{{ i }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

$hex-width: 100px; 
$hex-between: 10px;

/* Other hexagon dimentions */
// どれが，hexのどの長さに対応するかを理解すること
$hex-height: $hex-width / 1.73 /* sqrt(3) */;
$hex-margin: $hex-width / 2;
$hex-border: $hex-margin / 1.73 /* sqrt(3) */;
$hex-transition: all .2s ease;

/* Colors */
$color-hex-default: #000000;
$color-hex-hover:   #FFFFFF;
$color-sass:        #CC6699;

#hexagonA-container {
  display: grid;
  grid-template-columns: $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width;
  grid-auto-rows: $hex-height + $hex-border;
  grid-gap: $hex-between $hex-between;
  padding-bottom: $hex-border;
}

.hexagonA {
  align-items: center;  //センターに配置？http://www.htmq.com/css/align-items.shtml
  background-color: $color-hex-default;
  cursor: pointer;  //リンクカーソル
  display: flex;  //要素が並列になる？ https://mamewaza.com/support/blog/howto-use-flex.html
  fill: white;
  height: $hex-height;
  justify-content: center;  //https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
  margin: $hex-border 0;
  position: relative;
  transition: $hex-transition;
  width: $hex-width;
}
.hexagonA span {
  width: 100%;
  height: $hex-height * 0.9;
  line-height: $hex-height;
  color: rgb(255, 255, 255);
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
}

.hexagonA:after,
.hexagonA:before{
  // border-left,border-rightは三角形の横幅
  border-left: $hex-margin solid transparent;
  border-right: $hex-margin solid transparent; 
  content: "";
  left: 0;
  position: absolute;
  transition: $hex-transition;
  width: 0;
}
.hexagonA:after {
  //border-topは三角形の縦幅
  border-top: $hex-border solid $color-hex-default;
  top: 100%;
  width: 0;
}
.hexagonA:before {
  border-bottom: $hex-border solid $color-hex-default;
  bottom: 100%;
}
.hexagonA:hover {
  background-color: $color-hex-hover;
}
.hexagonA:hover:after,
.hexagonA:hover:before {
  border-top-color: $color-hex-hover;
  border-bottom-color: $color-hex-hover;
}
// https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
.hexagonA:nth-child(32n + 17), 
.hexagonA:nth-child(32n + 18),
.hexagonA:nth-child(32n + 19),
.hexagonA:nth-child(32n + 20),
.hexagonA:nth-child(32n + 21), 
.hexagonA:nth-child(32n + 22),
.hexagonA:nth-child(32n + 23),
.hexagonA:nth-child(32n + 24),
.hexagonA:nth-child(32n + 25), 
.hexagonA:nth-child(32n + 26),
.hexagonA:nth-child(32n + 27),
.hexagonA:nth-child(32n + 28),
.hexagonA:nth-child(32n + 29), 
.hexagonA:nth-child(32n + 30),
.hexagonA:nth-child(32n + 31),
.hexagonA:nth-child(32n + 32) {
  margin-left: $hex-width / 2 + $hex-between / 2;
}
</style>


아마 여분의 코드도 섞여 있을 거예요.

육각형의 제작 방법


.hexagonA {
  align-items: center;  //センターに配置？http://www.htmq.com/css/align-items.shtml
  background-color: $color-hex-default;
  cursor: pointer;  //リンクカーソル
  display: flex;  //要素が並列になる？ https://mamewaza.com/support/blog/howto-use-flex.html
  fill: white;
  height: $hex-height;
  justify-content: center;  //https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
  margin: $hex-border 0;
  position: relative;
  transition: $hex-transition;
  width: $hex-width;
}
.hexagonA:after,
.hexagonA:before{
  // border-left,border-rightは三角形の横幅
  border-left: $hex-margin solid transparent;
  border-right: $hex-margin solid transparent; 
  content: "";
  left: 0;
  position: absolute;
  transition: $hex-transition;
  width: 0;
}
.hexagonA:after {
  //border-topは三角形の縦幅
  border-top: $hex-border solid $color-hex-default;
  top: 100%;
  width: 0;
}
.hexagonA:before {
  border-bottom: $hex-border solid $color-hex-default;
  bottom: 100%;
}

사각과 삼각형을 잘 조합했다?


아래 보도 컵을 만드는 곳을 참고하세요.

참조:[CSS 애니메이션] ● ● CSS로 고구마 전분을 만들어 가볍게 띄우기 ● ● Qiita


육각형 정렬


#hexagonA-container {
  display: grid;
  grid-template-columns: $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width;
  grid-auto-rows: $hex-height + $hex-border;
  grid-gap: $hex-between $hex-between;
  padding-bottom: $hex-border;
}

여기랑 여기.
.hexagonA:nth-child(32n + 17), 
.hexagonA:nth-child(32n + 18),
.hexagonA:nth-child(32n + 19),
.hexagonA:nth-child(32n + 20),
.hexagonA:nth-child(32n + 21), 
.hexagonA:nth-child(32n + 22),
.hexagonA:nth-child(32n + 23),
.hexagonA:nth-child(32n + 24),
.hexagonA:nth-child(32n + 25), 
.hexagonA:nth-child(32n + 26),
.hexagonA:nth-child(32n + 27),
.hexagonA:nth-child(32n + 28),
.hexagonA:nth-child(32n + 29), 
.hexagonA:nth-child(32n + 30),
.hexagonA:nth-child(32n + 31),
.hexagonA:nth-child(32n + 32) {
  margin-left: $hex-width / 2 + $hex-between / 2;
}

여기

참조:CSS Grid Layout！-Qiita


참조:MDN web docs :nth-child()


이 점을 참고하여

강제 설정
더 좋은 방법이 있을 것 같아요.
알려주세요.

육각형을 놓다


<div id="hexagonA-container">
  <div v-for = "i in 150" v-bind:key="i.id" class = "hexagonA">
    <span>{{ i }}</span>
  </div>
</div>

Vue의 느낌, 바로 여기


공식 참조

참조:Vue.js 목록 렌더링


감상


특별히 뭘 하는 것은 아니지만 한번 해 보았다
더 효율적인 방법이 있을 것 같은데...


조언이 있으면 꼭 해야 돼요.p>
function object 연구의 16listN 분석
localStorage 캐시 도구 클래스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage