ITEM

元件,组件构成的最小粒度元件。ITEM元件可大可小,用途很广泛,我们可以用item产出内容页的结构,也可以使用ITEM产出一行字符串数据

数据结构图

  • item结构
    • header

      头部,css position: relative
    • body

      躯干部, 数组, css position: relative
    • footer

      底部, 数组, css position: relative
    • dot

      随机部分, 数组, css position: absolute

结构说明

任意item的构成均为上图的部分拼接,不同场景下有不同的拼接方式,除了header部分为必须,其他部分均为非必须部分

用法

item是最细粒度的元件,所有元件,组件都建立在item之上,依据数据结构来稳定产出html结构.
Aotoo.item 方法能够直接生成JSX对象,以方便我们组织输出页面结构

const jsx = Aotoo.item({
    data: {
        title: '',
        url: '',
        img: '',
        body: [
            {...},
            {...}
        ],
        footer: [
            {...},
            {...}
        ],
        dot: [
            {...},
            {...}
        ]
    }
})

参数设置

所有options参数设置,根据options设置的不同,会影响不同的输出结构

基本参数

基本参数针对只存在header的场景下

参数 类型 默认值 descript
title {String/Number/JSX} item的显示部分
url {String} 必须配合title使用,且title为字符串类型,会自动生成A标签
img {String/Array[String]/JSON} 配图,支持多图
id {String} item结构的id属性
attr {Json} item结构的data-*属性
itemClass {String} item结构的样式类
itemStyle {JSON} 指定item的样式
k {STRING/JSX} 只能用在body/footer/dot中,设置属性KEY
<k>v {STRING/JSX} 依赖k,不能单独设定 只能用在body/footer/dot中,设置属性VALUE

部件参数

当item的结构较为复杂,引入部件参数,一旦引入了部件参数(li除外),则header部分会自动包裹一层div,

参数 类型 默认值 descript
li {Array[item, item...]} 使item支持列表
body {Array[item, item...]} item的body结构
footer {Array[item, item...]} item的footer结构
dot {Array[item, item...]} item的浮动结构

示例代码

Demo:
Edit aotoo-item
第一次访问需要翻墙,因为codesandbox有相关google的广告内容

const Item = Aotoo.item
const itemTitles = {
  str: (
    Item({
      data: {
        title: 'title为string类型',
        itemStyle: {
          fontSize: '26px',
          padding: '0.3em 0.5em',
          margin: '0'
        }
      }
    })
  ),

  url: (
    Item({
      data: {
        title: '超链接文字',
        url: '__ http://www.agzgz.com'   // 新开窗口
      }
    })
  ),

  jsx: (
    Item({
      data: {title: <span>现在title为jsx</span>}
    })
  ),

  img: (
    Item({
      data: {
      title: <h4>图片</h4>,
      img: "https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/91913214/O1CN0104BfrI1Zc3RKdT6L8_!!91913214.jpg_460x460Q90.jpg_.webp"}
    })
  ), 

  imgurl: (
    Item({
      data: {
        title: <h4>图片超链接</h4>,
        img: {
          src: "https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/91913214/O1CN0104BfrI1Zc3RKdT6L8_!!91913214.jpg_460x460Q90.jpg_.webp",
          url: "__ http://www.agzgz.com"
      }}
    })
  ), 

  imgs: (
    Item({
      data: {
        title: <h3>图片集</h3>,
        img: [
          {
            src: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/113547160/TB2oDQ3hnTI8KJjSsphXXcFppXa_!!0-saturn_solar.jpg_460x460Q90.jpg_.webp',
            url: '__ http://www.agzgz.com'
          },
          'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/113547160/TB2oDQ3hnTI8KJjSsphXXcFppXa_!!0-saturn_solar.jpg_460x460Q90.jpg_.webp',
          'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/113547160/TB2oDQ3hnTI8KJjSsphXXcFppXa_!!0-saturn_solar.jpg_460x460Q90.jpg_.webp',
          'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/113547160/TB2oDQ3hnTI8KJjSsphXXcFppXa_!!0-saturn_solar.jpg_460x460Q90.jpg_.webp',
        ]
      },
      itemClass: 'pics'
    })
  ), 

  // 给item结构设置data-*属性
  attr: (
    Item({
      data: {
        title: <div>设置data-*属性,审查元素查看属性</div>,
        attr: {
          id: 'your-id',
          name: 'your-name'
        },
        itemStyle: {
          border: "1px solid red",
          padding: "0.5em",
          borderRadius: '10px'
        }
      },
    })
  ),

  li: (
    Item({
      data: {
        title: <h3>item下的list</h3>,
        li: [
          <span>a</span>, 
          'b', 
          'c', 
          {title: 'abc', url: '__ http://www.agzgz.com'}
        ]
      }
    })
  ),

  body: (
    Item({
      data: {
        title: <h3>item下的body</h3>,
        body: [
          <span>这里是body部分</span>, 
          'b', 
          'c', 
          {title: 'abc', url: '__ http://www.agzgz.com'},
          {k: '键名1', v: '值1'},
          {k: '键名2', v: '值2'},
          {k: '键名3', v: '值3'},

          {title: 'body下的li', li: [
            'body-li-1',
            'body-li-2',
            'body-li-3',
          ]}
        ]
      }
    })
  ),

  footer: (
    Item({
      data: {
        title: <h3>item下的footer</h3>,
        footer: [
          <div>这里是footer部分</div>,
          <span>a</span>, 
          'b', 
          'c', 
          {title: 'abc', url: '__ http://www.agzgz.com'},
          {k: '键名1', v: '值1'},
          {k: '键名2', v: '值2'},
          {k: '键名3', v: '值3'},

          {title: 'footer下的li', li: [
            'footer-li-1',
            'footer-li-2',
            'footer-li-3',
          ]}
        ]
      }
    })
  ),

  dot: (
    Item({
      data: {
        title: <h3>item下的dot</h3>,
        dot: [
          <div style={{fontWeight: "600"}}>dot是自由元素</div>,
          <span>a</span>, 
          'b', 
          'c', 
          {title: 'abc', url: '__ http://www.agzgz.com'},

          {title: 'dot下的li', li: [
            'footer-li-1',
            'footer-li-2',
            'footer-li-3',
          ]}
        ]
      }
    })
  ),


  all: (
    Item({
      data: {
        title: <h3>item下的所有构成</h3>,
        li: [
          <div>这里是li部分</div>,
          <div>li与下面的部分不太一样</div>,
        ],
        body: [
          <div>这里是body部分</div>,
        ],
        footer: [
          <div>这里是footer部分</div>,
        ],
        dot: [
          <div style={{fontWeight: "600", backgroundColor: 'red'}}>dot是自由元素</div>,
          <span>a</span>, 
          'b', 
          'c', 
          {title: 'abc', url: '__ http://www.agzgz.com'},

          {title: 'dot下的li', li: [
            'footer-li-1',
            'footer-li-2',
            'footer-li-3',
          ]}
        ]
      }
    })
  ),
}

// item demo
const Container = (
  <React.Fragment >
    {itemTitles['str']}
    {itemTitles['url']}
    {itemTitles['jsx']}
    {itemTitles['img']}
    {itemTitles['imgurl']}
    {itemTitles['imgs']}
    {itemTitles['attr']}
    {itemTitles['li']}
    {itemTitles['body']}
    {itemTitles['footer']}
    {itemTitles['dot']}
    {itemTitles['all']}
  </React.Fragment>
)

Aotoo.render(Container, 'root')