Skip to content

01 Accordions - v_more...

v_more_v4

Generic accordion component with header, open and closed slots

  • title
  • expanded { type: Boolean, default: false }
  • icon { type: String, default: 'fa-angle-down' }
  • icon_close { type: String, default: 'fa-angle-up' }
  • container_class { type: String, default: 'xd-grid-l8 xd-grid-s2 ' }
  • alwaysVisible { type: Boolean, default: false } - show header even on no data (by default v/-more will be not visible)
  • slots header,open,closed
  • open
  • close
HTML
1
2
3
4
5
6
7
8
<v_more_v4 title="Debug" class="print-hide" :expanded="false">
  <template v-slot:header>
  </template>
  <template v-slot:open>
  </template>
  <template v-slot:closed>
  </template>
</v_more_v4>
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<v_more_v4 title="Order Notes" class="OPTION:xd-info" icon="OPTION:fa-bell-o" :highlight="OPTION:true" :expand="OPTION:true" container_class="OPTION:class for top panel">
  <template v-slot:closed>
    <small class="xd-span-5 xd-nw xd-left">OPTION: visible in closed state </small>
  </template>
  <template v-slot:open>
    <div class="xd-nw">OPTION: visible when open</div>
  </template>
  <template v-slot:header>
    <div class=" xd-nw">OPTION: aways visible</div>
  </template>
  Content
</v_more_v4>
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<v_more_v4 data-role="sys_administrator" v-if="hasRole('sys_administrator')" @open="fetch_dataset('/api/core/roles/user/'+ system.username_current,'roles_list')" title="Roles"
  class="print-hide xd-white">
  <div :class="{ 'xd-responsive': isMobile() }" class="xd-padding-l">
    <table class="xd-table">
      <thead>
        <tr>
          <th></th>
          <th>Role</th>
          <th>Assigned at</th>
          <th>Assigned by</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in datasets.roles_list">
          <td class="xd-padding"><a
              @click="axpost('/api/core/roles/user-remove/{role_name}/{username}', item).then(function (response) { fetch_dataset('/api/core/roles/user/'+ system.username_current,'roles_list')})"
              class="xd-button xd-border xd-border-danger xd-round">Remove</a></td>
          <td class="xd-line">{{item.role_name}}</td>
          <td class="xd-line">{{item.claim_created_at | formatDateLong}}</td>
          <td class="xd-line">{{item.claim_created_by }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</v_more_v4>

img

v_more_html

Simple accordion component aim to Limit height of html content and show more button

props

  • title { type: String },
  • height { type: Number,default:100 },

Examples

HTML
1
2
3
4
5
6
7
8
9
<v_more_html title="Hello" >
<div>Any html 
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
  <li>line4</li>
  <li>line5</li>
</div>
</v_more_html>
HTML
1
2
3
4
5
<v_more_html title="Accounts" v-if="hasRole('...')" @open="fetch_dataset('/api/...','data')" class="xd-white" :expanded="true">
<div>
...
</div>
</v_more_html>