ListItem

列表项

基本用法

active

  • not active
  • active
1
2
3
4
5
6
7
8
import { w } from '@dojo/widget-core/d';
import ListGroup from 'widgets-web/list-group/index';
import ListItem from 'widgets-web/list-item/index';

w(ListGroup, {}, [
  w(ListItem, {}, ['not active']);
  w(ListItem, { active: true }, ['active']);
]);

disabled

  • default
  • disabled
1
2
3
4
5
6
7
8
import { w } from '@dojo/widget-core/d';
import ListGroup from 'widgets-web/list-group/index';
import ListItem from 'widgets-web/list-item/index';

w(ListGroup, {}, [
  w(ListItem, {}, ['default']);
  w(ListItem, { disabled: true }, ['disabled']);
]);

appearance

  • default
  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { w } from '@dojo/widget-core/d';
import ListGroup from 'widgets-web/list-group/index';
import ListItem from 'widgets-web/list-item/index';

w(ListGroup, {}, [
  w(ListItem, {}, ['default']);
  w(ListItem, { appearance: 'primary' }, ['primary']);
  w(ListItem, { appearance: 'secondary' }, ['secondary']);
  w(ListItem, { appearance: 'success' }, ['success']);
  w(ListItem, { appearance: 'danger' }, ['danger']);
  w(ListItem, { appearance: 'warning' }, ['warning']);
  w(ListItem, { appearance: 'info' }, ['info']);
  w(ListItem, { appearance: 'light' }, ['light']);
  w(ListItem, { appearance: 'dark' }, ['dark']);
]);
link 
1
2
3
4
5
6
7
8
import { w } from '@dojo/widget-core/d';
import Button from 'widgets-web/button/index';
import Link from 'widgets-web/link/index';

w(ListGroup, {}, [
  w(Button, { value: 'button', appearance: 'primary' });
  w(Link, { value: 'link', href: '#', target: 'self' });
]);

通用属性

  1. Display
  2. Flex 中的 flex container 相关属性
  3. Text
  4. Colors

属性

名称 显示名 默认值 可选值 值类型
widgetId 标识 string
active 激活 false true, false boolean
disabled 失效 false true, false boolean
appearance 外观 default primary, secondary, success, danger, warning, info, light, dark, default string