Resource

The Resource component provides a flexible way to display and interact with various types of resources like URLs, email addresses, phone numbers, or any text content. It supports copy-to-clipboard functionality, external links, and custom action buttons. Perfect for displaying clickable resources with hover actions.

Basic resource

The Resource component displays text content. On hover, it shows a dotted underline to indicate it's interactive.

https://example.com

Source code

<template>
  <IkResource>https://example.com</IkResource>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

Copyable resource

Use the copyable prop to enable copy-to-clipboard functionality. A copy icon appears on hover, and clicking it copies the content to the clipboard.

Copy this text

Custom value to copy

Source code

<template>
  <div>
    <div class="ik-mb-4">
      <IkResource copyable>Copy this text</IkResource>
    </div>
    <div>
      <IkResource copyable :value="copyText">
        Custom value to copy
      </IkResource>
    </div>
  </div>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
import { ref } from 'vue';

const copyText = ref('This will be copied instead of the slot content');
</script>

External link

Use the uri prop to make the resource open an external link. The link opens in a new tab by default.

GitHub

Vue.js (same tab)

Source code

<template>
  <div>
    <div class="ik-mb-4">
      <IkResource uri="https://github.com">GitHub</IkResource>
    </div>
    <div>
      <IkResource uri="https://vuejs.org" target="_self">Vue.js (same tab)</IkResource>
    </div>
  </div>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

Email link

Use the email prop with uri to create a mailto link. The email address should be provided in the uri prop.

[email protected]

Source code

<template>
  <IkResource uri="[email protected]" email>[email protected]</IkResource>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

Phone link

Use the phone prop with uri to create a tel link for phone numbers.

+1 (234) 567-890

Source code

<template>
  <IkResource uri="+1234567890" phone>+1 (234) 567-890</IkResource>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

Combined features

Combine multiple features like copyable and external link. The component will show both action icons on hover.

https://example.com

[email protected]

Source code

<template>
  <div>
    <div class="ik-mb-4">
      <IkResource 
        uri="https://example.com" 
        copyable
      >
        https://example.com
      </IkResource>
    </div>
    <div>
      <IkResource 
        uri="[email protected]" 
        email
        copyable
      >
        [email protected]
      </IkResource>
    </div>
  </div>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

Show actions always

By default, action icons only appear on hover. Use the show_actions prop to always display them.

Hover to see actions

Actions always visible

Source code

<template>
  <div>
    <div class="ik-mb-4">
      <IkResource copyable uri="https://example.com">
        Hover to see actions
      </IkResource>
    </div>
    <div>
      <IkResource copyable uri="https://example.com" show_actions>
        Actions always visible
      </IkResource>
    </div>
  </div>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

No wrap

Use the no_wrap prop to prevent text wrapping. Useful for displaying long URLs or codes on a single line.

This is a very long resource text that will wrap by default

This is a very long resource text that will not wrap

Source code

<template>
  <div style="max-width: 300px;">
    <div class="ik-mb-4">
      <IkResource copyable>
        This is a very long resource text that will wrap by default
      </IkResource>
    </div>
    <div>
      <IkResource copyable no_wrap>
        This is a very long resource text that will not wrap
      </IkResource>
    </div>
  </div>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
</script>

Custom action slot

Use the action slot to add custom action buttons or icons alongside the default actions.

Resource with custom action

Source code

<template>
  <IkResource copyable uri="https://example.com">
    <template #action>
      <IkButton circle ghost design="primary" size="xs">
        <IkIcon icon="star" />
      </IkButton>
    </template>
    Resource with custom action
  </IkResource>
</template>
<script setup>
import { IkResource } from '@ikol/ui-kit/components/IkResource';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { IkIcon } from '@ikol/ui-kit/components/IkIcon';
</script>