Mojolicousのテンプレートでクラス指定してみる
今回はテンプレートに書いた要素のレイアウトをCSSで制御したいときなどに便利なクラス指定やID指定をしてみます。
テンプレート内にHTMLとして以下のように書いても良いのですが
@@ index.html.ep
<form method='GET' action=<%= url_to('index') %> id='name_form'>
Name: <input type="text" name='name' class="name" /><br/>
<input type="submit" value="post" />
</form>以下のようにも書くことができます。
@@ index.html.ep
<%= form_for 'index' => (method => 'GET', id => 'name_form') => begin %>
Name:<%= text_field 'name' => (class => 'name') %><br/>
<%= submit_button 'post' %>
<% end %>"templates/*.html.ep"内や__DATA__内にCSSを書くことで制御可能です。
以下サンプル。
use strict;
use warnings;
use Mojolicious::Lite;
get '/' => sub {
my $self = shift;
my $name = $self->param('name') || '';
$self->render( name => $name );
} => 'index';
app->start;
__DATA__
@@ layouts/default.html.ep
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Mojo class sample</title>
<style type='text/css' media='screen'>
#wrapper {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-color: #3cc;
}
.name {
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<div id='wrapper'>
<%= content %>
</div>
</body>
</html>
@@ index.html.ep
% layout 'default';
<%= form_for 'index' => (method => 'GET', id => 'name_form') => begin %>
Name: <%= text_field 'name' => (class => 'name') %><br/>
<%= submit_button 'post' => (id => 'post_name') %>
<% end %>
<% if( $name ) { %>
Hello, <%= $name %>!<br/>
<% } %>
