Empty 空の状態

データがないときのプレースホルダー表示です。デフォルトスロットに操作ボタンを配置したり、画像アドレスを渡してデフォルトのイラストを差し替えたりできます。

空の状態

<template>
  <div class="demo-col">
    <LhEmpty description="画作の記録はまだありません" />
    <LhEmpty>
      <template #default>
        <LhButton type="primary" @click="reload">再読み込み</LhButton>
      </template>
    </LhEmpty>
    <p class="demo-note">description を渡さないときは言語パッケージのデフォルトテキストを使用します。下はカスタム画像の例です。</p>
    <LhEmpty
      description="カスタム画像アドレス"
      image="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%23e8e2d5'/%3E%3Cpath%20d='M0%2086%20Q40%2060%2080%2086%20T160%2086%20V120%20H0%20Z'%20fill='%23c9c2b2'/%3E%3Ctext%20x='50%'%20y='50%'%20font-size='16'%20fill='%232b4c7c'%20text-anchor='middle'%20font-family='serif'%3E%E6%B0%B4%E5%A2%A8%E7%95%99%E7%99%BD%3C/text%3E%3C/svg%3E"
    />
  </div>
</template>

<script>
export default {
  methods: {
    reload() {
      alert('デモ：再読み込みを実行')
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
description	空の状態の説明テキスト（渡さないときは言語パッケージの empty.description を使用）	string	—
image	カスタム画像 URL（デフォルトのインラインイラストを差し替え）	string	—
sx	sx によるレイアウト省略記法	—	—

Slots

デフォルトスロット：説明の下にある操作エリア（「再読み込み」ボタンなど）です。