How to use @lugia/lugia-web - 10 common examples

},
    },
  },
  [Widget.Label]: {
    Container: {
      normal: {
        color:'rgba(0,0,0,.45)',
        width: 'auto',
        margin: {
          // left: 6,
          right: 6,
        },
      }
    },
  },
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 20,
        width: 20
      },
    },
  },
  [Widget.Divider]: {
    VerticalDivider: {
      normal: {
        height:16,
        background:{
          color:'#D8D8D8'
        },
        margin:{
          left: 16

margin: {
          // left: 6,
          right: 6,
        },
      }
    },
  },
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 20,
        width: 20
      },
    },
  },
  [Widget.Divider]: {
    VerticalDivider: {
      normal: {
        height:16,
        background:{
          color:'#D8D8D8'
        },
        margin:{
          left: 16
        }
      },
    },
  },
  [Widget.Icon]: {
    Icon: {
      normal: {
        margin:{

padding:18px 20px;
`;
const Title = styled.div`
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  // margin-bottom: 10px;
`;
const Description = styled.div`
  font-size: 14px;
  line-height: 1.4;
  padding-top: 6px;
  color:#666;
`;
const theme = {
  [Widget.Breadcrumb]: {
    BreadcrumbItem: {
      Text: {
        normal: {

          last: {
            color: '#333',
          },
        },
        hover: {
          color: '#4d63ff',
        },
      },

    },
  },

},
        background:{
          color:'#ffffff'
        },
      },
    },
    ButtonText: {
      normal: {
        color:'#666',
      },
      hover: {
        color:'#888',
      },
    },
  },
  [Widget.Label]: {
    Container: {
      normal: {
        color:'rgba(0,0,0,.45)',
        width: 'auto',
        margin: {
          // left: 6,
          right: 6,
        },
      }
    },
  },
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 20,
        width: 20

const AvatarWrap = styled.div`
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  vertical-align: top;
  cursor: pointer;
  margin-left: 26px;
`;

const theme= {
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 32,
        width: 32,
        boxShadow:' 0 0 1px 1px  red'
      },
    },
  },
};
const inputTheme= {
  [Widget.Input]: {
    Container: {
      normal: {
        height: 32,
        width: 200,
        borderRadius:getBorderRadius(28),

},
    CardTitleTipLine:{
      normal: {
        width: 6,
      },
    },
    CardTitle:{
      normal: {
        margin: {
          left: -8
        },
        padding: 0
      },
    }
  },
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 24,
        width: 24,
        margin:{
          right: 15
        }
      },
    },
  },
};

const cooperateCard = {
  [Widget.Card]: {
    Container: {
      normal: {

},
    CardTitle: {
      normal:{
        padding:{
          top: 0,
          left: 0,
          right: 0,
          bottom:0
        },
      }
    },
    CardContent:{
      normal: { padding:0 },
    }
  },
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 20,
        width: 20,
        margin: {
          right: 20
        }
      },
    },
  },
  [Widget.Divider]: {
    VerticalDivider: {
      normal: {
        height: 20,
      },
    },

normal: {
        font: {
          size: 12
        },
        color:'rgba(0,0,0,0.45)'
      },
    },
  },
  [Widget.Divider]: {
    VerticalDivider: {
      normal: {
        height: 20,
      },
    },
  },
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 20,
        width: 20,
        margin: {
          right: -3
        },
        boxShadow:getBoxShadow('0 0 1px 2px  #fff')
      },
    },
  },
  [Widget.Tooltip]: {
    Container: {
      normal: {
        background: {
          color: '#ddd',

Container: {
          normal: {
            width: 176,
            height: 32,
            fontSize: 14
          }
        },
        InputPrefix: {
          normal: {
            fontSize: 12
          }
        }
      }
    };
    const view = {
      [Widget.Avatar]: {
        Container: { normal: { background: { color: "#e2e2e2" }, margin: 0 } }
      }
    };
    return(
      <content>

        {/*页头*/}
        
          '} lastSeparator={''} theme={config}&gt;
            首页
            列表页
            标准列表
          
        

        {/*上部图表*/}</content>

Icon: {
      normal: {
        margin:{
          left: 50,
          right: 10
        },
        font: {
          size: 20
        }
      },
    },
  },
};

const avatarTheme = {
  [Widget.Avatar]: {
    Container: {
      normal: {
        height: 20,
        width: 20,
        margin:{
          right: 10
        }
      },
    },
  }
};


class Center extends Component{

  constructor(props) {