text: <example src="./examples/EmptyStateBasic.vue" />
  <example src="./examples/EmptyStateRounded.vue" />
  <example src="./examples/EmptyStateColors.vue" />
  
  <template>
    <page-container centered :title="$t('pages.emptyState.title')">
      <div class="page-container-section">
        <p>A list that doesn’t contain any items, or a search that doesn’t display any results, are examples of empty states. Although these states aren’t typical, they should be designed to prevent user confusion.</p>
        <p>The most basic empty state displays a non-interactive image and a text tagline. For that you can use an icon, title and an empty state description. Vue Material already provide a nice design for your empty states, but you can always create your own design on top of <code>md-empty-state</code>.</p>
        <p>The empty state can be basic or rounded. The rounded variant is recommended only for desktop, as it size is fixed and do not work responsivelly.</p>
      </div>
  
      <div class="page-container-section">
        <h2>Empty State</h2>
  
        <p>The default empty state can be used on any screen size. You can combine designs with icon, label and description, as any of this are optional. It also accepts a default <code>&lt;slot&gt;</code> to pass any arbitrary content, like a button to give an option to continue the screen flow:</p>
        <code-example title="Default" :component="examples['empty-state-basic']" />
  
        <p>The rounded empty state gives a fresh look with a nice background color, to gain the attention of your user.</p>
        <code-example title="Rounded" :component="examples['empty-state-rounded']" />
  
        <p>You can also combine both layouts with primary or accent colors, to match your theme. Gorgeous!</p>
        <code-example title="Hue Colors" :component="examples['empty-state-colors']" />
  
        <api-item title="API - md-empty-state">
          <p>The following options can be applied to any empty state:</p>
  
          <api-table :headings="props.headings" :props="props.props" slot="props" />
        </api-item>
      </div>
    </page-container>
  </template>
  
  <script>
    import examples from 'docs-mixins/docsExample'
  
    export default {
      name: 'DocEmptyState',
      mixins: [examples],
      data: () => ({
        props: {
          headings: ['Name', 'Description', 'Default'],
          props: [
            {
              name: 'md-icon',
              type: 'String',
              description: 'The icon of the empty state. Optional.',
              defaults: 'null'
            },
            {
              name: 'md-label',
              type: 'String',
              description: 'The label of the empty state. Works as a title. Optional.',
              defaults: 'null'
            },
            {
              name: 'md-description',
              type: 'String',
              description: 'The description of the empty state. Optional.',
              defaults: 'null'
            },
            {
              name: 'md-rounded',
              type: 'Boolean',
              description: 'Make the empty state rounded, with a nice background color.',
              defaults: 'false'
            },
            {
              name: 'md-size',
              type: 'Number',
              description: 'The rounded width/height size. Only works with <code>md-rounded</code>.',
              defaults: '420'
            }
          ]
        }
      })
    }
  </script>
  