component name: uni-link

Code block: uLink

Click to download & install

uni-link is an external web page hyperlink component, copy the url in the applet, open an external browser in the app, and open a new web page on the h5 side.

# introduce

# Basic usage

<uni-link href="" text=""></uni-link>


property name type default value description
href String - Link Address
text String - Display text
download String - H5 platform download file name
showUnderLine Boolean true whether to show underline
copyTips String The URL has been copied automatically, please paste the URL in the mobile browser Prompt when copying the link on the applet
color String #999999 Link text color
fontSize String 14 Link text size, in px
Name Description
default Custom content will overwrite the original content display (only supported by vue)

# Example


The example relies on multiple components such as uni-card uni-section uni-scss, copying the example code directly will not work properly.

Please go to the Component download page , select Import example project using HBuilderX on the right side of the page to experience the complete component example.


	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">超链接组件,在小程序内复制url,在app内打开外部浏览器,在h5端打开新网页。</text>
		<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
			<uni-link href="" text=""></uni-link>
		<uni-section title="自定义颜色" type="line" padding>
			<uni-link href="" text="" color="#007BFF"></uni-link>
		<uni-section title="自定义下划线" type="line" padding>
			<uni-link href="" text="" showUnderLine="false">
		<uni-section title="自定义字体大小" type="line" padding>
			<uni-link href="" text="" showUnderLine="false"
		<uni-section title="自定义插槽" type="line" padding>
			<uni-link href="" text="" showUnderLine="false"

Complete example demo