40 lines
1.0 KiB
React
40 lines
1.0 KiB
React
import React from 'react';
|
|
import './DensitySwitcher.css';
|
|
|
|
const OPTIONS = [
|
|
{ value: 'loose', label: '宽松' },
|
|
{ value: 'default', label: '默认' },
|
|
{ value: 'compact', label: '紧凑' }
|
|
];
|
|
const ROWS = [
|
|
{ name: '用户管理', count: '128 项' },
|
|
{ name: '角色管理', count: '12 项' },
|
|
{ name: '菜单管理', count: '36 项' }
|
|
];
|
|
|
|
export default function DensitySwitcher({ value = 'default', onChange }) {
|
|
return (
|
|
<div>
|
|
<div className="aa-densw">
|
|
{OPTIONS.map((o) => (
|
|
<button
|
|
key={o.value}
|
|
className={'aa-densw-opt' + (value === o.value ? ' is-active' : '')}
|
|
onClick={() => onChange && onChange(o.value)}
|
|
>
|
|
{o.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className={'aa-densw-demo ' + value}>
|
|
{ROWS.map((r, i) => (
|
|
<div key={i} className="aa-densw-row">
|
|
<span>{r.name}</span>
|
|
<span className="muted">{r.count}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|