# x-design
### 开发文档
[TMUI4.0文档](https://xui.tmui.design/)
[TMUI4.0组件库](https://ext.dcloud.net.cn/plugin?id=16369)

这是标准组件库依赖系列

### 兼容性

| Harmony | IOS | Android | WEB | 小程序 |
| --- | --- | --- | --- | --- |
| 支持 | 支持 | 支持 | 支持 | 支持 |

### 使用

与正常的uvue组件一样使用,但不同的是,这些全是原生标准组件,需要打包或者mac系统配置环境使用,不能在普通win环境使用.
如果在win下使用,请先在页面调用 ,再打基座使用.如果是mac配置好环境可以直接使用.

**xd-blur有三个属性**
blur:0-100模糊度
bgColor:模糊的叠加颜色
into:模糊对象,可选值parent:模糊它的父级(即背景),self:模糊自身内容(标签内的所有内容被模糊)
当模糊背景的时候需要设置为fiexd在根节点的直接子直接,这样可以模糊动态背景内容,当模糊自身内容时,请把内容放到标签内.

### 模糊组件xdBlur
模糊背景:
它的背景会被局部模糊到xd-blur自身(俗称的磨砂背景效果),作为背景模糊时，插槽会失效，因此你要把它当作一个背景图定位到你的内容下方。
```vue
<scroll-view style="flex:1;">
<xd-blur style="position:fixed;left: 0;top: 0px;width: 100%;height: 100px;z-index: 10;"></xd-blur>
</scroll-view>
```
模糊自己的内容:
它的内容会被全部模糊化(俗称的图片模糊,内容模糊)
```vue
<xd-blur into="self">
	<x-sheet>
		<x-button  :block="true" class="mb-12">主色</x-button>
		<x-button :block="true" class="mb-12" color="error">错误</x-button>
		<x-button :block="true" class="mb-12" color="warn">警告</x-button>
		<x-button :block="true" class="mb-12" color="danger">危险</x-button>
		<x-button :block="true" class="mb-12" color="success">成功</x-button>
		<x-button darkColor="#222222" :block="true" :shadow="[0,0]" class="mb-12" color="info">次要</x-button>
	</x-sheet>
</xd-blur>
```