{ "project": { "name": "phoenix-ui", "description": { "type": "Buffer", "data": [ 60, 100, 105, 118, 32, 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, 110, 58, 32, 45, 49, 53, 112, 120, 32, 45, 50, 48, 112, 120, 32, 49, 53, 112, 120, 59, 112, 97, 100, 100, 105, 110, 103, 58, 32, 53, 48, 112, 120, 32, 50, 52, 112, 120, 32, 54, 48, 112, 120, 32, 50, 52, 112, 120, 59, 98, 111, 120, 45, 115, 105, 122, 105, 110, 103, 58, 32, 98, 111, 114, 100, 101, 114, 45, 98, 111, 120, 59, 98, 97, 99, 107, 103, 114, 111, 117, 110, 100, 45, 99, 111, 108, 111, 114, 58, 32, 35, 51, 56, 98, 55, 101, 97, 59, 111, 118, 101, 114, 102, 108, 111, 119, 58, 32, 104, 105, 100, 100, 101, 110, 59, 116, 101, 120, 116, 45, 97, 108, 105, 103, 110, 58, 99, 101, 110, 116, 101, 114, 59, 32, 99, 111, 108, 111, 114, 58, 35, 102, 102, 102, 59, 34, 62, 10, 32, 32, 32, 32, 60, 104, 49, 62, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 60, 47, 104, 49, 62, 10, 32, 32, 32, 32, 60, 112, 32, 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, 110, 45, 116, 111, 112, 58, 49, 53, 112, 120, 34, 62, 229, 159, 186, 228, 186, 142, 82, 101, 97, 99, 116, 230, 161, 134, 230, 158, 182, 229, 174, 158, 231, 142, 176, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 85, 73, 231, 187, 132, 228, 187, 182, 229, 186, 147, 60, 47, 112, 62, 10, 32, 32, 32, 32, 60, 112, 32, 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, 110, 45, 116, 111, 112, 58, 49, 53, 112, 120, 34, 62, 10, 32, 32, 32, 32, 32, 32, 32, 32, 60, 97, 32, 115, 116, 121, 108, 101, 61, 34, 99, 111, 108, 111, 114, 58, 35, 102, 102, 102, 34, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 34, 62, 71, 105, 116, 104, 117, 98, 60, 47, 97, 62, 32, 124, 10, 32, 32, 32, 32, 32, 32, 32, 32, 60, 97, 32, 115, 116, 121, 108, 101, 61, 34, 99, 111, 108, 111, 114, 58, 35, 102, 102, 102, 34, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 47, 101, 120, 97, 109, 112, 108, 101, 115, 47, 105, 110, 100, 101, 120, 46, 104, 116, 109, 108, 34, 62, 69, 120, 97, 109, 112, 108, 101, 115, 60, 47, 97, 62, 10, 32, 32, 32, 32, 60, 47, 112, 62, 10, 60, 47, 100, 105, 118, 62, 10, 60, 112, 32, 99, 108, 97, 115, 115, 61, 34, 108, 101, 97, 100, 34, 62, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 230, 152, 175, 229, 159, 186, 228, 186, 142, 82, 101, 97, 99, 116, 230, 161, 134, 230, 158, 182, 229, 174, 158, 231, 142, 176, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 85, 73, 231, 187, 132, 228, 187, 182, 229, 186, 147, 227, 128, 130, 60, 47, 112, 62, 10, 10, 60, 104, 50, 62, 229, 174, 137, 232, 163, 133, 60, 47, 104, 50, 62, 10, 60, 112, 114, 101, 32, 99, 108, 97, 115, 115, 61, 34, 119, 101, 108, 108, 32, 119, 101, 108, 108, 45, 115, 109, 97, 108, 108, 32, 115, 105, 103, 110, 45, 108, 101, 102, 116, 50, 34, 62, 10, 36, 32, 110, 112, 109, 32, 105, 110, 115, 116, 97, 108, 108, 32, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 32, 45, 45, 115, 97, 118, 101, 10, 60, 47, 112, 114, 101, 62, 10, 10, 60, 104, 50, 62, 228, 189, 191, 231, 148, 168, 60, 47, 104, 50, 62, 10, 60, 104, 51, 62, 67, 111, 109, 109, 111, 110, 74, 83, 32, 38, 32, 69, 83, 54, 60, 47, 104, 51, 62, 10, 60, 112, 114, 101, 32, 99, 108, 97, 115, 115, 61, 34, 119, 101, 108, 108, 32, 119, 101, 108, 108, 45, 115, 109, 97, 108, 108, 32, 115, 105, 103, 110, 45, 108, 101, 102, 116, 51, 34, 62, 10, 47, 47, 32, 67, 111, 109, 109, 111, 110, 74, 83, 10, 118, 97, 114, 32, 66, 117, 116, 116, 111, 110, 32, 61, 32, 114, 101, 113, 117, 105, 114, 101, 40, 39, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 47, 108, 105, 98, 47, 66, 117, 116, 116, 111, 110, 39, 41, 10, 47, 47, 32, 69, 83, 54, 10, 105, 109, 112, 111, 114, 116, 32, 123, 66, 117, 116, 116, 111, 110, 125, 32, 102, 114, 111, 109, 32, 39, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 39, 10, 46, 46, 46, 10, 114, 101, 110, 100, 101, 114, 58, 32, 102, 117, 110, 99, 116, 105, 111, 110, 40, 41, 32, 123, 10, 32, 32, 32, 32, 114, 101, 116, 117, 114, 110, 32, 40, 10, 32, 32, 32, 32, 32, 32, 32, 32, 38, 35, 54, 48, 59, 100, 105, 118, 38, 35, 54, 50, 59, 10, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 38, 35, 54, 48, 59, 66, 117, 116, 116, 111, 110, 32, 112, 104, 83, 116, 121, 108, 101, 61, 34, 105, 110, 102, 111, 34, 32, 112, 104, 83, 105, 122, 101, 61, 34, 108, 103, 34, 32, 97, 99, 116, 105, 118, 101, 38, 35, 54, 50, 59, 230, 140, 137, 233, 146, 174, 38, 35, 54, 48, 59, 47, 66, 117, 116, 116, 111, 110, 38, 35, 54, 50, 59, 10, 32, 32, 32, 32, 32, 32, 32, 32, 38, 35, 54, 48, 59, 47, 100, 105, 118, 38, 35, 54, 50, 59, 10, 32, 32, 32, 32, 41, 59, 10, 125, 10, 60, 47, 112, 114, 101, 62, 10, 10, 60, 104, 51, 62, 66, 114, 111, 119, 115, 101, 114, 32, 103, 108, 111, 98, 97, 108, 115, 60, 47, 104, 51, 62, 10, 60, 112, 114, 101, 32, 99, 108, 97, 115, 115, 61, 34, 119, 101, 108, 108, 32, 119, 101, 108, 108, 45, 115, 109, 97, 108, 108, 32, 115, 105, 103, 110, 45, 108, 101, 102, 116, 51, 34, 62, 10, 38, 35, 54, 48, 59, 115, 99, 114, 105, 112, 116, 32, 115, 114, 99, 61, 34, 104, 116, 116, 112, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 47, 100, 105, 115, 116, 47, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 46, 109, 105, 110, 46, 106, 115, 34, 38, 35, 54, 50, 59, 38, 35, 54, 48, 59, 47, 115, 99, 114, 105, 112, 116, 38, 35, 54, 50, 59, 10, 46, 46, 46, 10, 114, 101, 110, 100, 101, 114, 58, 32, 102, 117, 110, 99, 116, 105, 111, 110, 40, 41, 32, 123, 10, 32, 32, 32, 32, 114, 101, 116, 117, 114, 110, 32, 40, 10, 32, 32, 32, 32, 32, 32, 32, 32, 38, 35, 54, 48, 59, 100, 105, 118, 38, 35, 54, 50, 59, 10, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 38, 35, 54, 48, 59, 80, 104, 111, 101, 110, 105, 120, 46, 66, 117, 116, 116, 111, 110, 32, 112, 104, 83, 116, 121, 108, 101, 61, 34, 105, 110, 102, 111, 34, 32, 112, 104, 83, 105, 122, 101, 61, 34, 108, 103, 34, 32, 97, 99, 116, 105, 118, 101, 38, 35, 54, 50, 59, 230, 140, 137, 233, 146, 174, 38, 35, 54, 48, 59, 47, 80, 104, 111, 101, 110, 105, 120, 46, 66, 117, 116, 116, 111, 110, 38, 35, 54, 50, 59, 10, 32, 32, 32, 32, 32, 32, 32, 32, 38, 35, 54, 48, 59, 47, 100, 105, 118, 38, 35, 54, 50, 59, 10, 32, 32, 32, 32, 41, 59, 10, 125, 10, 60, 47, 112, 114, 101, 62, 10, 10, 60, 104, 50, 62, 229, 133, 182, 228, 187, 150, 60, 47, 104, 50, 62, 10, 60, 112, 62, 229, 146, 140, 32, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 34, 62, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 60, 47, 97, 62, 32, 40, 231, 187, 132, 228, 187, 182, 230, 160, 183, 229, 188, 143, 229, 186, 147, 41, 233, 133, 141, 229, 144, 136, 228, 189, 191, 231, 148, 168, 230, 156, 128, 228, 189, 179, 227, 128, 130, 60, 47, 112, 62, 10, 60, 104, 51, 62, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 60, 47, 104, 51, 62, 10, 60, 112, 62, 233, 187, 152, 232, 174, 164, 230, 143, 144, 228, 190, 155, 233, 152, 191, 230, 179, 162, 231, 189, 151, 233, 187, 152, 232, 174, 164, 230, 160, 183, 229, 188, 143, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 46, 109, 105, 110, 46, 99, 115, 115, 44, 229, 166, 130, 230, 158, 156, 233, 156, 128, 232, 166, 129, 73, 79, 83, 230, 160, 183, 229, 188, 143, 229, 144, 140, 230, 151, 182, 229, 188, 149, 229, 133, 165, 115, 107, 105, 110, 45, 105, 111, 115, 46, 109, 105, 110, 46, 99, 115, 115, 229, 141, 179, 229, 143, 175, 227, 128, 130, 60, 47, 112, 62, 10, 60, 112, 114, 101, 32, 99, 108, 97, 115, 115, 61, 34, 119, 101, 108, 108, 32, 119, 101, 108, 108, 45, 115, 109, 97, 108, 108, 32, 115, 105, 103, 110, 45, 108, 101, 102, 116, 51, 34, 62, 10, 47, 47, 32, 71, 108, 111, 98, 97, 108, 10, 38, 35, 54, 48, 59, 108, 105, 110, 107, 32, 114, 101, 108, 61, 34, 115, 116, 121, 108, 101, 115, 104, 101, 101, 116, 34, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 47, 100, 105, 115, 116, 47, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 46, 109, 105, 110, 46, 99, 115, 115, 34, 32, 47, 38, 35, 54, 50, 59, 10, 47, 47, 32, 97, 100, 100, 32, 73, 79, 83, 32, 115, 107, 105, 110, 10, 38, 35, 54, 48, 59, 108, 105, 110, 107, 32, 114, 101, 108, 61, 34, 115, 116, 121, 108, 101, 115, 104, 101, 101, 116, 34, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 47, 100, 105, 115, 116, 47, 115, 107, 105, 110, 45, 105, 111, 115, 46, 109, 105, 110, 46, 99, 115, 115, 34, 32, 47, 38, 35, 54, 50, 59, 10, 10, 47, 47, 32, 69, 83, 54, 10, 105, 109, 112, 111, 114, 116, 32, 39, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 47, 108, 101, 115, 115, 47, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 46, 108, 101, 115, 115, 39, 59, 10, 105, 109, 112, 111, 114, 116, 32, 39, 112, 104, 111, 101, 110, 105, 120, 45, 115, 116, 121, 108, 101, 115, 47, 108, 101, 115, 115, 47, 115, 107, 105, 110, 45, 105, 111, 115, 46, 108, 101, 115, 115, 39, 59, 10, 60, 47, 112, 114, 101, 62, 10, 10, 60, 104, 51, 62, 112, 104, 111, 101, 110, 105, 120, 231, 179, 187, 229, 136, 151, 230, 143, 146, 228, 187, 182, 40, 229, 174, 140, 229, 150, 132, 228, 184, 173, 46, 46, 46, 41, 60, 47, 104, 51, 62, 10, 60, 117, 108, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 112, 105, 99, 107, 101, 114, 34, 62, 112, 104, 45, 112, 105, 99, 107, 101, 114, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 233, 128, 137, 230, 139, 169, 40, 230, 151, 182, 233, 151, 180, 227, 128, 129, 229, 159, 142, 229, 184, 130, 231, 173, 137, 41, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 102, 105, 108, 116, 101, 114, 34, 62, 112, 104, 45, 102, 105, 108, 116, 101, 114, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 228, 184, 139, 230, 139, 137, 231, 173, 155, 233, 128, 137, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 99, 97, 115, 99, 97, 100, 101, 45, 115, 101, 108, 101, 99, 116, 111, 114, 34, 62, 112, 104, 45, 99, 97, 115, 99, 97, 100, 101, 45, 115, 101, 108, 101, 99, 116, 111, 114, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 231, 186, 167, 232, 129, 148, 233, 128, 137, 230, 139, 169, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 105, 109, 97, 103, 101, 45, 108, 105, 115, 116, 34, 62, 112, 104, 45, 105, 109, 97, 103, 101, 45, 108, 105, 115, 116, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 229, 155, 190, 231, 137, 135, 229, 136, 151, 232, 161, 168, 229, 177, 149, 231, 164, 186, 227, 128, 129, 229, 162, 158, 229, 136, 160, 227, 128, 129, 229, 133, 168, 229, 177, 143, 230, 159, 165, 231, 156, 139, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 105, 109, 97, 103, 101, 45, 117, 112, 108, 111, 97, 100, 34, 62, 112, 104, 45, 105, 109, 97, 103, 101, 45, 117, 112, 108, 111, 97, 100, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 229, 155, 190, 231, 137, 135, 228, 184, 138, 228, 188, 160, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 117, 112, 108, 111, 97, 100, 34, 62, 112, 104, 45, 117, 112, 108, 111, 97, 100, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 230, 150, 135, 228, 187, 182, 228, 184, 138, 228, 188, 160, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 115, 101, 108, 101, 99, 116, 111, 114, 34, 62, 112, 104, 45, 115, 101, 108, 101, 99, 116, 111, 114, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 230, 144, 156, 231, 180, 162, 231, 173, 155, 233, 128, 137, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 115, 119, 105, 112, 101, 34, 62, 112, 104, 45, 115, 119, 105, 112, 101, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 229, 164, 167, 229, 155, 190, 230, 187, 154, 229, 138, 168, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 32, 32, 32, 32, 60, 108, 105, 62, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 45, 115, 99, 114, 111, 108, 108, 34, 62, 112, 104, 45, 115, 99, 114, 111, 108, 108, 60, 47, 97, 62, 58, 32, 229, 159, 186, 228, 186, 142, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 231, 154, 132, 231, 167, 187, 229, 138, 168, 231, 171, 175, 231, 154, 132, 96, 230, 187, 154, 229, 138, 168, 229, 136, 183, 230, 150, 176, 96, 231, 187, 132, 228, 187, 182, 60, 47, 108, 105, 62, 10, 60, 47, 117, 108, 62, 10, 10, 60, 104, 51, 62, 230, 142, 168, 232, 141, 144, 80, 67, 231, 171, 175, 82, 101, 97, 99, 116, 32, 85, 73, 231, 187, 132, 228, 187, 182, 229, 186, 147, 32, 45, 32, 101, 97, 103, 108, 101, 45, 117, 105, 60, 47, 104, 51, 62, 10, 60, 112, 62, 71, 105, 116, 104, 117, 98, 58, 32, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 101, 97, 103, 108, 101, 45, 117, 105, 34, 62, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 101, 97, 103, 108, 101, 45, 117, 105, 60, 47, 97, 62, 60, 47, 112, 62, 10, 60, 112, 62, 68, 111, 99, 117, 109, 101, 110, 116, 58, 32, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 101, 97, 103, 108, 101, 45, 117, 105, 47, 100, 111, 99, 47, 105, 110, 100, 101, 120, 46, 104, 116, 109, 108, 34, 62, 104, 116, 116, 112, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 101, 97, 103, 108, 101, 45, 117, 105, 47, 100, 111, 99, 47, 105, 110, 100, 101, 120, 46, 104, 116, 109, 108, 60, 47, 97, 62, 60, 47, 112, 62, 10, 10, 60, 104, 51, 62, 230, 142, 168, 232, 141, 144, 73, 99, 111, 110, 229, 186, 147, 32, 45, 32, 103, 102, 115, 45, 105, 99, 111, 110, 115, 60, 47, 104, 51, 62, 10, 60, 112, 62, 71, 105, 116, 104, 117, 98, 58, 32, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 103, 102, 115, 45, 105, 99, 111, 110, 115, 34, 62, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 103, 102, 115, 45, 105, 99, 111, 110, 115, 60, 47, 97, 62, 60, 47, 112, 62, 10, 60, 112, 62, 68, 111, 99, 117, 109, 101, 110, 116, 58, 32, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 103, 102, 115, 45, 105, 99, 111, 110, 115, 47, 105, 110, 100, 101, 120, 46, 104, 116, 109, 108, 34, 62, 104, 116, 116, 112, 115, 58, 47, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 46, 103, 105, 116, 104, 117, 98, 46, 105, 111, 47, 103, 102, 115, 45, 105, 99, 111, 110, 115, 47, 105, 110, 100, 101, 120, 46, 104, 116, 109, 108, 60, 47, 97, 62, 60, 47, 112, 62, 10, 10, 60, 100, 105, 118, 32, 115, 116, 121, 108, 101, 61, 34, 109, 97, 114, 103, 105, 110, 58, 50, 53, 112, 120, 32, 45, 50, 48, 112, 120, 32, 45, 49, 53, 112, 120, 59, 112, 97, 100, 100, 105, 110, 103, 58, 53, 48, 112, 120, 32, 50, 52, 112, 120, 32, 54, 48, 112, 120, 32, 50, 52, 112, 120, 59, 98, 111, 120, 45, 115, 105, 122, 105, 110, 103, 58, 98, 111, 114, 100, 101, 114, 45, 98, 111, 120, 59, 98, 97, 99, 107, 103, 114, 111, 117, 110, 100, 45, 99, 111, 108, 111, 114, 58, 114, 103, 98, 40, 50, 51, 56, 44, 50, 51, 56, 44, 50, 51, 56, 41, 59, 116, 101, 120, 116, 45, 97, 108, 105, 103, 110, 58, 99, 101, 110, 116, 101, 114, 59, 34, 62, 10, 32, 32, 32, 32, 60, 112, 32, 99, 108, 97, 115, 115, 61, 34, 108, 101, 97, 100, 34, 62, 228, 189, 191, 231, 148, 168, 228, 184, 173, 233, 129, 135, 229, 136, 176, 233, 151, 174, 233, 162, 152, 232, 175, 183, 230, 143, 144, 228, 186, 164, 105, 115, 115, 117, 101, 58, 32, 60, 97, 32, 104, 114, 101, 102, 61, 34, 104, 116, 116, 112, 115, 58, 47, 47, 103, 105, 116, 104, 117, 98, 46, 99, 111, 109, 47, 102, 117, 116, 117, 114, 101, 45, 116, 101, 97, 109, 47, 112, 104, 111, 101, 110, 105, 120, 45, 117, 105, 47, 105, 115, 115, 117, 101, 115, 34, 62, 80, 104, 111, 101, 110, 105, 120, 45, 117, 105, 32, 73, 115, 115, 117, 101, 115, 60, 47, 97, 62, 60, 47, 112, 62, 10, 32, 32, 32, 32, 60, 112, 32, 99, 108, 97, 115, 115, 61, 34, 108, 101, 97, 100, 34, 62, 70, 111, 114, 32, 231, 130, 185, 232, 175, 132, 231, 154, 132, 229, 176, 143, 228, 188, 153, 228, 188, 180, 44, 32, 229, 143, 175, 229, 164, 167, 232, 177, 161, 32, 64, 99, 104, 101, 110, 97, 105, 98, 105, 110, 103, 32, 230, 136, 150, 32, 64, 109, 105, 110, 46, 120, 105, 97, 111, 60, 47, 112, 62, 10, 60, 47, 100, 105, 118, 62, 10 ] }, "version": "1.0.0", "url": "", "navs": [ { "name": "主页", "url": "index.html" } ], "isApp": true }, "files": { "src/menu/Menu.js": { "name": "src/menu/Menu.js", "modules": { "菜单组件": 1 }, "classes": { "Menu": 1 }, "fors": {}, "namespaces": {} }, "src/menu/MenuBody.js": { "name": "src/menu/MenuBody.js", "modules": {}, "classes": { "MenuBody": 1 }, "fors": {}, "namespaces": {} }, "src/menu/MenuHeader.js": { "name": "src/menu/MenuHeader.js", "modules": {}, "classes": { "MenuHeader": 1 }, "fors": {}, "namespaces": {} }, "src/menu/MenuItem.js": { "name": "src/menu/MenuItem.js", "modules": {}, "classes": { "MenuItem": 1 }, "fors": {}, "namespaces": {} }, "src/menu/MenuList.js": { "name": "src/menu/MenuList.js", "modules": {}, "classes": { "MenuList": 1 }, "fors": {}, "namespaces": {} }, "src/menu/MenuNav.js": { "name": "src/menu/MenuNav.js", "modules": {}, "classes": { "MenuNav": 1 }, "fors": {}, "namespaces": {} }, "src/modal/Alert.js": { "name": "src/modal/Alert.js", "modules": {}, "classes": { "Alert": 1 }, "fors": {}, "namespaces": {} }, "src/modal/Dialog.js": { "name": "src/modal/Dialog.js", "modules": { "弹出框组件": 1 }, "classes": { "Dialog": 1 }, "fors": {}, "namespaces": {} }, "src/modal/Prompt.js": { "name": "src/modal/Prompt.js", "modules": {}, "classes": { "Prompt": 1 }, "fors": {}, "namespaces": {} }, "src/utils/ClassNameMixin.js": { "name": "src/utils/ClassNameMixin.js", "modules": {}, "classes": {}, "fors": {}, "namespaces": {} }, "src/utils/MethodMixin.js": { "name": "src/utils/MethodMixin.js", "modules": {}, "classes": {}, "fors": {}, "namespaces": {} }, "src/utils/PropertyMixin.js": { "name": "src/utils/PropertyMixin.js", "modules": {}, "classes": {}, "fors": {}, "namespaces": {} }, "src/utils/Tool.js": { "name": "src/utils/Tool.js", "modules": {}, "classes": {}, "fors": {}, "namespaces": {} }, "src/utils/constants.js": { "name": "src/utils/constants.js", "modules": {}, "classes": {}, "fors": {}, "namespaces": {} }, "src/utils/extend.js": { "name": "src/utils/extend.js", "modules": {}, "classes": {}, "fors": {}, "namespaces": {} }, "src/Accordion.js": { "name": "src/Accordion.js", "modules": { "操作类组件": 1 }, "classes": { "Accordion": 1 }, "fors": {}, "namespaces": {} }, "src/Animate.js": { "name": "src/Animate.js", "modules": {}, "classes": { "Animate": 1 }, "fors": {}, "namespaces": {} }, "src/Badge.js": { "name": "src/Badge.js", "modules": {}, "classes": { "Badge": 1 }, "fors": {}, "namespaces": {} }, "src/Button.js": { "name": "src/Button.js", "modules": {}, "classes": { "Button": 1 }, "fors": {}, "namespaces": {} }, "src/ButtonGroup.js": { "name": "src/ButtonGroup.js", "modules": {}, "classes": { "ButtonGroup": 1 }, "fors": {}, "namespaces": {} }, "src/Col.js": { "name": "src/Col.js", "modules": {}, "classes": { "Col": 1 }, "fors": {}, "namespaces": {} }, "src/Drag.js": { "name": "src/Drag.js", "modules": { "辅助组件": 1 }, "classes": { "Drag": 1 }, "fors": {}, "namespaces": {} }, "src/FormGroup.js": { "name": "src/FormGroup.js", "modules": {}, "classes": { "FormGroup": 1 }, "fors": {}, "namespaces": {} }, "src/Grid.js": { "name": "src/Grid.js", "modules": { "布局组件": 1 }, "classes": { "Grid": 1 }, "fors": {}, "namespaces": {} }, "src/Icon.js": { "name": "src/Icon.js", "modules": {}, "classes": { "Icon": 1 }, "fors": {}, "namespaces": {} }, "src/ImageList.js": { "name": "src/ImageList.js", "modules": {}, "classes": { "ImageList": 1 }, "fors": {}, "namespaces": {} }, "src/Input.js": { "name": "src/Input.js", "modules": {}, "classes": { "Input": 1 }, "fors": {}, "namespaces": {} }, "src/Label.js": { "name": "src/Label.js", "modules": { "标签组件": 1 }, "classes": { "Label": 1 }, "fors": {}, "namespaces": {} }, "src/LoadingList.js": { "name": "src/LoadingList.js", "modules": {}, "classes": { "LoadingList": 1 }, "fors": {}, "namespaces": {} }, "src/Popover.js": { "name": "src/Popover.js", "modules": {}, "classes": { "Popover": 1 }, "fors": {}, "namespaces": {} }, "src/Popup.js": { "name": "src/Popup.js", "modules": {}, "classes": { "Popup": 1 }, "fors": {}, "namespaces": {} }, "src/Row.js": { "name": "src/Row.js", "modules": {}, "classes": { "Row": 1 }, "fors": {}, "namespaces": {} }, "src/Slider.js": { "name": "src/Slider.js", "modules": {}, "classes": { "Slider": 1 }, "fors": {}, "namespaces": {} }, "src/Star.js": { "name": "src/Star.js", "modules": { "基础组件": 1 }, "classes": { "Star": 1 }, "fors": {}, "namespaces": {} }, "src/Steps.js": { "name": "src/Steps.js", "modules": {}, "classes": { "Steps": 1 }, "fors": {}, "namespaces": {} }, "src/Swipe.js": { "name": "src/Swipe.js", "modules": {}, "classes": { "Swipe": 1 }, "fors": {}, "namespaces": {} }, "src/Switch.js": { "name": "src/Switch.js", "modules": {}, "classes": { "Switch": 1 }, "fors": {}, "namespaces": {} }, "src/Tab.js": { "name": "src/Tab.js", "modules": {}, "classes": { "Tab": 1 }, "fors": {}, "namespaces": {} }, "src/TableView.js": { "name": "src/TableView.js", "modules": {}, "classes": { "TableView": 1 }, "fors": {}, "namespaces": {} }, "src/Tabset.js": { "name": "src/Tabset.js", "modules": { "选项卡": 1 }, "classes": { "Tabset": 1 }, "fors": {}, "namespaces": {} }, "src/Textarea.js": { "name": "src/Textarea.js", "modules": { "表单组件": 1 }, "classes": { "TextArea": 1 }, "fors": {}, "namespaces": {} }, "src/Toast.js": { "name": "src/Toast.js", "modules": {}, "classes": { "Toast": 1 }, "fors": {}, "namespaces": {} }, "src/Whisper.js": { "name": "src/Whisper.js", "modules": { "提示组件": 1 }, "classes": { "Whisper": 1 }, "fors": {}, "namespaces": {} } }, "modules": { "菜单组件": { "name": "菜单组件", "submodules": {}, "classes": { "Menu": 1, "MenuBody": 1, "MenuHeader": 1, "MenuItem": 1, "MenuList": 1, "MenuNav": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/menu/MenuNav.js", "line": 6, "description": "
菜单组件，主要包括组件:
\nMenu 菜单
\nMenuHeader 菜单头部
\nMenuBody 菜单主体
\nMenuNav 菜单导航
\nMenuList 菜单导航列表
\nMenuItem 菜单导航列表项
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "弹出框组件": { "name": "弹出框组件", "submodules": {}, "classes": { "Alert": 1, "Dialog": 1, "Prompt": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/modal/Prompt.js", "line": 11, "description": "
弹出框组件，主要包括组件:
\nDialog 基础弹框
\nAlert弹框
\nPrompt弹框\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "操作类组件": { "name": "操作类组件", "submodules": { "undefined": 1 }, "classes": { "ImageList": 1, "LoadingList": 1, "Popup": 1, "Slider": 1, "Steps": 1, "Toast": 1, "Accordion": 1, "Swipe": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/Toast.js", "line": 7, "description": "
操作类组件，主要包括组件:
\nAccordion 手风琴
\nToast 飘字
\nPopup 弹层
\nSlider 滑动输入条
\nSwipe 左滑动
\nMenu 菜单
\nLoadingList 加载更多
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "辅助组件": { "name": "辅助组件", "submodules": {}, "classes": { "Drag": 1, "Animate": 1 }, "fors": {}, "namespaces": {}, "tag": "module", "file": "src/Drag.js", "line": 6, "description": "拖拽组件
\n- 兼容移动端的touch和pc端的mouse事件。\n- 可通过onDrag设置抓取的回调函数, 返回抓取在屏幕上的位置, 分别保存在start和move中, 以x和y的形式展示。\n- 可通过onDrop设置松开瞬间的回调函数, 返回松开时在屏幕上的位置, 保存在end中, 以x和y的形式展示。\n\n示例:\n```code\n \n
{this.box = box}}>Drag
\n \n```\n```code\n onDrag(event,position){\n this.prePosition = position.start;\n this.nowPosition = position.move;\n\n this.distanceX = this.preDistanceX + this.nowPosition.x - this.prePosition.x;\n this.distanceY = this.preDistanceY + this.nowPosition.y - this.prePosition.y;\n console.log(this.distanceX, this.distanceY);\n }\n onDrop(event,position){\n this.preDistanceX = this.distanceX;\n this.preDistanceY = this.distanceY;\n }\n```" }, "标签组件": { "name": "标签组件", "submodules": {}, "classes": { "Icon": 1, "Badge": 1, "Label": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/Label.js", "line": 14, "description": "
标签组件，主要包括组件:
\nLabel 标签
\nBadge 徽章
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "基础组件": { "name": "基础组件", "submodules": {}, "classes": { "Button": 1, "ButtonGroup": 1, "Star": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/Star.js", "line": 16, "description": "
基础组件，主要包括:
\nStar 星级
\nButton 按钮
\n ButtonGroup 按钮组
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "布局组件": { "name": "布局组件", "submodules": { "undefined": 1 }, "classes": { "Row": 1, "TableView": 1, "Col": 1, "Grid": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/TableView.js", "line": 6, "description": "
主要栅格化布局组件
\nGrid 外框
\nRow 行排列
\nCol 竖排列
\nTableView 仿表格组件
\n
点击以上链接进行相关查看
", "itemtype": "main" }, "表单组件": { "name": "表单组件", "submodules": {}, "classes": { "Input": 1, "Switch": 1, "FormGroup": 1, "TextArea": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/Textarea.js", "line": 17, "description": "
表单组件，主要包括组件:
\nInput 文本框/单选框/多选框
\nTextarea 多行文本框
\nFormGroup 表单组
\nSwitch 开关
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "提示组件": { "name": "提示组件", "submodules": {}, "classes": { "Popover": 1, "Whisper": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/Whisper.js", "line": 17, "description": "
提示模块，主要包括一下两个组件:
\nWhisper
\nPopover
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" }, "选项卡": { "name": "选项卡", "submodules": {}, "classes": { "Tab": 1, "Tabset": 1 }, "fors": {}, "namespaces": {}, "tag": "main", "file": "src/Tabset.js", "line": 17, "description": "
tab选项卡，主要包括一下两个组件:
\ntabset
\ntab
\n
点击以上链接或者左侧导航栏的组件名称链接进行查看
", "itemtype": "main" } }, "classes": { "Menu": { "name": "Menu", "shortname": "Menu", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "菜单组件", "namespace": "", "file": "src/menu/Menu.js", "line": 25, "description": "菜单组件
\n- 可通过visible设置菜单初始是否可见，默认不可见。\n- 不设置scrollCeiling时默认菜单不吸顶，设置scrollCeiling为具体数值时表示从当前距离开始吸顶，设置0表示至始至终吸顶。\n- 可通过onMenuChange函数设置菜单打开收起的回调函数。\n\n主要属性和接口：\n- visible:初始展开或收起的状态, 默认false收起。\n- scrollCeiling:设置吸顶的距离, 默认不吸顶, 设置0表示始终吸顶。\n- onMenuChange:菜单打开关闭时的回调函数。
\n如：\n```code\n {console.log(visible);}}>\n \n 标题一\n \n \n ...\n \n \n```", "extends": "Component", "is_constructor": 1, "since": "1.3.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Menu, Button, Icon, Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class menu extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible: false,\n\t placement: 'top',\n\t align: 'left',\n\t width: 40,\n\t closeButton: false,\n\t navAlign: 'top',\n\t activeName: 'index',\n\t value: 'ha'\n\t }\n\t }\n\t\n\t onMenuChange(visible){\n\t console.log(visible);\n\t }\n\t\n\t switchAlign(){\n\t let newAlign = \"left\";\n\t\n\t if(this.state.align == \"left\") newAlign=\"right\";\n\t\n\t this.setState({\n\t align: newAlign\n\t });\n\t }\n\t\n\t switchPlacement(){\n\t this.setState({\n\t placement: \"left-full\"\n\t });\n\t }\n\t\n\t switchWidth(){\n\t this.setState({\n\t width: 50\n\t });\n\t }\n\t\n\t switchCloseButton(){\n\t this.setState({\n\t closeButton: !this.state.closeButton\n\t });\n\t }\n\t\n\t switchNavAlign(){\n\t this.setState({\n\t navAlign: 'center'\n\t });\n\t }\n\t\n\t switchActiveName(){\n\t this.setState({\n\t activeName: 'menu'\n\t });\n\t }\n\t\n\t // 必需\n\t setActiveName(name){\n\t this.setState({\n\t activeName: name,\n\t visible: false // 如果需要点击之后关闭false\n\t });\n\t }\n\t\n\t onMenuItemChange(name){\n\t console.log(name);\n\t }\n\t\n\t onInputChange(e){\n\t this.setState({\n\t value: e.target.value\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \n\t Phoenix\n\t \n\t \n\t
\n\t \n\t
\n\t \n\t 首页\n\t 菜单\n\t \n\t \n\t \n\t \n\t\n\t

Menu

\n\t

Menu属性

\n\t

visible(默认false) 初始可见值

\n\t \n\t\n\t

scrollCeiling 滚动吸顶的距离，默认不吸顶

\n\t

当前设置为100

\n\t \n\t\n\t

onMenuChange 菜单展开收起的回调函数

\n\t \n\t\n\t\n\t

MenuHeader属性

\n\t

align(默认left) 菜单按钮的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuBody属性

\n\t

placement(默认top) 菜单的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t

width(默认50) 侧边菜单的宽度

\n\t
\n\t \n\t
\n\t \n\t\n\t

closeButton 菜单主体的关闭按钮是否显示

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuNav属性

\n\t

align(默认top) 导航的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuList属性

\n\t

activeName(默认null) 当前导航选中的菜单项

\n\t
\n\t \n\t
\n\t \n\t\n\t

onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值

\n\t \n\t\n\t\n\t

MenuItem属性

\n\t

phIcon(默认无) 菜单项名称前面的符号️类型

\n\t \n\t\n\t

name(默认无) 当前导航选中的菜单项

\n\t \n\t\n\t

href(默认无) 菜单项的链接

\n\t \n\t\n\t

onMenuitemChange 点击菜单项时的回调

\n\t \n\t\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/menu" ], "isApp": true, "show": true }, "MenuBody": { "name": "MenuBody", "shortname": "MenuBody", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "菜单组件", "namespace": "", "file": "src/menu/MenuBody.js", "line": 9, "description": "菜单内容组件
\n- 通过placement设置菜单出现的位置和类型, 可选 [top,left,right,left-full,right-full,full-screen]。\n- 可通过width设置侧边菜单的宽度, 当前placement为top和full-screen不生效。\n- 可通过closeButton来配置菜单主体右上角X按钮是否显示。\n\n主要属性和接口：\n- placement:菜单出现的位置和类型, 默认top。\n- width:侧边菜单的宽度, 当前placement为top和full-screen不生效。\n- closeButton:菜单主体右上角X按钮是否显示, 默认不显示。
\n如：\n```code\n \n \n 标题一\n \n \n ...\n \n \n```", "extends": "Component", "is_constructor": 1, "since": "1.3.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Menu, Button, Icon, Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class menu extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible: false,\n\t placement: 'top',\n\t align: 'left',\n\t width: 40,\n\t closeButton: false,\n\t navAlign: 'top',\n\t activeName: 'index',\n\t value: 'ha'\n\t }\n\t }\n\t\n\t onMenuChange(visible){\n\t console.log(visible);\n\t }\n\t\n\t switchAlign(){\n\t let newAlign = \"left\";\n\t\n\t if(this.state.align == \"left\") newAlign=\"right\";\n\t\n\t this.setState({\n\t align: newAlign\n\t });\n\t }\n\t\n\t switchPlacement(){\n\t this.setState({\n\t placement: \"left-full\"\n\t });\n\t }\n\t\n\t switchWidth(){\n\t this.setState({\n\t width: 50\n\t });\n\t }\n\t\n\t switchCloseButton(){\n\t this.setState({\n\t closeButton: !this.state.closeButton\n\t });\n\t }\n\t\n\t switchNavAlign(){\n\t this.setState({\n\t navAlign: 'center'\n\t });\n\t }\n\t\n\t switchActiveName(){\n\t this.setState({\n\t activeName: 'menu'\n\t });\n\t }\n\t\n\t // 必需\n\t setActiveName(name){\n\t this.setState({\n\t activeName: name,\n\t visible: false // 如果需要点击之后关闭false\n\t });\n\t }\n\t\n\t onMenuItemChange(name){\n\t console.log(name);\n\t }\n\t\n\t onInputChange(e){\n\t this.setState({\n\t value: e.target.value\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \n\t Phoenix\n\t \n\t \n\t
\n\t \n\t
\n\t \n\t 首页\n\t 菜单\n\t \n\t \n\t \n\t \n\t\n\t

Menu

\n\t

Menu属性

\n\t

visible(默认false) 初始可见值

\n\t \n\t\n\t

scrollCeiling 滚动吸顶的距离，默认不吸顶

\n\t

当前设置为100

\n\t \n\t\n\t

onMenuChange 菜单展开收起的回调函数

\n\t \n\t\n\t\n\t

MenuHeader属性

\n\t

align(默认left) 菜单按钮的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuBody属性

\n\t

placement(默认top) 菜单的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t

width(默认50) 侧边菜单的宽度

\n\t
\n\t \n\t
\n\t \n\t\n\t

closeButton 菜单主体的关闭按钮是否显示

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuNav属性

\n\t

align(默认top) 导航的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuList属性

\n\t

activeName(默认null) 当前导航选中的菜单项

\n\t
\n\t \n\t
\n\t \n\t\n\t

onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值

\n\t \n\t\n\t\n\t

MenuItem属性

\n\t

phIcon(默认无) 菜单项名称前面的符号️类型

\n\t \n\t\n\t

name(默认无) 当前导航选中的菜单项

\n\t \n\t\n\t

href(默认无) 菜单项的链接

\n\t \n\t\n\t

onMenuitemChange 点击菜单项时的回调

\n\t \n\t\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/menu" ], "isApp": true, "show": true }, "MenuHeader": { "name": "MenuHeader", "shortname": "MenuHeader", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "菜单组件", "namespace": "", "file": "src/menu/MenuHeader.js", "line": 8, "description": "菜单头部组件
\n- 通过align设置菜单按钮的位置, 可选[left, right]。\n\n主要属性和接口：\n- align:设置菜单按钮的位置,默认left。
\n如：\n```code\n \n \n 标题一\n \n \n ...\n \n \n```", "extends": "Component", "is_constructor": 1, "since": "1.3.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Menu, Button, Icon, Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class menu extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible: false,\n\t placement: 'top',\n\t align: 'left',\n\t width: 40,\n\t closeButton: false,\n\t navAlign: 'top',\n\t activeName: 'index',\n\t value: 'ha'\n\t }\n\t }\n\t\n\t onMenuChange(visible){\n\t console.log(visible);\n\t }\n\t\n\t switchAlign(){\n\t let newAlign = \"left\";\n\t\n\t if(this.state.align == \"left\") newAlign=\"right\";\n\t\n\t this.setState({\n\t align: newAlign\n\t });\n\t }\n\t\n\t switchPlacement(){\n\t this.setState({\n\t placement: \"left-full\"\n\t });\n\t }\n\t\n\t switchWidth(){\n\t this.setState({\n\t width: 50\n\t });\n\t }\n\t\n\t switchCloseButton(){\n\t this.setState({\n\t closeButton: !this.state.closeButton\n\t });\n\t }\n\t\n\t switchNavAlign(){\n\t this.setState({\n\t navAlign: 'center'\n\t });\n\t }\n\t\n\t switchActiveName(){\n\t this.setState({\n\t activeName: 'menu'\n\t });\n\t }\n\t\n\t // 必需\n\t setActiveName(name){\n\t this.setState({\n\t activeName: name,\n\t visible: false // 如果需要点击之后关闭false\n\t });\n\t }\n\t\n\t onMenuItemChange(name){\n\t console.log(name);\n\t }\n\t\n\t onInputChange(e){\n\t this.setState({\n\t value: e.target.value\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \n\t Phoenix\n\t \n\t \n\t
\n\t \n\t
\n\t \n\t 首页\n\t 菜单\n\t \n\t \n\t \n\t \n\t\n\t

Menu

\n\t

Menu属性

\n\t

visible(默认false) 初始可见值

\n\t \n\t\n\t

scrollCeiling 滚动吸顶的距离，默认不吸顶

\n\t

当前设置为100

\n\t \n\t\n\t

onMenuChange 菜单展开收起的回调函数

\n\t \n\t\n\t\n\t

MenuHeader属性

\n\t

align(默认left) 菜单按钮的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuBody属性

\n\t

placement(默认top) 菜单的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t

width(默认50) 侧边菜单的宽度

\n\t
\n\t \n\t
\n\t \n\t\n\t

closeButton 菜单主体的关闭按钮是否显示

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuNav属性

\n\t

align(默认top) 导航的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuList属性

\n\t

activeName(默认null) 当前导航选中的菜单项

\n\t
\n\t \n\t
\n\t \n\t\n\t

onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值

\n\t \n\t\n\t\n\t

MenuItem属性

\n\t

phIcon(默认无) 菜单项名称前面的符号️类型

\n\t \n\t\n\t

name(默认无) 当前导航选中的菜单项

\n\t \n\t\n\t

href(默认无) 菜单项的链接

\n\t \n\t\n\t

onMenuitemChange 点击菜单项时的回调

\n\t \n\t\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/menu" ], "isApp": true, "show": true }, "MenuItem": { "name": "MenuItem", "shortname": "MenuItem", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "菜单组件", "namespace": "", "file": "src/menu/MenuItem.js", "line": 8, "description": "菜单导航列表项组件
\n- 可通过phIcon设置菜单项名称前符号的类型，具体可以参考[gfs-icons](https://future-team.github.io/gfs-icons/index.html)。 \n- 可通过href设置菜单项的跳转地址，可不设置，自定义回调函数onMenuitemChange。\n- 可通过name设置菜单项的唯一标识，对应MenuList的activeName。\n- 通过onMenuitemChange设置点击菜单项时的回调。\n\n主要属性和接口：\n- phIcon:菜单项名称前符号的类型，不设置时默认没有符号。 \n- href:菜单项的跳转地址，默认null。\n- name:菜单项的唯一标识。\n- onMenuitemChange:点击菜单项时的回调。
\n如：\n```code\n \n \n 标题一\n \n \n \n {this.setState({activeName:name})}}>\n {console.log(name);}}>首页\n \n \n \n \n```", "extends": "Component", "is_constructor": 1, "since": "1.4.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Menu, Button, Icon, Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class menu extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible: false,\n\t placement: 'top',\n\t align: 'left',\n\t width: 40,\n\t closeButton: false,\n\t navAlign: 'top',\n\t activeName: 'index',\n\t value: 'ha'\n\t }\n\t }\n\t\n\t onMenuChange(visible){\n\t console.log(visible);\n\t }\n\t\n\t switchAlign(){\n\t let newAlign = \"left\";\n\t\n\t if(this.state.align == \"left\") newAlign=\"right\";\n\t\n\t this.setState({\n\t align: newAlign\n\t });\n\t }\n\t\n\t switchPlacement(){\n\t this.setState({\n\t placement: \"left-full\"\n\t });\n\t }\n\t\n\t switchWidth(){\n\t this.setState({\n\t width: 50\n\t });\n\t }\n\t\n\t switchCloseButton(){\n\t this.setState({\n\t closeButton: !this.state.closeButton\n\t });\n\t }\n\t\n\t switchNavAlign(){\n\t this.setState({\n\t navAlign: 'center'\n\t });\n\t }\n\t\n\t switchActiveName(){\n\t this.setState({\n\t activeName: 'menu'\n\t });\n\t }\n\t\n\t // 必需\n\t setActiveName(name){\n\t this.setState({\n\t activeName: name,\n\t visible: false // 如果需要点击之后关闭false\n\t });\n\t }\n\t\n\t onMenuItemChange(name){\n\t console.log(name);\n\t }\n\t\n\t onInputChange(e){\n\t this.setState({\n\t value: e.target.value\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \n\t Phoenix\n\t \n\t \n\t
\n\t \n\t
\n\t \n\t 首页\n\t 菜单\n\t \n\t \n\t \n\t \n\t\n\t

Menu

\n\t

Menu属性

\n\t

visible(默认false) 初始可见值

\n\t \n\t\n\t

scrollCeiling 滚动吸顶的距离，默认不吸顶

\n\t

当前设置为100

\n\t \n\t\n\t

onMenuChange 菜单展开收起的回调函数

\n\t \n\t\n\t\n\t

MenuHeader属性

\n\t

align(默认left) 菜单按钮的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuBody属性

\n\t

placement(默认top) 菜单的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t

width(默认50) 侧边菜单的宽度

\n\t
\n\t \n\t
\n\t \n\t\n\t

closeButton 菜单主体的关闭按钮是否显示

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuNav属性

\n\t

align(默认top) 导航的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuList属性

\n\t

activeName(默认null) 当前导航选中的菜单项

\n\t
\n\t \n\t
\n\t \n\t\n\t

onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值

\n\t \n\t\n\t\n\t

MenuItem属性

\n\t

phIcon(默认无) 菜单项名称前面的符号️类型

\n\t \n\t\n\t

name(默认无) 当前导航选中的菜单项

\n\t \n\t\n\t

href(默认无) 菜单项的链接

\n\t \n\t\n\t

onMenuitemChange 点击菜单项时的回调

\n\t \n\t\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/menu" ], "isApp": true, "show": true }, "MenuList": { "name": "MenuList", "shortname": "MenuList", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "菜单组件", "namespace": "", "file": "src/menu/MenuList.js", "line": 8, "description": "菜单导航列表组件
\n- 通过activeName设置当前导航选中的菜单项， 必需。\n- 通过onMenulistChange函数设置点击菜单项时的回调，函数内必需手动更改activeName值，必需。\n\n主要属性和接口：\n- activeName:设置当前导航选中的菜单项,默认null。 \n- onMenulistChange:点击菜单项时的回调。
\n如：\n```code\n \n \n 标题一\n \n \n \n {this.setState({activeName:name})}}>\n ...\n \n \n \n \n```", "extends": "Component", "is_constructor": 1, "since": "1.4.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Menu, Button, Icon, Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class menu extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible: false,\n\t placement: 'top',\n\t align: 'left',\n\t width: 40,\n\t closeButton: false,\n\t navAlign: 'top',\n\t activeName: 'index',\n\t value: 'ha'\n\t }\n\t }\n\t\n\t onMenuChange(visible){\n\t console.log(visible);\n\t }\n\t\n\t switchAlign(){\n\t let newAlign = \"left\";\n\t\n\t if(this.state.align == \"left\") newAlign=\"right\";\n\t\n\t this.setState({\n\t align: newAlign\n\t });\n\t }\n\t\n\t switchPlacement(){\n\t this.setState({\n\t placement: \"left-full\"\n\t });\n\t }\n\t\n\t switchWidth(){\n\t this.setState({\n\t width: 50\n\t });\n\t }\n\t\n\t switchCloseButton(){\n\t this.setState({\n\t closeButton: !this.state.closeButton\n\t });\n\t }\n\t\n\t switchNavAlign(){\n\t this.setState({\n\t navAlign: 'center'\n\t });\n\t }\n\t\n\t switchActiveName(){\n\t this.setState({\n\t activeName: 'menu'\n\t });\n\t }\n\t\n\t // 必需\n\t setActiveName(name){\n\t this.setState({\n\t activeName: name,\n\t visible: false // 如果需要点击之后关闭false\n\t });\n\t }\n\t\n\t onMenuItemChange(name){\n\t console.log(name);\n\t }\n\t\n\t onInputChange(e){\n\t this.setState({\n\t value: e.target.value\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \n\t Phoenix\n\t \n\t \n\t
\n\t \n\t
\n\t \n\t 首页\n\t 菜单\n\t \n\t \n\t \n\t \n\t\n\t

Menu

\n\t

Menu属性

\n\t

visible(默认false) 初始可见值

\n\t \n\t\n\t

scrollCeiling 滚动吸顶的距离，默认不吸顶

\n\t

当前设置为100

\n\t \n\t\n\t

onMenuChange 菜单展开收起的回调函数

\n\t \n\t\n\t\n\t

MenuHeader属性

\n\t

align(默认left) 菜单按钮的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuBody属性

\n\t

placement(默认top) 菜单的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t

width(默认50) 侧边菜单的宽度

\n\t
\n\t \n\t
\n\t \n\t\n\t

closeButton 菜单主体的关闭按钮是否显示

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuNav属性

\n\t

align(默认top) 导航的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuList属性

\n\t

activeName(默认null) 当前导航选中的菜单项

\n\t
\n\t \n\t
\n\t \n\t\n\t

onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值

\n\t \n\t\n\t\n\t

MenuItem属性

\n\t

phIcon(默认无) 菜单项名称前面的符号️类型

\n\t \n\t\n\t

name(默认无) 当前导航选中的菜单项

\n\t \n\t\n\t

href(默认无) 菜单项的链接

\n\t \n\t\n\t

onMenuitemChange 点击菜单项时的回调

\n\t \n\t\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/menu" ], "isApp": true, "show": true }, "MenuNav": { "name": "MenuNav", "shortname": "MenuNav", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "菜单组件", "namespace": "", "file": "src/menu/MenuNav.js", "line": 6, "description": "菜单导航组件
\n- 通过align设置菜单导航部分的位置, 可选[top,center,bottom]。\n\n主要属性和接口：\n- align:设置菜单导航部分的位置,默认top。
\n如：\n```code\n \n \n 标题一\n \n \n \n ...\n \n \n \n```", "extends": "Component", "is_constructor": 1, "since": "1.4.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Menu, Button, Icon, Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class menu extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible: false,\n\t placement: 'top',\n\t align: 'left',\n\t width: 40,\n\t closeButton: false,\n\t navAlign: 'top',\n\t activeName: 'index',\n\t value: 'ha'\n\t }\n\t }\n\t\n\t onMenuChange(visible){\n\t console.log(visible);\n\t }\n\t\n\t switchAlign(){\n\t let newAlign = \"left\";\n\t\n\t if(this.state.align == \"left\") newAlign=\"right\";\n\t\n\t this.setState({\n\t align: newAlign\n\t });\n\t }\n\t\n\t switchPlacement(){\n\t this.setState({\n\t placement: \"left-full\"\n\t });\n\t }\n\t\n\t switchWidth(){\n\t this.setState({\n\t width: 50\n\t });\n\t }\n\t\n\t switchCloseButton(){\n\t this.setState({\n\t closeButton: !this.state.closeButton\n\t });\n\t }\n\t\n\t switchNavAlign(){\n\t this.setState({\n\t navAlign: 'center'\n\t });\n\t }\n\t\n\t switchActiveName(){\n\t this.setState({\n\t activeName: 'menu'\n\t });\n\t }\n\t\n\t // 必需\n\t setActiveName(name){\n\t this.setState({\n\t activeName: name,\n\t visible: false // 如果需要点击之后关闭false\n\t });\n\t }\n\t\n\t onMenuItemChange(name){\n\t console.log(name);\n\t }\n\t\n\t onInputChange(e){\n\t this.setState({\n\t value: e.target.value\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \n\t Phoenix\n\t \n\t \n\t
\n\t \n\t
\n\t \n\t 首页\n\t 菜单\n\t \n\t \n\t \n\t \n\t\n\t

Menu

\n\t

Menu属性

\n\t

visible(默认false) 初始可见值

\n\t \n\t\n\t

scrollCeiling 滚动吸顶的距离，默认不吸顶

\n\t

当前设置为100

\n\t \n\t\n\t

onMenuChange 菜单展开收起的回调函数

\n\t \n\t\n\t\n\t

MenuHeader属性

\n\t

align(默认left) 菜单按钮的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuBody属性

\n\t

placement(默认top) 菜单的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t

width(默认50) 侧边菜单的宽度

\n\t
\n\t \n\t
\n\t \n\t\n\t

closeButton 菜单主体的关闭按钮是否显示

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuNav属性

\n\t

align(默认top) 导航的位置

\n\t
\n\t \n\t
\n\t \n\t\n\t\n\t

MenuList属性

\n\t

activeName(默认null) 当前导航选中的菜单项

\n\t
\n\t \n\t
\n\t \n\t\n\t

onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值

\n\t \n\t\n\t\n\t

MenuItem属性

\n\t

phIcon(默认无) 菜单项名称前面的符号️类型

\n\t \n\t\n\t

name(默认无) 当前导航选中的菜单项

\n\t \n\t\n\t

href(默认无) 菜单项的链接

\n\t \n\t\n\t

onMenuitemChange 点击菜单项时的回调

\n\t \n\t\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/menu" ], "isApp": true, "show": true }, "Alert": { "name": "Alert", "shortname": "Alert", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "弹出框组件", "namespace": "", "file": "src/modal/Alert.js", "line": 10, "description": "Alert组件
\n- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。\n- 可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)\n- 默认有[确定]1个按钮，点击[确定]默认的执行函数是onClose直接关闭。\n- 通过visible设置弹框是否显示, 可选true/false, 必需。\n- 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。\n- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。\n- 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。\n\n主要属性和接口：\n- title:弹框的标题，必需。\n- content:弹框的内容，必需。\n- buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。\n- visible:弹框是否显示标识, 默认false不可见。\n- onClose:关闭弹框的功能函数。\n- closeButton:右上角关闭按钮是否显示的标识, 默认不显示。\n- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭。\n\n示例:\n```code\n const buttons = [\n {text: \"取消\", phStyle: \"gray\", otherProps: {hollow: true}}, // text默认\"确定\", phStyle默认primary，onHandle默认onClose\n {text: \"确定\", onHandle: this.onConfirm}\n ];\n ...\n \n```", "extends": "Component", "is_constructor": 1, "since": "1.5.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Alert, Button} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class alert extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t visible1: false,\n\t visible2: false,\n\t visible3: false,\n\t visible4: false\n\t }\n\t }\n\t\n\t onClose(key){\n\t let o = {};\n\t o[key] = false;\n\t this.setState(o);\n\t }\n\t\n\t onConfirm(key){\n\t this.onClose(key);\n\t }\n\t\n\t render(){\n\t const buttons1 = [\n\t // text默认\"确定\", phStyle默认primary，onHandle默认onClose, otherProps传按钮的属性\n\t {text: \"取消\", phStyle: \"gray\", otherProps: {hollow: true}}, \n\t {onHandle: this.onConfirm.bind(this,\"visible2\")}\n\t ],\n\t buttons2 = [\n\t {text: \"按钮一\", otherProps: {hollow: true}},\n\t {text: \"按钮二\", otherProps: {hollow: true}},\n\t {text: \"按钮三\", otherProps: {hollow: true}}\n\t ];\n\t const content =

这里是弹出框的内容...

;\n\t\n\t return(\n\t
\n\t

Alert

\n\t

title 定义标题; content 定义内容

\n\t
\n\t \n\t
\n\t \n\t \n\t\n\t

buttons 定义尾部按钮

\n\t
\n\t

2个按钮

\n\t \n\t

多个按钮

\n\t \n\t
\n\t \n\t \n\t \n\t\n\t

其他属性(visible、onClose、closeButton、shadowDisabled)参照Dialog组件

\n\t
\n\t \n\t
\n\t \n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/alert" ], "isApp": true, "show": true }, "Dialog": { "name": "Dialog", "shortname": "Dialog", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "弹出框组件", "namespace": "", "file": "src/modal/Dialog.js", "line": 18, "description": "弹框组件
\n- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。\n- 通过visible设置弹框是否显示, 可选true/false, 必需。\n- 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。\n- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。\n- 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。\n\n主要属性和接口：\n- visible:弹框是否显示标识, 默认false不可见
\n- onClose:关闭弹框的功能函数
\n- closeButton:右上角关闭按钮是否显示的标识, 默认不显示
\n- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭
\n\n示例:\n```code\n \n 标题标题\n \n

可自定义表格内容

\n \n \n \n \n \n```\n```code\n onShow(){\n this.setState({\n visible: true\n });\n }\n onClose(){\n this.setState({\n visible: false\n });\n }\n```", "extends": "Component", "is_constructor": 1, "since": "0.4.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {ButtonGroup, Button, Dialog} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class dialog extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t visible1: false,\n\t visible2: false,\n\t visible3: false\n\t }\n\t }\n\t\n\t onShow(key){\n\t let o = {};\n\t o[key] = true;\n\t this.setState(o);\n\t }\n\t\n\t onClose(key){\n\t let o = {};\n\t o[key] = false;\n\t this.setState(o);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Dialog

\n\t

visible(默认false) 弹框是否可见，必需
onClose 关闭弹框的执行函数

\n\t
\n\t \n\t
\n\t \n\t 标题1\n\t \n\t

可自定义表格内容

\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t\n\t

closeButton(默认不显示) 是否显示弹框左上角关闭按钮

\n\t
\n\t \n\t
\n\t \n\t 标题2\n\t \n\t

可自定义表格内容

\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t\n\t

shadowDisabled(默认可关闭) 阴影部分是否可点击关闭弹框

\n\t
\n\t \n\t
\n\t \n\t 标题3\n\t \n\t

可自定义表格内容

\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/dialog" ], "isApp": true, "show": true }, "Prompt": { "name": "Prompt", "shortname": "Prompt", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "弹出框组件", "namespace": "", "file": "src/modal/Prompt.js", "line": 11, "description": "Prompt组件
\n- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。\n- 可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)\n- 按钮默认有[取消, 确定]2个按钮，点击[取消]默认的执行函数是直接关闭，点击[确定]通过传入的onConfirm函数可获取input的value数组，可自行添加回调。。\n- 通过visible设置弹框是否显示, 可选true/false, 必需。\n- 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。\n- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。\n- 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。\n\n主要属性和接口：\n- title:弹框的标题，必需。\n- content:弹框的内容，必需。\n- buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击按钮的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。\n- onConfirm:点击确定按钮的回调，返回input的value。\n- visible:弹框是否显示标识, 默认false不可见。\n- onClose:关闭弹框的功能函数。\n- closeButton:右上角关闭按钮是否显示的标识, 默认不显示。\n- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭。\n\n示例:\n```code\n const buttons = [\n {text: \"取消\", phStyle: \"gray\", otherProps: {hollow: true}}, // text默认\"确定\", phStyle默认primary，onHandle默认onClose\n {text: \"确定\", onHandle: this.onConfirm}\n ];\n ...\n \n```", "extends": "Component", "is_constructor": 1, "since": "1.5.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Prompt, Button} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class prompt extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t visible1: false,\n\t visible2: false,\n\t visible3: false,\n\t visible4: false,\n\t inputName: \"\",\n\t inputPassword: \"\"\n\t }\n\t }\n\t\n\t onClose(key){\n\t let o = {};\n\t o[key] = false;\n\t this.setState(o);\n\t }\n\t\n\t onConfirm(valueArr){ // 返回input值的数组\n\t console.log(valueArr);\n\t this.onClose('visible2');\n\t }\n\t\n\t onUserNameChange(userName){\n\t console.log(userName);\n\t }\n\t\n\t onPasswordChange(password){\n\t console.log(password);\n\t }\n\t\n\t render(){\n\t const buttons = [\n\t // text默认\"确定\", phStyle默认primary，onHandle默认onClose, otherProps传按钮的属性\n\t {text: \"取消\", phStyle: \"gray\", otherProps: {hollow: true}, onHandle: this.onConfirm.bind(this)}, \n\t {text: \"提交\", onHandle: this.onConfirm.bind(this)}\n\t ];\n\t const inputs = [ \n\t // type默认text，其他属性可选，按照正常输入; \n\t {defaultValue: \"hah\", placeholder: \"用户名\", maxLength: 10, onChange: this.onUserNameChange.bind(this)},\n\t {type: \"password\", placeholder: \"密码\", onChange: this.onPasswordChange.bind(this)}\n\t ];\n\t\n\t return(\n\t
\n\t

Prompt

\n\t

title 定义标题; content 定义内容

\n\t
\n\t

默认有[取消, 确定]2个按钮，点击[取消]默认的执行函数是直接关闭，点击[确定]通过传入的onConfirm函数可获取input的value数组，可自行添加回调。

\n\t \n\t
\n\t { console.log(inputValue); this.onClose(\"visible1\"); }} />\n\t \n\t\n\t

buttons 定义尾部按钮

\n\t
\n\t \n\t
\n\t \n\t \n\t \n\t

inputs 定义内容区域文本框

\n\t
\n\t \n\t
\n\t { console.log(inputValue); this.onClose(\"visible3\"); }} />\n\t \n\t\n\t

其他属性(visible、onClose、closeButton、shadowDisabled)参照Dialog组件

\n\t
\n\t \n\t
\n\t { console.log(inputValue); this.onClose(\"visible4\"); }} />\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/prompt" ], "isApp": true, "show": true }, "Accordion": { "name": "Accordion", "shortname": "Accordion", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/Accordion.js", "line": 22, "description": "手风琴组件
\n- 通过visible设置初始展开或收起的状态, 可选true/false。\n- 可通过onAccordionChange设置展开收起时额外的回调函数。\n- 可通过hideIcon设置隐藏向下的箭头。\n\n主要属性和接口：\n- visible:初始展开或收起的状态, 默认false收起。\n= hideIcon:设置隐藏向下的箭头, 默认false可见。
\n如：\n```code\n \n \n 标题一\n \n \n ...\n \n \n```\n- onAccordionChange:点击收起展开的额外的回调执行函数。
\n如：\n```code\n {console.log(visible);}}>\n \n 标题一\n \n \n ...\n \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.4.0", "example": [ "\timport React, { Component } from \"react\";\n\timport classnames from \"classnames\";\n\timport {Icon, Accordion} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class accordion extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t visible : false\n\t }\n\t }\n\t\n\t onAccordionChange(visible){\n\t alert(visible);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Accordion

\n\t

visible(默认false) 初始可见值

\n\t \n\t \n\t 标题一-收起\n\t \n\t \n\t
    \n\t
  • 内容一
    • \n\t
\n\t \n\t \n\t \n\t \n\t 标题二-展开\n\t \n\t \n\t
    \n\t
  • 内容一
    • \n\t
  • 内容二
    • \n\t
\n\t \n\t \n\t \n\t\n\t

hideIcon(默认false) 向下的按钮是否可见

\n\t \n\t \n\t 标题一\n\t \n\t \n\t
    \n\t
  • 内容一
    • \n\t
\n\t \n\t \n\t \n\t \n\t

onAccordionChange 展开收起的回调函数

\n\t \n\t \n\t 标题一\n\t \n\t \n\t
    \n\t
  • 内容一
    • \n\t
  • 内容二
    • \n\t
\n\t \n\t \n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/accordion" ], "isApp": true, "show": true }, "Animate": { "name": "Animate", "shortname": "Animate", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "辅助组件", "namespace": "", "file": "src/Animate.js", "line": 5, "description": "动画外层组件
\n- 使用时需要在子元素增加animated类名实现动画效果, animated定义的是过渡的duration和fill-mode, 默认300ms, 完全可以自定义。\n- 可通过transitionName设置动画名称, 可选fade、slide-top、slide-bottom(还将补充), 默认fade。\n- 可通过transitionEnterTimeout设置进入延迟时间。\n- 可通过transitionLeaveTimeout设置离开延迟时间。\n\n示例:\n```code\n \n {this.renderPopup()}\n \n```\n```code\n renderPopup(){\n let {visible,children,className} = this.props;\n if(visible){\n return
{children}
;\n }else{\n return '';\n }\n }\n```", "extends": "Component", "is_constructor": 1, "since": "1.0.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Row,Col,Input,Button,Animate} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class animate extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t item: \"\",\n\t list: [\"看一本书\",\"睡8个小时\"]\n\t }\n\t }\n\t\n\t setValue(key,e){\n\t let o ={};\n\t o[key || e.target.name] = e.target.value;\n\t this.setState(o);\n\t }\n\t\n\t addTodo(){\n\t let newList = this.state.list.concat(this.state.item);\n\t \n\t this.setState({\n\t item: \"\",\n\t list: newList\n\t });\n\t }\n\t\n\t removeTodo(index){\n\t let newList = this.state.list.slice();\n\t\n\t newList.splice(index,1);\n\t this.setState({\n\t list: newList\n\t });\n\t }\n\t\n\t renderList(){\n\t const items = this.state.list.map((item,index)=>{\n\t return
{item}
;\n\t });\n\t return items;\n\t }\n\t\n\t render(){\n\t \n\t return(\n\t
\n\t

Animate

\n\t

Todo demo

\n\t
\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t {this.renderList()}\n\t \n\t
\n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/animate" ], "isApp": true, "show": true }, "Badge": { "name": "Badge", "shortname": "Badge", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "标签组件", "namespace": "", "file": "src/Badge.js", "line": 5, "description": "Badge徽章标记
\n- 主要是用来提供不同颜色的标识, 通过phStyle来改变颜色, 可选primary、warning、danger、info、error、success。\n- 不提供默认回调, 但支持自定义className，事件等操作。\n\n主要属性和接口：\n- phStyle:徽章颜色, 默认primary
\n如：`惠`", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Badge} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class badge extends Component{\n\t render(){\n\t return(\n\t
\n\t \t

Badge

\n\t

phStyle(默认primary) 徽章颜色

\n\t
\n\t\t 惠\n\t\t 惠\n\t\t 惠\n\t 惠\n\t 惠\n\t 惠\n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/badge" ], "isApp": true, "show": true }, "Button": { "name": "Button", "shortname": "Button", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "基础组件", "namespace": "", "file": "src/Button.js", "line": 6, "description": "按钮组件
\n- 按钮组件提供所有properties中内置的颜色及字体大小样式供选择。\n- 也可以自定义行内样式和className名字定义UI展示。\n- 通过phSize设置大小, 可选sm、md、lg。\n- 通过phStyle选择按钮颜色，可选primary、info、error、warning、danger、link、gray、success。\n- 支持disabled, active属性定义。\n\n主要属性和接口：\n- phSize:按钮大小, 默认sm
\n如: ``\n- phStyle:按钮颜色, 默认primary
\n如: ``\n- block:是否块级显示，默认false
\n如: ``", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Button} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class button extends Component{\n\t render(){\n\t return(\n\t
\n\t

Button

\n\t

phSize(默认sm) 按钮大小

\n\t
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

phStyle(默认primary) 按钮颜色

\n\t
\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t
\n\t \n\t\n\t

hollow属性

\n\t
\n\t \n\t
\n\t \n\t\n\t

block属性

\n\t
\n\t \n\t
\n\t \n\t\n\t

disabled属性

\n\t
\n\t \n\t
\n\t \n\t\n\t

active属性

\n\t
\n\t \n\t
\n\t \n\t\n\t

phIcon属性

\n\t
\n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}\n\t" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/button" ], "isApp": true, "show": true }, "ButtonGroup": { "name": "ButtonGroup", "shortname": "ButtonGroup", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "基础组件", "namespace": "", "file": "src/ButtonGroup.js", "line": 5, "description": "按钮组组件
\n- 按钮组组件配合Button组件,提供了横、竖两种排列方式, 可选justify,tacked。\n- 可通过onButtongroupChange实现点击回调。\n\n主要属性和接口：\n- phType:是否自适应宽度或者垂直排列, 默认justify
\n如:\n```code\n \n \n \n \n```\n- onButtongroupChange:点击按钮组的回调函数。
\n```code\n \n \n \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.1.4", "example": [ "\timport React, { Component } from \"react\";\n\timport {ButtonGroup, Button} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class buttongroup extends Component{\n\t \n\t onButtongroupChange(target,html){\n\t console.log(target);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

ButtonGroup

\n\t

phType(默认justify) 自适应宽度或垂直排列

\n\t
\n\t \n\t \n\t \n\t \n\t \n\t
\n\t \n\t
\n\t \n\t \n\t \n\t \n\t \n\t
\n\t \n\t\n\t

onButtongroupChange 点击按钮组回调函数

\n\t
\n\t \n\t \n\t \n\t \n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}\n\t" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/buttongroup" ], "isApp": true, "show": true }, "Col": { "name": "Col", "shortname": "Col", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "布局组件", "namespace": "", "file": "src/Col.js", "line": 5, "description": "列组件
\n- 搭配Row行组件可实现自适应宽度布局。\n- 可通过align定义单个项目在交叉轴上的对齐方式, 可选auto、top、bottom、center。\n- 可通过width设置单个项目宽度的百分比, 目前支持5-100之间5的倍数、33（1\\3）和66(2\\3)。\n- 可通过offset设置单个项目左边外边距。\n\n主要属性和接口：\n- align:单个项目在交叉轴上的对齐方式, 默认auto
\n```code\n \n \n
top
\n \n \n
center
\n \n \n
bottom
\n \n \n```\n- width:单个项目的宽度百分比
\n```code\n \n \n
15
\n \n \n```\n- offset:单个项目的偏移值,即左边外边距
\n```code\n \n \n
10
\n \n \n```", "extends": "Component", "is_constructor": 1, "example": [ "\timport React, { Component } from \"react\";\n\timport {Grid,Row,Col} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class grid extends Component {\n\t \n\t render(){\n\t return(\n\t
\n\t

Grid

\n\t

Row

\n\t

align(默认stretch) 容器属性

\n\t
\n\t

stretch

\n\t \n\t \n\t \n\t
stretch
\n\t \n\t \n\t
stretch
baseline
\n\t \n\t \n\t
stretch
stretch
stretch
\n\t \n\t \n\t \n\t

baseline

\n\t \n\t \n\t \n\t
baseline
\n\t \n\t \n\t
baseline
baseline
\n\t \n\t \n\t
baseline
baseline
baseline
\n\t \n\t \n\t \n\t

top

\n\t \n\t \n\t \n\t
top
\n\t \n\t \n\t
top
top
\n\t \n\t \n\t
top
top
top
\n\t \n\t \n\t \n\t

bottom

\n\t \n\t \n\t \n\t
bottom
\n\t \n\t \n\t
bottom
bottom
\n\t \n\t \n\t
bottom
bottom
bottom
\n\t \n\t \n\t \n\t

center

\n\t \n\t \n\t \n\t
center
\n\t \n\t \n\t
center
center
\n\t \n\t \n\t
center
center
center
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

Col

\n\t

align(默认auto) 项目属性

\n\t
\n\t

auto

\n\t \n\t \n\t \n\t
auto
\n\t \n\t \n\t
auto auto
\n\t \n\t \n\t
auto auto auto auto
\n\t \n\t \n\t \n\t

top/center/bottom

\n\t \n\t \n\t \n\t
top
\n\t \n\t \n\t
center
\n\t \n\t \n\t
bottom
\n\t \n\t \n\t
top
center
bottom
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

width 设置项目宽度百分比

\n\t
\n\t \n\t \n\t \n\t
15
\n\t \n\t \n\t
20
\n\t \n\t \n\t
25
\n\t \n\t \n\t
40
40
40
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

offset(即margin-left) 偏移值

\n\t
\n\t \n\t \n\t \n\t
10
\n\t \n\t \n\t
10
10
10
\n\t \n\t \n\t \n\t
\n\t \n\t
\n\t )\n\t }\n\t}\n\t" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/grid" ], "isApp": true, "since": "0.1.0", "show": true }, "Drag": { "name": "Drag", "shortname": "Drag", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "辅助组件", "namespace": "", "file": "src/Drag.js", "line": 6, "description": "拖拽组件
\n- 兼容移动端的touch和pc端的mouse事件。\n- 可通过onDrag设置抓取的回调函数, 返回抓取在屏幕上的位置, 分别保存在start和move中, 以x和y的形式展示。\n- 可通过onDrop设置松开瞬间的回调函数, 返回松开时在屏幕上的位置, 保存在end中, 以x和y的形式展示。\n\n示例:\n```code\n \n
{this.box = box}}>Drag
\n \n```\n```code\n onDrag(event,position){\n this.prePosition = position.start;\n this.nowPosition = position.move;\n\n this.distanceX = this.preDistanceX + this.nowPosition.x - this.prePosition.x;\n this.distanceY = this.preDistanceY + this.nowPosition.y - this.prePosition.y;\n console.log(this.distanceX, this.distanceY);\n }\n onDrop(event,position){\n this.preDistanceX = this.distanceX;\n this.preDistanceY = this.distanceY;\n }\n```", "extends": "Component", "is_constructor": 1, "since": "1.0.0", "example": [ "\timport React, { Component } from 'react';\n\timport {Drag} from 'phoenix-ui';\n\timport Code from \"./code/code\";\n\t\n\texport default class toast extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.preDistanceX = 0;\n\t this.preDistanceY = 0;\n\t this.distanceX = 0;\n\t this.distanceY = 0;\n\t }\n\t\n\t onDrag(event,position){\n\t this.prePosition = position.start;\n\t this.nowPosition = position.move;\n\t\n\t this.distanceX = this.preDistanceX + this.nowPosition.x - this.prePosition.x;\n\t this.distanceY = this.preDistanceY + this.nowPosition.y - this.prePosition.y;\n\t\n\t this.setBoxPosition(this.distanceX, this.distanceY);\n\t }\n\t\n\t onDrop(event,position){\n\t this.preDistanceX = this.distanceX;\n\t this.preDistanceY = this.distanceY;\n\t }\n\t\n\t setBoxPosition(x,y){\n\t this.box.style.webkitTransform = 'translate('+x+'px,'+y+'px)';\n\t this.box.style.transform = 'translate('+x+'px,'+y+'px)';\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Drag

\n\t

Dragable Box demo

\n\t \n\t
\n\t \n\t
{this.box = box}}>Drag
\n\t \n\t
\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/drag" ], "isApp": true, "show": true }, "FormGroup": { "name": "FormGroup", "shortname": "FormGroup", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "表单组件", "namespace": "", "file": "src/FormGroup.js", "line": 6, "description": "表单元素布局方式，整齐的排列一组表单元素
\n\n示例:\n- 单列, 如:\n```code\n \n \n \n \n \n \n \n```\n- 多列, 如:\n```code\n \n \n \n \n \n \n \n \n \n \n \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {FormGroup,Row,Col,Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class formgroup extends Component{\n\t\n\t constructor(props,context){\n\t\n\t super(props,context);\n\t\n\t this.state = {\n\t name:\"\"\n\t };\n\t }\n\t\n\t setValue(key,e){\n\t let o ={};\n\t o[key || e.target.name] = e.target.value;\n\t this.setState(o);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

FormGroup

\n\t

单列

\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t\n\t

多列

\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t
\n\t \n\t \n\t
\n\t \n\t \n\t \n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/formgroup" ], "isApp": true, "show": true }, "Grid": { "name": "Grid", "shortname": "Grid", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "布局组件", "namespace": "", "file": "src/Grid.js", "line": 17, "description": "栅格容器组件
\n- 配合Row、Col使用布局。\n- 可自定义className、style等属性以及自定义事件。\n\n示例:\n```code\n //定义栅格\n //定义一行\n //定义一列，最多12份\n
内容
\n \n \n
stretch
baseline
\n \n \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Grid,Row,Col} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class grid extends Component {\n\t \n\t render(){\n\t return(\n\t
\n\t

Grid

\n\t

Row

\n\t

align(默认stretch) 容器属性

\n\t
\n\t

stretch

\n\t \n\t \n\t \n\t
stretch
\n\t \n\t \n\t
stretch
baseline
\n\t \n\t \n\t
stretch
stretch
stretch
\n\t \n\t \n\t \n\t

baseline

\n\t \n\t \n\t \n\t
baseline
\n\t \n\t \n\t
baseline
baseline
\n\t \n\t \n\t
baseline
baseline
baseline
\n\t \n\t \n\t \n\t

top

\n\t \n\t \n\t \n\t
top
\n\t \n\t \n\t
top
top
\n\t \n\t \n\t
top
top
top
\n\t \n\t \n\t \n\t

bottom

\n\t \n\t \n\t \n\t
bottom
\n\t \n\t \n\t
bottom
bottom
\n\t \n\t \n\t
bottom
bottom
bottom
\n\t \n\t \n\t \n\t

center

\n\t \n\t \n\t \n\t
center
\n\t \n\t \n\t
center
center
\n\t \n\t \n\t
center
center
center
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

Col

\n\t

align(默认auto) 项目属性

\n\t
\n\t

auto

\n\t \n\t \n\t \n\t
auto
\n\t \n\t \n\t
auto auto
\n\t \n\t \n\t
auto auto auto auto
\n\t \n\t \n\t \n\t

top/center/bottom

\n\t \n\t \n\t \n\t
top
\n\t \n\t \n\t
center
\n\t \n\t \n\t
bottom
\n\t \n\t \n\t
top
center
bottom
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

width 设置项目宽度百分比

\n\t
\n\t \n\t \n\t \n\t
15
\n\t \n\t \n\t
20
\n\t \n\t \n\t
25
\n\t \n\t \n\t
40
40
40
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

offset(即margin-left) 偏移值

\n\t
\n\t \n\t \n\t \n\t
10
\n\t \n\t \n\t
10
10
10
\n\t \n\t \n\t \n\t
\n\t \n\t
\n\t )\n\t }\n\t}\n\t" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/grid" ], "isApp": true, "show": true }, "Icon": { "name": "Icon", "shortname": "Icon", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "标签组件", "namespace": "", "file": "src/Icon.js", "line": 5, "description": "Icon
\n- 可通过phIcon来配置不同类型的符号, 可选[查看所有icon类型](http://future-team.github.io/gfs-icons/index.html)。\n- 支持自定义className，事件等操作。\n\n主要属性和接口：\n- phIcon:配置不同类型的符号
\n如：``", "extends": "Component", "is_constructor": 1, "since": "1.3.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Icon} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class icon extends Component{\n\t render(){\n\t return(\n\t
\n\t \t

Icon

\n\t

phIcon 符号类型(对应icon的名称)

\n\t
\n\t

通过phIcon设定

\n\t\t \n\t

不用Icon组件的方式

\n\t \n\t
\n\t \n\t 查看所有icon类型\n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/icon" ], "isApp": true, "show": true }, "ImageList": { "name": "ImageList", "shortname": "ImageList", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/ImageList.js", "line": 6, "description": "图片列表组件
\n- 通过images配置图片列表数据，数组格式，其中图片地址对应`image`字段，名称对应`title`字段，描述对应`desp`字段。\n- 通过column设置图片列表的列数，1-8列。\n- 通过titleField设置名称的格式，以`#`代表名称；通过despField设置描述的格式，以`#`代表描述。\n- 通过otherParams设置额外的字段和格式。\n- 通过clickCallback设置点击单个图片块的回调函数，返回当前图片的所有数据。\n- 可以自定义内容children，当有内容时除了column其他属性不起作用。\n\n主要属性和接口：\n- images:图片列表数据，默认[]。
\n```code\njson:\n{\n \"data\": [\n {\n \"image\": \"http://img5.duitang.com/uploads/item/201602/11/20160211214958_RhdCY.jpeg\",\n \"title\": \"图1\",\n \"desp\": \"关于图是一个...\",\n \"score\": 1\n },\n ...\n ]\n}\n...\n\n```\n- column:列表的列数，默认1。
\n如: ``\n- titleField:名称的格式，以`#`代表名称，默认\"#\"despField:描述的格式，以`#`代表描述，默认\"#\"。
\n如: ``\n- otherParams:额外的字段和格式，默认{}。
\n如: ``\n- clickCallback:点击单个图片块的回调函数。
\n如: `{console.log(data);}} />`\n- 自定义内容:children，当有内容时除了column其他属性不起作用。\n```code\n\n {\n this.state.images.map((data,index)=>{\n return (\n
\n
\n

{data.title}

\n

{data.desp}

\n
\n
\n {data.title}\n
\n
\n )\n })\n }\n\n```", "extends": "Component", "is_constructor": 1, "since": "1.7.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {ImageList} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\timport {ajax} from \"./utils/tool.js\";\n\t\n\texport default class imagelist extends Component{\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t images: []\n\t }\n\t\n\t this.getData(\"./data/post1.json\",0);\n\t }\n\t\n\t getData(fileName){ // 获取数据方法，ajax方法在下面定义了\n\t ajax(fileName).then((json)=>{\n\t let data = json.data;\n\t\n\t this.setState({\n\t images: data\n\t }); \n\t\n\t }, (error)=>{// 加载失败\n\t console.error(\"出错了\", error)\n\t });\n\t }\n\t \n\t render(){\n\t return(\n\t
\n\t \t

ImageList

\n\t

images(默认[]) 图片数据
默认地址的字段是image，名称的字段是title，描述的字段是desp

\n\t \n\t \n\t\n\t

column(默认1) 图片列数

\n\t \n\t \n\t\n\t

titleField(默认#) 姓名格式更改，#代表数值；
despField(默认#) 描述格式更改，#代表数值

\n\t \n\t

如果name或desp中有不要的字段，传空字符\"\"

\n\t \n\t \n\t \n\t

otherParams(默认{}) 其他增加项

\n\t \n\t \n\t\n\t

clickCallback(默认null) 点击单个图片块的回调函数

\n\t {console.log(data);}} />\n\t \n\t\n\t

children(默认无) 内容完全自定义

\n\t \n\t {\n\t this.state.images.map((data,index)=>{\n\t return (\n\t
\n\t
\n\t

{data.title}

\n\t

{data.desp}

\n\t
\n\t
\n\t {data.title}\n\t
\n\t
\n\t )\n\t })\n\t }\n\t \n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/imagelist" ], "isApp": true, "show": true }, "Input": { "name": "Input", "shortname": "Input", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "表单组件", "namespace": "", "file": "src/Input.js", "line": 6, "description": "input框组件
\n- 使用方式跟原生一致, 支持disabled。\n- 通过type设置input的类型, 可选text,checkbox,radio。\n- 当类型为text时, 可通过defaultValue设置默认值; 可通过value和onChange事件配合使用手动设置输入值。\n- 当类型为checkbox&radio时, 可通过label设置展示的文字。\n- 当类型为checkbox&radio时, 可通过defaultChecked设置默认值; 可通过checked和onChange事件配合使用手动设置输入值。\n\n主要属性和接口：\n- type:input类型, 默认text
\n如：``\n- defaultValue:默认值(text)
\n如：``\n- value&onChange:(text)
\n如：`{this.setState({value:\"测试\"})}} />`\n- label:展示的文字信息(checkbox&radio), 默认空
\n如：``\n- defaultChecked:默认值(checkbox&radio)
\n如：``\n- checked&onChange:(checkbox&radio)
\n如：`{this.setState({checked:false})}} />`", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Input} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class input extends Component{\n\t\n\t constructor(props,context){\n\t\n\t super(props,context);\n\t\n\t this.state = {\n\t name: \"value和onChange配合使用\",\n\t checkboxChecked: true,\n\t radioChecked: true\n\t };\n\t }\n\t\n\t setValue(key,e){\n\t let o ={};\n\t o[key || e.target.name] = e.target.value;\n\t this.setState(o);\n\t }\n\t\n\t onCheckboxChange(){\n\t this.setState({\n\t checkboxChecked: !this.state.checkboxChecked\n\t });\n\t }\n\t\n\t onRadioChange(){\n\t this.setState({\n\t radioChecked: !this.state.radioChecked\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Input

\n\t

type(默认text) 类型

\n\t

text 文本框

\n\t
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

checkbox 多选框

\n\t
\n\t

默认

\n\t \n\t

defaultChecked 初始传值

\n\t \n\t

checked和onChange配合使用

\n\t \n\t

disabled

\n\t \n\t
\n\t \n\t\n\t

radio 单选框

\n\t
\n\t

默认

\n\t \n\t \n\t

defaultChecked 初始传值

\n\t \n\t \n\t

checked和onChange配合使用

\n\t \n\t \n\t

disabled

\n\t \n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/input" ], "isApp": true, "show": true }, "Label": { "name": "Label", "shortname": "Label", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "标签组件", "namespace": "", "file": "src/Label.js", "line": 14, "description": "标签组件
\n- 通过phStyle来改变颜色, 可选primary、warning、danger、info、error、success。\n- 通过phSize设置大小, 可选sm、md、lg。\n- 不提供默认回调, 但支持自定义className，事件等操作。\n\n主要属性和接口：\n- phStyle:标签颜色, 默认primary
\n如：``\n- phSize:标签大小, 默认sm
\n如：``", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Label} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class Labels extends Component{\n\t render(){\n\t return(\n\t \t
\n\t \t

Label

\n\t

phStyle(默认primary) 标签颜色

\n\t
\n\t\t \n\t\t \n\t\t \n\t\t\t\t\t\t\n\t\t \n\t\t \n\t
\n\t \n\t\n\t

phSize(默认sm) 标签大小

\n\t
\n\t\t \n\t\t \n\t\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/label" ], "isApp": true, "show": true }, "LoadingList": { "name": "LoadingList", "shortname": "LoadingList", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/LoadingList.js", "line": 10, "description": "加载更多组件
\n- 通过phMode设置加载更多的模式，有点击按钮加载更多，以及滑到最底端自动加载，可选 [button,auto] 2种参数。\n- 通过loadingStatus设置当前状态，包括 0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多。\n- 可通过loadTips设置按钮文字和状态提示语，默认[\"加载更多\",\"加载中\",\"加载成功\",\"加载失败\",\"没有更多\"]，分别对应loadingStatus的状态。\n- 可通过buttonStyles设置按钮的样式，如果当前phMode为auto设置是看不到效果的，默认[\"primary\",\"info\",\"success\",\"error\",\"gray\"]，分别对应loadingStatus的状态。\n- 可通过onLoading设置点击按钮加载或滑到底部自动加载的回调函数。\n- 可通过onLoadingEnd设置每次加载结束的回调函数。\n\n主要属性和接口：\n- phMode:加载更多的模式，默认auto。\n- loadingStatus:当前状态:0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多，默认1。\n- loadTips:按钮文字和状态提示语，默认[\"加载更多\",\"加载中\",\"加载成功\",\"加载失败\",\"没有更多\"]。\n- buttonStyles:按钮的样式，默认[\"primary\",\"info\",\"success\",\"error\",\"gray\"]。\n- onLoading:点击按钮加载或滑到底部自动加载的回调函数。\n- onLoadingEnd:每次加载结束的回调函数。\n\n示例：\n```code\n \n ...\n \n```", "extends": "Component", "is_constructor": 1, "since": "1.6.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {LoadingList} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\timport {ajax} from \"./utils/tool.js\";\n\t\n\texport default class loadinglist extends Component{\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.count = 0;\n\t\n\t this.state = {\n\t loadingData : [],\n\t loadingStatus: 1 // 状态：0\"加载更多\",1\"加载中\",2\"加载成功\",3\"加载失败\",4\"没有更多\"\n\t }\n\t\n\t this.getData(\"./data/post.json\");\n\t }\n\t\n\t getData(fileName){ // 获取数据方法，ajax方法在下面定义了\n\t ajax(fileName).then((json)=>{\n\t let data = json.data;\n\t let loadingData = this.state.loadingData.slice(0);\n\t for(let i in data){\n\t loadingData.push(data[i]);\n\t }\n\t this.setState({\n\t loadingData: loadingData,\n\t loadingStatus: json.final? 4:2\n\t }); \n\t\n\t }, (error)=>{// 加载失败\n\t this.setState({\n\t loadingStatus: 3\n\t }); \n\t console.error(\"出错了\", error)\n\t });\n\t }\n\t\n\t onLoading(){ // 加载更多的执行回调(点击按钮刷新或滑倒屏幕最下方自动刷新)\n\t\n\t // 如果已经没有更多，不再执行请求数据的操作\n\t if(this.state.loadingStatus==4) return;\n\t \n\t // 点击之后显示加载中的状态\n\t this.setState({\n\t loadingStatus: 1\n\t }); \n\t\n\t if(this.state.loadingStatus!=3) this.count++; // 请求失败继续请求当前json\n\t this.getData(\"./data/post\"+this.count+\".json\"); // 开始请求数据\n\t }\n\t\n\t onLoadingEnd(){ //  DOM加载完成执行的回调\n\t if(this.state.loadingStatus==3) return;\n\t\n\t this.setState({\n\t loadingStatus: 0\n\t }); \n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \t

LoadingList

\n\t

phMode(默认auto) 加载更多的模式，可选[auto,button]

\n\t

loadingStatus(默认1) 0－加载更多, 1－加载中, 2－数据加载成功, 3－数据加载失败, 4－没有更多

\n\t

buttonStyles 按钮的样式，默认[\"primary\",\"info\",\"success\",\"error\",\"gray\"]

\n\t

loadTips 按钮文字和状态提示语，默认[\"加载更多\",\"加载中\",\"加载成功\",\"加载失败\",\"没有更多\"]

\n\t

onLoading函数 点击按钮加载或滑到底部自动加载的回调函数

\n\t

onLoadingEnd函数 每次加载结束的回调函数

\n\t \n\t
    \n\t {\n\t this.state.loadingData.map((data,index)=>{\n\t return (\n\t
  • \n\t {data.title}\n\t

    {data.title}

    \n\t

    {data.desp}

    \n\t
    • \n\t );\n\t })\n\t }\n\t
\n\t \n\t \n\t
\n\t );\n\t }\n\t}\n\t" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/LoadingList" ], "isApp": true, "show": true }, "Popover": { "name": "Popover", "shortname": "Popover", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "提示组件", "namespace": "", "file": "src/Popover.js", "line": 6, "description": "气泡组件
\n- 配合倾听者组件Whisper使用, 作为Whisper的target。\n\n示例:\n```code\n const popover = ( // 可以通过style自定义位置\n \n
    \n
  • 未上线单店
    • \n
  • 未上线连锁店
    • \n
\n \n );\n```\n```code\n {console.log('气泡出现消失时额外的执行函数');}} target={popover} distance={10} >Top\n```", "extends": "Component", "is_constructor": 1, "since": "1.0.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Whisper, Popover} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class popover extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t }\n\t\n\t onTargetChange(){\n\t alert(\"气泡出现消失时额外的执行函数\"); \n\t }\n\t\n\t render(){\n\t const popover = ( // 可以通过style自定义位置\n\t \n\t
    \n\t
  • 未上线单店
    • \n\t
  • 未上线连锁店
    • \n\t
\n\t \n\t );\n\t\n\t return(\n\t
\n\t

Whisper/Popover

\n\t

\n\t target 显示的目标物
\n\t placement(默认bottom) 气泡出现时相对点击对象的位置\n\t

\n\t
\n\t Bottom\n\t Top\n\t Right\n\t Left\n\t Top Right\n\t Top Left\n\t Bottom Right\n\t Bottom Left\n\t
\n\t \n\t\n\t

distance(默认15) 气泡想对点击对象的距离

\n\t
\n\t 10\n\t 20\n\t
\n\t \n\t\n\t

onTargetChange 气泡显隐时额外的回调函数

\n\t
\n\t popover\n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/popover" ], "isApp": true, "show": true }, "Popup": { "name": "Popup", "shortname": "Popup", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/Popup.js", "line": 7, "description": "弹层组件
\n- 由于弹层的显示操作在组件以外, 所以需要在使用时自定义visible、onShow、onClose函数。\n- 通过align设置碳层弹出的位置, 可选top/bottom。\n- 可通过onClose配置点击弹层阴影部分来关闭弹层。\n\n主要属性和接口：\n- visible:弹层是否显示标识, 默认false不可见\n- onClose:关闭弹层的功能函数\n- align:弹层的位置, 默认top\n\n示例:\n```code\n \n
    \n
  • 未上线单店
    • \n
  • 未上线连锁店
    • \n
\n \n```\n```code\n onShow(){\n this.setState({\n visible: true\n });\n }\n onClose(){\n this.setState({\n visible: false\n });\n }\n```", "extends": "Component", "is_constructor": 1, "since": "0.4.0", "example": [ "\timport React, { Component } from 'react';\n\timport {Button, Popup} from 'phoenix-ui';\n\timport Code from \"./code/code\";\n\t\n\texport default class popup extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t topVisible: false,\n\t bottomVisible: false\n\t }\n\t }\n\t\n\t onShowTopPopup(){\n\t this.setState({\n\t topVisible: true\n\t });\n\t }\n\t\n\t onCloseTopPopup(){\n\t this.setState({\n\t topVisible: false\n\t });\n\t }\n\t\n\t onShowBottomPopup(){\n\t this.setState({\n\t bottomVisible: true\n\t });\n\t }\n\t\n\t onCloseBottomPopup(){\n\t this.setState({\n\t bottomVisible: false\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Popup

\n\t

visible(默认false) 弹层是否可见，必需
onClose 关闭弹层的执行函数
align(默认top) 弹层弹出位置

\n\t
\n\t \n\t
\n\t \n\t
    \n\t
  • 未上线单店
    • \n\t
  • 未上线连锁店
    • \n\t
  • 在线单店
    • \n\t
  • 在线连锁店
    • \n\t
\n\t \n\t \n\t\n\t
\n\t \n\t
\n\t \n\t
\n\t
    \n\t
  • 确认 删除此作品？
    • \n\t
  • 删除作品
    • \n\t
\n\t
取消
\n\t
\n\t \n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/popup" ], "isApp": true, "show": true }, "Row": { "name": "Row", "shortname": "Row", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "布局组件", "namespace": "", "file": "src/Row.js", "line": 5, "description": "行组件
\n- 搭配Col列组件可实现自适应宽度布局。\n- 可通过align定义项目在交叉轴上的对齐方式, 可选top、bottom、center、baseline、stretch。\n\n主要属性和接口：\n- align:项目在交叉轴上的对齐方式, 默认stretch\n```code\n \n \n
baseline
\n \n \n
baseline
baseline
\n \n \n```", "extends": "Component", "is_constructor": 1, "example": [ "\timport React, { Component } from \"react\";\n\timport {Grid,Row,Col} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class grid extends Component {\n\t \n\t render(){\n\t return(\n\t
\n\t

Grid

\n\t

Row

\n\t

align(默认stretch) 容器属性

\n\t
\n\t

stretch

\n\t \n\t \n\t \n\t
stretch
\n\t \n\t \n\t
stretch
baseline
\n\t \n\t \n\t
stretch
stretch
stretch
\n\t \n\t \n\t \n\t

baseline

\n\t \n\t \n\t \n\t
baseline
\n\t \n\t \n\t
baseline
baseline
\n\t \n\t \n\t
baseline
baseline
baseline
\n\t \n\t \n\t \n\t

top

\n\t \n\t \n\t \n\t
top
\n\t \n\t \n\t
top
top
\n\t \n\t \n\t
top
top
top
\n\t \n\t \n\t \n\t

bottom

\n\t \n\t \n\t \n\t
bottom
\n\t \n\t \n\t
bottom
bottom
\n\t \n\t \n\t
bottom
bottom
bottom
\n\t \n\t \n\t \n\t

center

\n\t \n\t \n\t \n\t
center
\n\t \n\t \n\t
center
center
\n\t \n\t \n\t
center
center
center
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

Col

\n\t

align(默认auto) 项目属性

\n\t
\n\t

auto

\n\t \n\t \n\t \n\t
auto
\n\t \n\t \n\t
auto auto
\n\t \n\t \n\t
auto auto auto auto
\n\t \n\t \n\t \n\t

top/center/bottom

\n\t \n\t \n\t \n\t
top
\n\t \n\t \n\t
center
\n\t \n\t \n\t
bottom
\n\t \n\t \n\t
top
center
bottom
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

width 设置项目宽度百分比

\n\t
\n\t \n\t \n\t \n\t
15
\n\t \n\t \n\t
20
\n\t \n\t \n\t
25
\n\t \n\t \n\t
40
40
40
\n\t \n\t \n\t \n\t
\n\t \n\t\n\t

offset(即margin-left) 偏移值

\n\t
\n\t \n\t \n\t \n\t
10
\n\t \n\t \n\t
10
10
10
\n\t \n\t \n\t \n\t
\n\t \n\t
\n\t )\n\t }\n\t}\n\t" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/grid" ], "isApp": true, "since": "0.1.0", "show": true }, "Slider": { "name": "Slider", "shortname": "Slider", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/Slider.js", "line": 8, "description": "滑动输入条组件
\n- 滑动进度条确定当前进度的百分比。\n- 可通过设置process确定初始进度百分比, 范围从0-100。\n- 可通过placement设置当前进度提示框的位置, 可选top/bottoom。\n- 可通过tipStay设置初始和松开按钮时提示是否消失，默认false不显示。\n- 可通过range制定范围，默认0-100，必需是长度为2的数组，第一个数字表示初始，第二个数字表示终点。\n- 可通过showRange判断是否在进度条前后显示范围，默认不显示。\n- 可通过duration设置固定移动的距离，默认1。\n- 可通过onSliderChange设置拖拽进度条松开时的回调函数。\n- 可通过disabled设置进度条只读。\n- 使用Slider前确保父级是有宽度的元素；使用flex需要加一层宽度100%的外壳。\n\n主要属性和接口：\n- process:初始进度百分比, 默认0
\n如: ``\n- placement:进度提示框的位置, 默认top
\n如: ``\n- tipStay:初始和松开按钮时提示是否消失，默认false
\n如: ``\n- range:范围，默认[0,100]。
\n如: ``\n- showRange:是否在进度条前后显示范围，默认不显示。
\n如: ``\n- duration:固定移动的距离，默认1。
\n如: ``\n- onSliderChange:拖拽进度条松开时的回调函数
\n如: `{console.log(progress);} />`\n- disabled:进度条只读, 不可操作
\n如: ``", "extends": "Component", "is_constructor": 1, "since": "1.0.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Slider} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class slider extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t\n\t this.state = {\n\t progress: 50,\n\t progress1: 20\n\t }\n\t }\n\t\n\t onSliderChange(key, newProgress){ // progress百分比\n\t let o = {};\n\t o[key] = newProgress;\n\t this.setState(o);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Slider

\n\t

progress(默认0) 初始进度百分比

\n\t
\n\t \n\t
\n\t \n\t\n\t

placement(默认top) 进度条提示框的位置

\n\t
\n\t \n\t \n\t
\n\t \n\t\n\t

tipStay(默认false) 松开进度条时是否要隐藏提示

\n\t
\n\t \n\t
\n\t \n\t\n\t

range(默认[0,100]) 范围

\n\t
\n\t \n\t
\n\t \n\t\n\t

showRange(默认false) 范围

\n\t
\n\t \n\t
\n\t \n\t\n\t

duration(默认1) 每次滑动的距离

\n\t
\n\t \n\t
\n\t \n\t\n\t

onSliderChange 拖拽进度条松开时的回调函数

\n\t
\n\t {this.onSliderChange('progress',newProgress);}} />\n\t
Progress: {this.state.progress}
\n\t
\n\t \n\t\n\t\n\t

disabled 进度条只读

\n\t
\n\t \n\t
\n\t \n\t\n\t

整合

\n\t
\n\t {this.onSliderChange('progress1',newProgress);}} \n\t range={[10,50]} duration={5} showRange tipStay />\n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/slider" ], "isApp": true, "show": true }, "Star": { "name": "Star", "shortname": "Star", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "基础组件", "namespace": "", "file": "src/Star.js", "line": 16, "description": "星级评价组件
\n- 通过Rate设置星级评价的分数, 最低0, 最高50, 5的倍数。\n- 通过phSize设置大小, 可选sm、md、lg。\n\n主要属性和接口：\n- phSize(v1.1.2以下用size):星星的大小。分别为sm、md、lg, 默认sm。
\n如：``\n- Rate:星级评价的分数。最低0, 最高50, 5的倍数递增, 默认0。
\n如：``", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Star} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class star extends Component{\n\t render(){\n\t return(\n\t
\n\t

Star

\n\t

Rate(默认0) 星级评价的分数

\n\t
\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t
\n\t \n\t\n\t

phSize(默认sm) 星星大小

\n\t
\n\t \n\t \n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/star" ], "isApp": true, "show": true }, "Steps": { "name": "Steps", "shortname": "Steps", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/Steps.js", "line": 7, "description": "步骤组件
\n- 通过list设置步骤过程名称数组，如[\"合作信息\",\"公司信息\",\"资质信息\"]，必需。\n- 可通过currentStep设置当前步骤，从0开始计算。\n- 可通过clickCallback设置点击步骤的回调，函数返回步骤名称和索引。\n- 可通过readOnly设置步骤是否只读不可点击，默认可点击。\n\n主要属性和接口：\n- list:初始进度百分比, 默认0。
\n如: ``\n- currentStep:当前步骤，从0开始计算，默认0。
\n如: ``\n- clickCallback:点击步骤的回调，函数返回步骤名称和索引。
\n如: `{console.log(index);}} list={[\"合作信息\",\"公司信息\",\"资质信息\"]}/>`\n- readOnly:只读不可点击，默认false。
\n如: ``", "extends": "Component", "is_constructor": 1, "since": "1.7.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Steps} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class steps extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t\n\t this.state = {\n\t index: 2,\n\t list1: [\"合作信息\",\"公司信息\",\"资质信息\",\"资质信息\"],\n\t list2: [\"合作信息\",\"公司信息\",\"资质信息\",\"公司信息\",\"资质信息\",\"公司信息\"]\n\t };\n\t }\n\t\n\t clickCallback(str, index){\n\t alert(\"name: \"+str+\", index: \"+index);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t \t

Steps

\n\t

list(默认[],必需) 步骤名称列表，根据顺序排列

\n\t
\n\t \n\t
\n\t \n\t\n\t

currentStep(默认0) 当前步骤(从0开始)

\n\t
\n\t \n\t
\n\t \n\t\n\t

clickCallback(默认null) 选择步骤的回调函数

\n\t
\n\t \n\t
\n\t \n\t\n\t

readOnly(默认false) 是否只读，只读时不可点击选择步骤

\n\t
\n\t\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/steps" ], "isApp": true, "show": true }, "Swipe": { "name": "Swipe", "shortname": "Swipe", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "操作类组件", "namespace": "", "file": "src/Swipe.js", "line": 9, "description": "左滑组件
\n- 向左滑动出现可操作按钮, 类似IOS列表操作的组件。\n- 通过buttons设置可操作按钮的文字text、样式phStyle以及点击按钮的回调函数onHandle。\n- buttons的phStyle默认'primary', 可选primary、info、error、warning、danger、link、gray、success。\n\n示例:\n```code\n \n
\n // 内容\n
\n \n```", "extends": "Component", "is_constructor": 1, "since": "0.3.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Swipe} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class swipe extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context); \n\t }\n\t\n\t onDelete(){\n\t console.log(\"delete!!\");\n\t }\n\t\n\t onCancle(){\n\t console.log(\"cancle!!\");\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Swipe

\n\t

buttons(默认空数组) 左滑后出现的操作按钮

\n\t
\n\t

buttons的phStyle默认primary

\n\t \n\t
\n\t 滑动块1\n\t
\n\t \n\t
\n\t \n\t\n\t
\n\t

自定义buttons参数

\n\t \n\t
\n\t 滑动块2\n\t
\n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/swipe" ], "isApp": true, "show": true }, "Switch": { "name": "Switch", "shortname": "Switch", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "表单组件", "namespace": "", "file": "src/Switch.js", "line": 6, "description": "开关切换组件，仿真ios的开关控件
\n- 可通过defaultChecked设置默认值。\n- 可通过checked和onChange事件配合使用手动设置输入值。\n\n主要属性和接口：\n- defaultChecked:默认值
\n如：``\n- checked&onChange:
\n如：`{this.setState({checked:false})}} />`", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from 'react';\n\timport {Switch} from 'phoenix-ui';\n\timport Code from \"./code/code\";\n\t\n\texport default class switchs extends Component{\n\t\n\t constructor(props,context){\n\t\n\t super(props,context);\n\t\n\t this.state = {\n\t checked: true\n\t };\n\t }\n\t\n\t onChange(){\n\t this.setState({\n\t checked: !this.state.checked\n\t });\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Switch

\n\t

开关

\n\t
\n\t

默认

\n\t \n\t

defaultChecked 初始传值

\n\t \n\t

checked和onChange配合使用

\n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/switch" ], "isApp": true, "show": true }, "Tab": { "name": "Tab", "shortname": "Tab", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "选项卡", "namespace": "", "file": "src/Tab.js", "line": 6, "description": "tab选项卡组件
\n- 通过heading设置选项卡的显示内容。\n- 可通过onTabChange设置点击选项卡的回调函数。\n- 可自定义className等常用属性以及事件。\n\n具体属性和接口如下：\n- heading:选项卡的显示内容, 默认'tab'\n- onTabChange:点击事件的回调函数\n\n示例:\n```code\n {console.log(index);}>\n \n 横向内容1\n \n {console.log(index);}>\n 横向内容2\n \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Tabset,Tab} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class tab extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t }\n\t\n\t onTabsetChange(index){\n\t alert(\"测试tabset回调\", \"index: \" + index);\n\t }\n\t\n\t onTabChange(index){\n\t alert(\"测试tab回调\", \"index: \" + index);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Tabset/Tab

\n\t

Tabset

\n\t

activeIndex(默认0) 默认选中选项卡的索引值

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t\n\t

vertical(默认false) 设置选项卡竖排

\n\t
\n\t \n\t \n\t 竖向内容1\n\t \n\t \n\t 竖向内容2\n\t \n\t \n\t
\n\t
\n\t \n\t\n\t

width(默认20) 设置vertical之后标题的占比

\n\t
\n\t \n\t \n\t 竖向内容1\n\t \n\t \n\t 竖向内容2\n\t \n\t \n\t
\n\t
\n\t \n\t\n\t

onTabsetChange 点击选项卡的回调函数

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t\n\t

Tab

\n\t

heading(默认\"tab\") 选项卡的标题内容

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t\n\t

onTabChange 点击单个选项卡的回调函数

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/tab" ], "isApp": true, "show": true }, "TableView": { "name": "TableView", "shortname": "TableView", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "布局组件", "namespace": "", "file": "src/TableView.js", "line": 6, "description": "展现形式如表格一般, 用来组织数据, 显示链接的集合, 或一系列的控件。
\n- 使用时如果需要跳转功能可通过添加href属性并赋予正确的url(任何标签)。\n- 可搭配其他组件一起使用, 如徽章组件Badge, 开关组件Switch等。\n\n示例:\n```code\n \n Item 1\n Item 2 2\n Item 3 \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from 'react';\n\timport {TableView,Badge,Switch} from 'phoenix-ui';\n\timport Code from \"./code/code\";\n\t\n\texport default class tableview extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

TableView

\n\t

仿表格组件

\n\t
\n\t

子元素设置href属性(设置href属性增加右箭头)

\n\t \n\t Item 1\n\t \n\t
\n\t \n\t\n\t
\n\t

配合其他组件使用

\n\t \n\t Item 2 2\n\t Item 3 5\n\t Item 4 \n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/tableview" ], "isApp": true, "show": true }, "Tabset": { "name": "Tabset", "shortname": "Tabset", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "选项卡", "namespace": "", "file": "src/Tabset.js", "line": 17, "description": "tabset选项卡组件
\n- 通过activeIndex指定默认的选中tab的索引值。\n- 选项卡默认横排, 可通过vertical设置为竖排。\n- 当设置为vertical后, 可通过width设置tab标题部分的宽度占比。\n- 可通过onTabsetChange设置点击选项卡的回调函数。\n- 可自定义className等常用属性以及事件。\n\n具体属性和接口如下：\n- activeIndex:默认选中的标签卡索引值，默认0第一个tab\n- vertical:是否竖排，如需要直接添加改属性即可，默认不竖排\n- width:选项卡头部的宽度，取值0-100之间, 只有设置vertical下生效, 默认20\n- onTabsetChange:点击选项卡执行的回调函数\n\n示例:\n- 横排\n```code\n {console.log(index);}>\n \n 横向内容1\n \n {console.log(index);}>\n 横向内容2\n \n \n```\n- 竖排\n```code\n {console.log(index);}>\n \n 竖向内容1\n \n {console.log(index);}>\n 竖向内容2\n \n \n```", "extends": "Component", "is_constructor": 1, "since": "0.1.0", "example": [ "\timport React, { Component } from \"react\";\n\timport {Tabset,Tab} from \"phoenix-ui\";\n\timport Code from \"./code/code\";\n\t\n\texport default class tab extends Component{\n\t\n\t constructor(props,context){\n\t super(props,context);\n\t }\n\t\n\t onTabsetChange(index){\n\t alert(\"测试tabset回调\", \"index: \" + index);\n\t }\n\t\n\t onTabChange(index){\n\t alert(\"测试tab回调\", \"index: \" + index);\n\t }\n\t\n\t render(){\n\t return(\n\t
\n\t

Tabset/Tab

\n\t

Tabset

\n\t

activeIndex(默认0) 默认选中选项卡的索引值

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t\n\t

vertical(默认false) 设置选项卡竖排

\n\t
\n\t \n\t \n\t 竖向内容1\n\t \n\t \n\t 竖向内容2\n\t \n\t \n\t
\n\t
\n\t \n\t\n\t

width(默认20) 设置vertical之后标题的占比

\n\t
\n\t \n\t \n\t 竖向内容1\n\t \n\t \n\t 竖向内容2\n\t \n\t \n\t
\n\t
\n\t \n\t\n\t

onTabsetChange 点击选项卡的回调函数

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t\n\t

Tab

\n\t

heading(默认\"tab\") 选项卡的标题内容

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t\n\t

onTabChange 点击单个选项卡的回调函数

\n\t
\n\t \n\t \n\t 横向内容1\n\t \n\t \n\t 横向内容2\n\t \n\t \n\t
\n\t \n\t
\n\t );\n\t }\n\t}" ], "exampleTitles": [ "展示" ], "exampleUrls": [ "https://future-team.github.io/phoenix-ui/examples/index.html#/tab" ], "isApp": true, "show": true }, "TextArea": { "name": "TextArea", "shortname": "TextArea", "classitems": [], "plugins": [], "extensions": [], "plugin_for": [], "extension_for": [], "module": "表单组件", "namespace": "", "file": "src/Textarea.js", "line": 17, "description": "多行文本框组件
\n- 使用方式跟原生一致。\n- 可通过defaultValue设置默认值,如果是通过请求获得的数据请使用value，defaultValue只有初始赋值有效。 \n- 可通过value和onChange事件配合使用手动设置输入值。\n- 可通过设置count判断是否显示当前输入字数。\n- 可通过设置maxLength配置最大输入字数。\n\n主要属性和接口：\n- defaultValue:默认值
\n如：`