IStyle - CSS 样式, 布局和外观

IStyle 是 CocoaUI 所有控件的样式与布局的入口. 通过 IView 的 style 属性(IStyle 的实例), 你可以将 CSS 属性(参见 CSS 属性表)附加到控件上面, 从而实现控件的流式布局, 以及丰富的展现样式.

API

// outerBox: 包含 margin, border, padding, content
// frameBox: 包含 border, padding, content
// innerBox: 包含 content

@interface IStyle : NSObject

/**
 * The width, including border, padding, content
 */
@property (nonatomic) CGFloat width;
/**
 * The height, including border, padding, content
 */
@property (nonatomic) CGFloat height;
/**
 * The size, both width and height include border, padding, content
 */
@property (nonatomic, readonly) CGSize size;
/**
 * The content width
 */
@property (nonatomic, readonly) CGFloat innerWidth;
/**
 * The content height
 */
@property (nonatomic, readonly) CGFloat innerHeight;
/**
 * The width, including margin, border, padding, content
 */
@property (nonatomic, readonly) CGFloat outerWidth;
/**
 * The height, including margin, border, padding, content
 */
@property (nonatomic, readonly) CGFloat outerHeight;

/**
 * supported property names: float, clear, width, height, margin
 * float=center will implicitly apply clear=right
 * float=center in a resizeWidth view, the behaviour is undefined
 */
- (void)set:(NSString *)css;

/**
 * set css from style sheet by clz
 */
- (void)setClass:(NSString *)clz;

@end

Demo

IView *view = [[IView alloc] init];
[view.style set:@"height: 100; background: #ff3;"];