Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@alifd/deep-template
Advanced tools
@alifd/deep-template - npm Package Compare versions
| # 忽略目录 | ||
| build/ | ||
| node_modules/ | ||
| **/*-min.js | ||
| **/*.min.js | ||
| coverage/ |
| const { tslint, deepmerge } = require('@ice/spec'); | ||
| module.exports = deepmerge(tslint, { | ||
| rules: {}, | ||
| }); |
| # See https://help.github.com/ignore-files/ for more about ignoring files. | ||
| # dependencies | ||
| node_modules/ | ||
| # production | ||
| build/ | ||
| dist/ | ||
| tmp/ | ||
| lib/ | ||
| es/ | ||
| types/ | ||
| # misc | ||
| .idea/ | ||
| .happypack | ||
| .DS_Store | ||
| *.swp | ||
| *.dia~ | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| CHANGELOG.md |
| --- | ||
| title: Simple Usage | ||
| order: 1 | ||
| --- | ||
| 本 Demo 演示一行文字的用法。 | ||
| ````jsx | ||
| import React, { Component } from 'react'; | ||
| import { ConfigProvider } from '@ali/deep'; | ||
| import <%= className %> from '<%= npmScope %><%= npmScope ? '/' : '' %>deep-<%= kebabCaseName %>'; | ||
| // 本业务组件代码中如果有依赖任何deep下组件，请手动在此引入对应组件的style | ||
| import '@ali/deep/lib/button/style' | ||
| class App extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| device: 'desktop' | ||
| } | ||
| } | ||
| handleResize = () => { | ||
| const width = document.documentElement.offsetWidth; | ||
| const { device } = this.state; | ||
| let realDevice = width < 480 ? 'phone' : width > 1024 ? 'desktop' : 'tablet'; | ||
| if (realDevice !== device) { | ||
| this.setState({ | ||
| device: realDevice | ||
| }); | ||
| } | ||
| } | ||
| componentDidMount() { | ||
| this.handleResize(); | ||
| window.addEventListener('resize', this.handleResize, false) | ||
| fixDevice(); | ||
| } | ||
| render() { | ||
| return ( | ||
| <div className='my-container'> | ||
| <ConfigProvider device={this.state.device}> | ||
| <<%= className %> /> | ||
| </ConfigProvider> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| ReactDOM.render(( | ||
| <App /> | ||
| ), mountNode); | ||
| function fixDevice() { | ||
| const ua = navigator.userAgent | ||
| const android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); | ||
| const ipad = ua.match(/(iPad).*OS\s([\d_]+)/); | ||
| const iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); | ||
| if (!android && !iphone && !ipad) { | ||
| return | ||
| } | ||
| const head = document.getElementsByTagName('head')[0] | ||
| const meta = document.createElement('meta') | ||
| const container = document.querySelector('.container') | ||
| const myContainer = document.querySelector('.my-container') | ||
| meta.content = 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no' | ||
| meta.name = 'viewport'; | ||
| head.appendChild(meta); | ||
| document.body.appendChild(myContainer) | ||
| container.parentNode.removeChild(container) | ||
| } | ||
| ```` |
| # <%= title %> | ||
| <%= npmName %> | ||
| <%= description %> | ||
| ## API | ||
| | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ||
| | ------ | ---- | ---- | ---- | ------ | ---- | | ||
| | | | | | | | |
+1
-1
| { | ||
| "name": "@alifd/deep-template", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "description": "deep 模板", | ||
@@ -5,0 +5,0 @@ "scripts": { |
Sorry, the diff of this file is not supported yet
| const { tslint, deepmerge } = require('@ice/spec'); | ||
| module.exports = deepmerge(tslint, { | ||
| rules: {}, | ||
| }); |
Sorry, the diff of this file is not supported yet
| --- | ||
| title: Simple Usage | ||
| order: 1 | ||
| --- | ||
| 本 Demo 演示一行文字的用法。 | ||
| ````jsx | ||
| import React, { Component } from 'react'; | ||
| import { ConfigProvider } from '@ali/deep'; | ||
| import <%= className %> from '<%= npmScope %><%= npmScope ? '/' : '' %>deep-<%= kebabCaseName %>'; | ||
| // 本业务组件代码中如果有依赖任何deep下组件，请手动在此引入对应组件的style | ||
| import '@ali/deep/lib/button/style' | ||
| class App extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| device: 'desktop' | ||
| } | ||
| } | ||
| handleResize = () => { | ||
| const width = document.documentElement.offsetWidth; | ||
| const { device } = this.state; | ||
| let realDevice = width < 480 ? 'phone' : width > 1024 ? 'desktop' : 'tablet'; | ||
| if (realDevice !== device) { | ||
| this.setState({ | ||
| device: realDevice | ||
| }); | ||
| } | ||
| } | ||
| componentDidMount() { | ||
| this.handleResize(); | ||
| window.addEventListener('resize', this.handleResize, false) | ||
| fixDevice(); | ||
| } | ||
| render() { | ||
| return ( | ||
| <div className='my-container'> | ||
| <ConfigProvider device={this.state.device}> | ||
| <<%= className %> /> | ||
| </ConfigProvider> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| ReactDOM.render(( | ||
| <App /> | ||
| ), mountNode); | ||
| function fixDevice() { | ||
| const ua = navigator.userAgent | ||
| const android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); | ||
| const ipad = ua.match(/(iPad).*OS\s([\d_]+)/); | ||
| const iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); | ||
| if (!android && !iphone && !ipad) { | ||
| return | ||
| } | ||
| const head = document.getElementsByTagName('head')[0] | ||
| const meta = document.createElement('meta') | ||
| const container = document.querySelector('.container') | ||
| const myContainer = document.querySelector('.my-container') | ||
| meta.content = 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no' | ||
| meta.name = 'viewport'; | ||
| head.appendChild(meta); | ||
| document.body.appendChild(myContainer) | ||
| container.parentNode.removeChild(container) | ||
| } | ||
| ```` |
| # <%= title %> | ||
| <%= npmName %> | ||
| <%= description %> | ||
| ## API | ||
| | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ||
| | ------ | ---- | ---- | ---- | ------ | ---- | | ||
| | | | | | | | |
No alert changes
Worsened metrics
- Lines of code
28
-12.5%No dependency changes