AClickableText

AClickableText is a themed, link-styled text trigger. Set a type to color it (primary, secondary, danger, warn, info), and listen to click. Use it for inline actions like “Edit”, “View all”, or “Delete”.

Import

import { ClickableText } from '@any-design/anyui/vue';
// React:  import { ClickableText } from '@any-design/anyui/react';
// Svelte: import { ClickableText } from '@any-design/anyui/svelte';

Basic usage

<template>
  <AClickableText type="primary" @click="onClick">View details</AClickableText>
</template>

<script setup>
const onClick = () => console.log('clicked');
</script>

Examples

Danger action

Use type="danger" for destructive inline actions like delete.

<template>
  <AClickableText type="danger" @click="onDelete">Remove</AClickableText>
</template>

<script setup>
const onDelete = () => console.log('delete');
</script>

In a sentence

Mix it into body text for inline links.

<template>
  <p>
    New here?
    <AClickableText type="primary" @click="goSignup">Create an account</AClickableText>
  </p>
</template>

<script setup>
const goSignup = () => console.log('signup');
</script>

Props

Prop	Type	Default	Description
type	‘primary’ | ‘secondary’ | ‘danger’ | ‘warn’ | ‘info’	‘’	Theme color (empty = default text color).

Events

Event	Payload	Description
click	MouseEvent	Native click.

Slots

Slot	Props	Description
default	—	Text content.

AClickableText

AClickableText 是带主题色的链接样式文字触发器。通过 type 设置颜色（primary、secondary、danger、warn、info），监听 click 事件。适合用于 “编辑”、“查看全部”、“删除” 等内联操作。

引入

import { ClickableText } from '@any-design/anyui/vue';
// React:  import { ClickableText } from '@any-design/anyui/react';
// Svelte: import { ClickableText } from '@any-design/anyui/svelte';

基础用法

<template>
  <AClickableText type="primary" @click="onClick">查看详情</AClickableText>
</template>

<script setup>
const onClick = () => console.log('clicked');
</script>

示例

危险操作

使用 type="danger" 表示删除等破坏性内联操作。

<template>
  <AClickableText type="danger" @click="onDelete">移除</AClickableText>
</template>

<script setup>
const onDelete = () => console.log('delete');
</script>

句子中的内联链接

将其混入正文，作为内联链接使用。

<template>
  <p>
    新用户？
    <AClickableText type="primary" @click="goSignup">创建账号</AClickableText>
  </p>
</template>

<script setup>
const goSignup = () => console.log('signup');
</script>

属性

属性	类型	默认值	说明
type	‘primary’ | ‘secondary’ | ‘danger’ | ‘warn’ | ‘info’	‘’	主题色（空字符串 = 默认文字色）。

事件

事件	载荷	说明
click	MouseEvent	原生点击。

插槽

插槽	作用域参数	说明
default	—	文字内容。