Skip to content

Instantly share code, notes, and snippets.

@5pid3rm3n
Created September 6, 2019 21:32
Show Gist options
  • Save 5pid3rm3n/93dd843a7e5713d391f7d9ff973f72b7 to your computer and use it in GitHub Desktop.
Save 5pid3rm3n/93dd843a7e5713d391f7d9ff973f72b7 to your computer and use it in GitHub Desktop.
Vuetify
<div id="app">
<v-app>
<v-content>
<v-container grid-list-sm>
<v-layout row wrap>
<v-flex md9 xs8 offset-xs2 v-for="letter in this.string">
<v-card elevation="18" color="transparent" hover>
<v-card-text id='letters' class="text-xs-center headline">
{{letter}}
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
new Vue({
el: "#app",
data: () => ({
string: [
"あ",
"ぶ",
"で",
"ふ",
"ぐ",
"ほ",
"ゆ",
"じ",
"る",
"む",
"の,",
"ぷ",
"る",
"す",
"つ",
"ゔ",
"わ",
"く",
"す",
"ゆ"
]
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.js"></script>
#app {
background: #8a2387; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#f27121,
#e94057,
#8a2387
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#f27121,
#e94057,
#8a2387
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#letters {
transition: all ease-in-out 0.4s;
&:hover {
color: white;
transform: scale(1.1)
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment