Tag Management

Out of the box you will have an example of tag management (for the cases in which you are developing a blog or a shop). To access this example, click the "Examples(API)/Tags" link in the left sidebar or add /tags-list to the URL. You can add and edit tags here, but you can only delete them if they are not attached to any items.

You can find the compoments for tag functionality in src\views\examples-api\tags folder.

The store used for tag functionality is found in src\store\tags.module.js

Tag List Examples

<table id="tag-list" ref="table" class="table table-flush">
  <thead class="thead-light">
    <tr>
      <th data-sortable="false" class="w-20">Name</th>
      <th title="name" class="w-20">Color</th>
      <th title="created_at" class="w-20">Created at</th>
      <th data-sortable="false" class="text-end">Action</th>
    </tr>
  </thead>
  <tbody class="text-sm">
  </tbody>
</table>

1<table id="tag-list" ref="table" class="table table-flush">
2  <thead class="thead-light">
3    <tr>
4      <th data-sortable="false" class="w-20">Name</th>
5      <th title="name" class="w-20">Color</th>
6      <th title="created_at" class="w-20">Created at</th>
7      <th data-sortable="false" class="text-end">Action</th>
8    </tr>
9  </thead>
10  <tbody class="text-sm">
11  </tbody>
12</table>

Add/Edit Examples

<div class="card-body">
  <form>
      <div class="row">
          <div class="col-10">

              <material-input id="name" v-model:value="tag.name" label="Name"
                  name="name" variant="static"></material-input>
              <validation-error :errors="apiValidationErrors.name"></validation-error>

          </div>
          
      </div>

      <div class="row mt-5 mb-5 d-flex align-items-center">
          
          <div class="col-10">
              <label class="ms-0"> Color </label>
              <slider v-model="color" class="w-100"></slider>
              <validation-error :errors="apiValidationErrors.color"></validation-error>
          </div>

          <div class="col-2 text-end mt-5">
              <material-button class="float-right btn btm-sm" @click.prevent="handleAdd">Add
                  Tag</material-button>
          </div>
      </div>
  </form>
</div>

1<div class="card-body">
2  <form>
3      <div class="row">
4          <div class="col-10">
5
6              <material-input id="name" v-model:value="tag.name" label="Name"
7                  name="name" variant="static"></material-input>
8              <validation-error :errors="apiValidationErrors.name"></validation-error>
9
10          </div>
11          
12      </div>
13
14      <div class="row mt-5 mb-5 d-flex align-items-center">
15          
16          <div class="col-10">
17              <label class="ms-0"> Color </label>
18              <slider v-model="color" class="w-100"></slider>
19              <validation-error :errors="apiValidationErrors.color"></validation-error>
20          </div>
21
22          <div class="col-2 text-end mt-5">
23              <material-button class="float-right btn btm-sm" @click.prevent="handleAdd">Add
24                  Tag</material-button>
25          </div>
26      </div>
27  </form>
28</div>
29