+
Skip to content

tinglejs/tingle-group

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tingle-group npm version

Group是列表容器组件。封装了以下功能:

  • 灵活配置间隔线和子元素的缩进值,而且间隔线和子元素的缩进值是相互独立的,使IOSMaterial风格的多样式列表更加容易实现。
  • 在支持hairline显示的设备上自动优化显示成极细的线。

效果预览:

Usage

首先引入Group,其中Group下面包含HeadList两个子组件。

项目环境下,Tingle是全局变量:

// ES5
var Group = Tingle.Group;
// ES2015
let {Group} = Tingle;

全局使用概览:

...
render() {
    return (<Group>
        <Group.Head>title</Group.Head>
        <Group.List>
            <div>content</div>
            <div>content</div>
        </Group.List>
    </Group>);
}

Group.List

className

描述:自定义样式的class名称。
类型:String
默认:''
必选:否

示例:

<Group>
    <Group.List className="customClass">...</Group.List>
</Group>

lineIndent

描述:配置间隔线的缩进值。
类型:Number|String|Array

  • Number:设置左缩进,默认追加px作为单位,如:lineIndent={10}
  • String:设置左缩进,自定义长度单位,如:lineIndent={'1rem'}
  • Array:设置左右缩进,数组成员的类型为NumberString,默认处理如上。如:lineIndent={[10, 10]}

默认:无
必选:否

示例:

<Group>
    <Group.List lineIndent={10}>...</Group.List>
</Group>

itemIndent

描述:配置列表子元素的缩进值。
类型:Number|String|Array

  • Number:设置左缩进,默认追加px作为单位,如:itemIndent={10}
  • String:设置左缩进,自定义长度单位,如:itemIndent={'1rem'}
  • Array:设置左右缩进,数组成员的类型为NumberString,默认处理如上。如:itemIndent={[10, 10]}

默认:无
必选:否

示例:

<Group>
    <Group.List itemIndent={[10, 10]}>...</Group.List>
</Group>

Todos

  • 当子元素是null时

Links

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载