コンテンツにスキップ

Dummy

ダミーテキストを出力できるLismコンポーネントです。

プロパティ説明
lang言語を指定できます。デフォルトでen。そのほか、jaをサポートしています。
lengthダミーテキストの長さを指定できます。有効な値は xs, s, l, xl です。
preダミーテキストの前に表示するテキストを指定できます。
tagダミーテキストのタグを指定できます。
offsetダミーテキストのオフセットを指定できます。,.単位で区切って切り捨てします。(長さは短くなります)
import { Dummy } from 'lism-css/react';
ダミーテキストの言語の違い

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

<Dummy />
<Dummy lang='ja' />
ダミーテキストの長さの違い

xs: ロレム・イプサムの座り雨。

xs: Lorem ipsum dolor sit amet.

s: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

s: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

m: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

m: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

l: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

l: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

xl: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。

xl: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

<Dummy lang='ja' length='xs' pre='xs: ' />
<Dummy lang='ja' length='s' pre='s: ' />
<Dummy lang='ja' length='m' pre='m: ' />
<Dummy lang='ja' length='l' pre='l: ' />
<Dummy lang='ja' length='xl' pre='xl: ' />
length='codes'にすると、<b>,<i>,<a>,<code>を含んだダミーテキストを出力します。

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

<Dummy lang='ja' length='codes' />
offsetの例

ロレム・イプサムの座り雨。

目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

<Dummy lang='ja' length='xs' />
<Dummy lang='ja' offset={1} />
<Dummy lang='ja' length='l' offset={3} />

tag='ul'tag='ol' を指定した場合は、リストを出力します。

ダミーリストの例 1
  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit,
  • sed do eiusmod tempor Incididunt ut.
  • Labore et dolore magna aliqua.
  • Ut enim ad minim veniam,
  • quis nostrud exercitation ullamco laboris nisi ut.
  1. Lorem ipsum dolor sit amet.
  2. Consectetur adipiscing elit,
  3. sed do eiusmod tempor Incididunt ut.
  4. Labore et dolore magna aliqua.
  5. Ut enim ad minim veniam,
  6. quis nostrud exercitation ullamco laboris nisi ut.
<Dummy tag='ul' />
<Dummy tag='ol' />

tag='img' を指定した場合は、https://cdn.lism-css.com/からダミー画像を出力します。

<Dummy tag='img' />