annasearl / annar Goto Github PK
View Code? Open in Web Editor NEW优雅、简洁的 Remax 组件库
Home Page: https://annasearl.github.io/annar/
优雅、简洁的 Remax 组件库
Home Page: https://annasearl.github.io/annar/
<Frame grayBg style={{ overflow: 'hidden' }}>
<Block title={state.pages.homepage.categoryGroup.group.title}>
<Filter style={{ zIndex: 5, position: 'relative' }}>
<Filter.Item
title='品类'
value={value}
options={options}
// onChange={e => setValue(e.value)}
/>
</Filter>
</Block>
</Frame>
源头是因为
.anna-filter-content {
z-index: 1;
position: fixed;
top: unset;
bottom: unset;
height: 100%;
width: 100%;
overflow: hidden;
transition: height 0.3s ease; }
是否可以给cell添加一个cover属性,用于展示图片在cell的左侧或者右侧?
swiper组件
reg验证失败的反馈都要自己写, 有点头大.
阿玲
<Cascade value={selectedValue} changeOnSelect key={'branSelect' + updateStatus} name="品类" options={listData} onChange={handleBasicChange} />
1、 下面的列表还是从头开始的。
onchang 获得 的value值 最多只能到三个
2、options 通过set 列表不刷新 ,只有改变key 值时才会刷新。
swiper在小程序里手动华滑动的时候会报错,handleTouchEnd函数里e.changedTouches[0]找不到
报错信息:
MiniProgramError
Cannot read property 'pageX' of undefined
TypeError: Cannot read property 'pageX' of undefined
解决方法:
将 var touch = e.changedTouches[0]; 改为
var touch = e.changedTouches[0] || e.nativeEvent.changedTouches[0];
{
"name": "uitest",
"private": true,
"version": "1.0.0",
"description": "Remax Project",
"main": "index.js",
"keywords": [],
"author": "",
"license": "MIT",
"scripts": {
"dev": "remax build -w -t",
"build": "cross-env NODE_ENV=production remax build -t"
},
"dependencies": {
"@remax/plugin-sass": "^1.0.0",
"anna-remax-ui": "^1.5.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"remax": "^2.1.1"
},
"devDependencies": {
"cross-env": "^7.0.2"
}
}
其次 picker 组件并不支持头条,在 one/base/picker.tsx 中可改为
import * as React from 'react';
import { Picker as AliPicker } from 'remax/ali';
import { Picker as WechatPicker } from 'remax/wechat';
import { Picker as ToutiaoPicker } from 'remax/toutiao';
type Props = any;
export default function OnePicker(props: Props) {
switch (process.env.REMAX_PLATFORM) {
case 'ali':
return <AliPicker {...props} />;
case 'wechat':
return <WechatPicker {...props} />;
case 'toutiao':
return <ToutiaoPicker {...props} />;
default:
return <WechatPicker {...props} />;
}
}
在微信小程序中,难免遇到大小不适合的样式
新增Skeleton,ActionSheet两个反馈组件,notification,toast两个方法
不得不说,还挺好的,期待2.0发布后用到项目中,感谢!
SwipeAction属性open无法控制显示隐藏,typescript下报属性错误。
Input缺少maxLength属性
bug 描述
Tabs 组件 activeKey 参数 初始化没有作用,可能是内部在初始化外部props的时候,没有同步state
复现步骤
activeKey的初始化参数,tabs组件使用正常显示对应的tab Key
版本信息
anna-remax-ui 版本: 1.7.0
remax: 2.3.0
1.规范组件的API
1.1唯一标志从 key 改为 value
1.2去除默认margin,如Card的margin-bottom
1.3规范API命名
1.4一些类型为string的API支持number
2.重做Input组件
3.新增Form组件
4.优化Cascade,去除parentKey
5.更名为annar
6.新增date-picker
7.重做picker
8.新增Progress组件
9.新增轮播图
10.新增Ling
发布日期:2020年10月13日
icon的type是string类型,请问下有哪些图标可以使用?
declare const Tabs: {
(props: TabProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
TabContent: React.FC<{}>;
};
React.FC<{}>
导致 eslint
报错 Property 'tab' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)
js:
import * as React from "react";
import {Image, View} from 'remax/wechat';
import styles from './clubs.css';
import {Swiper as AnnarSwiper} from "annar";
export default class ClubsPage extends React.Component {
render(){
return(
<View className={styles.clubsPage}>
<AnnarSwiper autoplay = 'true' autoplayInterval = '3000'
height='300px'
size = 'middle'
showIndicators='true'
shape = 'sharp'
>
<AnnarSwiper.Item className={styles.SwiperItem}>
<Image style = 'height:100%;width:100%'src ="/images/test.png"/>
</AnnarSwiper.Item>
<AnnarSwiper.Item >
<Image style = 'height:100%;width:100%' src ="/images/test.png"/>
</AnnarSwiper.Item>
</AnnarSwiper>
</View>
)
}
}
css:
.clubsPage{
background-color: #8FCAF7;
}
.SwiperItem{
height: 100px;
width:300px;
}
渲染后只有外框:
一刷新就 404 了。
需要配置 exportStatic
https://github.com/remaxjs/remax/blob/master/website/.umirc.ts#L34
在钉钉已经提出了这问题。可以考虑修补。谢谢。
v1.8.15 已经修补
使用方式
const [option1, setOption1] = React.useState([]);
<Checkbox.Group value={option1} onChange={(c, v) => setOption1(c)}>
<Checkbox value={'0'}>Timeliness issue</Checkbox>
<Checkbox value={'1'}>Price question</Checkbox>
<Checkbox value={'2'}>Others</Checkbox>
</Checkbox.Group>
bug 描述
Tabs 组件 activeKey 参数 初始化没有作用,可能是内部在初始化外部props的时候,没有同步state
复现步骤
activeKey的初始化参数,tabs组件使用正常显示对应的tab Key
版本信息
anna-remax-ui 版本: 1.7.0
remax: 2.3.0
有没有日历,日期,时间选择器.
手写,计算日期都算疯了,日历格子排版老不对.
anna-remax-ui 之中,Button的实现方式并没有依赖 remax/one 的button组件,这是作为何种考虑呢?
我引用一个button ,文件就已经500kb+了,看打包出来的文件,把其它没有引用的组件也打包进来了
如果你的项目中使用了Anna Remax UI ,请在这里分享出来~
格式:
[项目名称]
[项目二维码图片地址]
[相关依赖版本]
"anna-remax-ui": "^1.6.9",
"remax": "^2.3.0"
[代码]
import * as React from 'react';
import { View } from 'remax/ali';
import {Tabs,Card} from 'anna-remax-ui'
import styles from './index.less';
const { TabContent } = Tabs;
const tabs = [{
key: '0',
title: 'All',
}, {
key: "1",
title: "Missed",
}]
const tabs1 = [{
key: '0',
title: 'All',
}, {
key: "1",
title: "Missed",
}]
const tabs2 = [{
key: '0',
title: '全部',
}, {
key: "1",
title: "待处理",
}, {
key: "2",
title: "询价中",
}, {
key: "3",
title: "待报价",
}, {
key: "4",
title: "报价中",
}]
const tabs3 = [{
key: '0',
title: '精选',
}, {
key: "1",
title: "关注",
}, {
key: "2",
title: "广场",
}]
const tabs4 = [{
key: '0',
title: 'All',
}, {
key: "1",
title: "Read",
}, {
key: "2",
title: "Missed",
}]
export default () => {
const [stateKey, setStateKey] = React.useState('0');
const [stateKey1, setStateKey1] = React.useState('0');
const [stateKey2, setStateKey2] = React.useState('0');
const [stateKey3, setStateKey3] = React.useState('0');
const [stateKey4, setStateKey4] = React.useState('0');
return (
<View className={styles.app}>
<View className={styles.group}>
<View className={styles.title}>Basic</View>
<View className={styles.content}>
<Tabs
tabs={tabs}
onTabClick={({ key }) => setStateKey(key)}
activeTab={stateKey}
>
{
tabs.map((tab) => (
<TabContent
key={tab.key}
tabId={tab.key}
activeTab={stateKey}
>
<Card>
<View className={styles.tabContent}>
{`${tab.title} content`}
</View>
</Card>
</TabContent>
))
}
</Tabs>
</View>
</View>
<View className={styles.group}>
<View className={styles.title}>TabTitleSquare</View>
<View className={styles.content}>
<Tabs
tabs={tabs}
onTabClick={({ key }) => setStateKey1(key)}
activeTab={stateKey1}
tabTitleSquare
>
{
tabs1.map((tab) => (
<TabContent
key={tab.key}
tabId={tab.key}
activeTab={stateKey1}
>
<Card>
<View className={styles.tabContent}>
{`${tab.title} content`}
</View>
</Card>
</TabContent>
))
}
</Tabs>
</View>
</View>
<View className={styles.group}>
<View className={styles.title}>Type</View>
<View className={styles.subTitle}>plain</View>
<View className={styles.content}>
<Tabs
type="plain"
tabs={tabs2}
onTabClick={({ key }) => setStateKey2(key)}
activeTab={stateKey2}
tabTitleSquare
>
{
tabs2.map((tab) => (
<TabContent
key={tab.key}
tabId={tab.key}
activeTab={stateKey2}
>
<Card>
<View className={styles.tabContent}>
{`${tab.title} content`}
</View>
</Card>
</TabContent>
))
}
</Tabs>
</View>
<View className={styles.subTitle}>card</View>
<View className={styles.content}>
<Tabs
type="card"
tabs={tabs3}
onTabClick={({ key }) => setStateKey3(key)}
activeTab={stateKey3}
tabTitleSquare
>
{
tabs3.map((tab) => (
<TabContent
key={tab.key}
tabId={tab.key}
activeTab={stateKey3}
>
<Card>
<View className={styles.tabContent}>
{`${tab.title} content`}
</View>
</Card>
</TabContent>
))
}
</Tabs>
</View>
</View>
<View className={styles.group}>
<View className={styles.title}>Fixed</View>
<View className={styles.subTitle}>使用fixed属性可以使Tabs固定在页面顶部</View>
<View className={styles.content}>
<Tabs
// fixed
tabs={tabs4}
onTabClick={({ key }) => setStateKey4(key)}
activeTab={stateKey4}
>
{
tabs4.map((tab) => (
<TabContent
key={tab.key}
tabId={tab.key}
activeTab={stateKey4}
>
<Card>
<View className={styles.tabContent}>
{`${tab.title} content`}
</View>
</Card>
</TabContent>
))
}
</Tabs>
</View>
</View>
</View>
);
};
button点击后颜色不恢复。需要点击别处才会恢复
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.