vue-responsive-textとは

文字サイズがヌルヌルのレスポンシブ「vue-responsive-text」で遊んでみた

 

vue-responsive-textは、エリア幅のサイズに応じてレスポンシブに文字サイズを変更するライブラリです。

 

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm i --save vue-responsive-text

yarn

yarn add vue-responsive-text

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-responsive-text.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/shwilliam/vue-responsive-text

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

import VueResponsiveText from 'vue-responsive-text'

(2)WEBページの場合

const VueResponsiveText = window.vueResponsiveText.default;

2.メソッドを設定

components に上記で取得した VueResponsiveTex を読み込ませます。

let app = new Vue({
  el: '#app',
  data: {
    msg: 'Hellow World',
    divWidth: 50
  },
  components: {
    VueResponsiveText
  }
});

3. テンプレートを準備

div の幅に合わせて <VueResponsiveText> のテキストのサイズが変更されます。
今回は divWidth で幅を変更できるようにしています。

<div id="app">
  <input type="text" v-model="divWidth ">
  <div
    :style="{
      width: divWidth + '%',
      border: '1px solid #222',
      padding: '50px',
      marginBottom: '40px',
      marginTop: '40px'
    }"
  >
  <vue-responsive-text transition="100">{{msg}}</vue-responsive-text>
  </div>
</div>

サンプル

>>専用ページで確認する

 

さいごに

エリア幅のサイズに応じてレスポンシブに文字サイズを変更するライブラリでした。

今日はこの辺でー

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください