Commit a7aea2ba authored by Adam Barth's avatar Adam Barth

Give the floating action button a slash effect

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/970393002
parent 46773864
part of widgets;
class FloatingActionButton extends StyleComponent {
class FloatingActionButton extends MaterialComponent {
// TODO(rafaelw): Ganesh has problems with box shadows
// box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
static final Style _style = new Style('''
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 16px;
right: 16px;
z-index: 5;
transform: translateX(0);
width: 56px;
height: 56px;
background-color: #F44336;
color: white;
border-radius: 28px;'''
);
static final Style _clipStyle = new Style('''
transform: translateX(0);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-clip-path: circle(28px at center);''');
Node content;
Style get style => _style;
FloatingActionButton({ Object key, this.content }) : super(key: key);
FloatingActionButton({ Object key, Node content }) : super(key: key, content: content);
Node render() {
List<Node> children = [super.render()];
if (content != null)
children.add(content);
return new Container(
key: "Container",
style: _style,
children: [
new Container(
key: "Clip",
style: _clipStyle,
children: children
)
]
);
}
}
part of widgets;
abstract class StyleComponent extends Component {
Node content;
// Subclasses should implement this getter to provide their style information.
Style get style => null;
StyleComponent({ Object key, this.content }) : super(key: key);
Node render() {
return new Container(
style: style,
children: content == null ? [] : [content]
);
}
}
......@@ -23,6 +23,5 @@ part 'menuitem.dart';
part 'radio.dart';
part 'toolbar.dart';
part 'floating_action_button.dart';
part 'style_component.dart';
typedef void ValueChanged(value);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment