title: zh-CN: 基本用法 en-US: baisc usage order: 0

zh-CN

基本用法

import AtPath from '@alife/at-path';

const data = [
  {
    name: '阿里集团',
    id: 1
  },
  {
    name: '阿里云智能事业群',
    id: 2
  },
  {
    name: '云智能产品研发板块',
    id: 3
  },
  {
    name: '基础产品事业部',
    id: 4
  },
  {
    name: ' 研发效能部',
    id: 5
  },
  {
    name: '体验技术 ',
    id: 6
  },
  {
    name: '前端 ',
    id: 7
  },
  {
    name: 'A组 ',
    id: 8
  },
]

class Demo extends React.Component {
  render() {
    return (
      <>
        <div style={{ fontSize: 15 }}>自适应</div>
        <AtPath
          dataSource={[...data]}
          itemClick={(item, index) => console.log(item, index)}
        />

        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 15 }}>限制宽度</div>
          <AtPath
            dataSource={[...data]}
            maxWidth={500}
            itemClick={(item, index) => console.log(item, index)}
          />
        </div>
      </>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

.example {
  padding: 20px;
  background: rgba(0, 0, 0, 0.05);
}