Ruby on Rails 5.2 - ActionView::Helpers::TagHelper

मॉड्यूल एक्शन व्यू :: हेल्पर्स :: टैग हेल्पर




ruby

मॉड्यूल एक्शन व्यू :: हेल्पर्स :: टैग हेल्पर

शामिल मॉड्यूल:
ActionView::Helpers::CaptureHelper , ActionView::Helpers::OutputSafetyHelper

एक आधुनिक HTML5 अनुरूप बिल्डर शैली और विरासत XHTML अनुरूप टैग के रूप में प्रोग्रामेटिक रूप से HTML टैग उत्पन्न करने के तरीके प्रदान करता है।

स्थिरांक

BOOLEAN_ATTRIBUTES
PRE_CONTENT_STRINGS
TAG_PREFIXES

सार्वजनिक प्रवृत्ति के तरीके

cdata_section (सामग्री) स्रोत दिखाएं
# File actionview/lib/action_view/helpers/tag_helper.rb, line 291
def cdata_section(content)
  splitted = content.to_s.gsub(/\]\]\>/, "]]]]><![CDATA[>")
  "<![CDATA[#{splitted}]]>".html_safe
end

दिए गए content साथ एक CDATA सेक्शन लौटाता content । CDATA अनुभागों का उपयोग पाठ वाले ब्लॉकों से बचने के लिए किया जाता है जिन्हें अन्यथा मार्कअप के रूप में पहचाना जाएगा। CDATA अनुभाग स्ट्रिंग के साथ शुरू होते हैं <![CDATA[ और (स्ट्रिंग शामिल नहीं हो सकता है ]]> साथ समाप्त होता है।

cdata_section("<hello world>")
# => <![CDATA[<hello world>]]>

cdata_section(File.read("hello_world.txt"))
# => <![CDATA[<hello from a text file]]>

cdata_section("hello]]>world")
# => <![CDATA[hello]]]]><![CDATA[>world]]>
content_tag (नाम, सामग्री_or_options_with_block = शून्य, विकल्प = शून्य, बच = सत्य, और ब्लॉक) दिखाएँ स्रोत
# File actionview/lib/action_view/helpers/tag_helper.rb, line 269
def content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)
  if block_given?
    options = content_or_options_with_block if content_or_options_with_block.is_a?(Hash)
    tag_builder.content_tag_string(name, capture(&block), options, escape)
  else
    tag_builder.content_tag_string(name, content_or_options_with_block, options, escape)
  end
end

content आसपास के प्रकार के name का HTML ब्लॉक टैग देता contentoptions एक हैश पास करके HTML विशेषताएँ जोड़ें। सामग्री को एक तर्क के रूप में पारित करने के बजाय, आप किस मामले में एक ब्लॉक का उपयोग कर सकते हैं, आप अपने options को दूसरे पैरामीटर के रूप में पास करते options । भागने के लिए विशेषता मूल्य को निष्क्रिय करने के लिए झूठ से बचो। नोट: यह विरासत सिंटैक्स है, विवरण के लिए tag विधि विवरण देखें।

विकल्प

options हैश का उपयोग उन विशेषताओं के साथ किया जा सकता है, जैसे कोई मूल्य नहीं है ( disabled और आसानी से), जिसे आप options हैश में सही मान दे सकते हैं। आप विशेषता नामों के लिए प्रतीकों या तारों का उपयोग कर सकते हैं।

उदाहरण

content_tag(:p, "Hello world!")
 # => <p>Hello world!</p>
content_tag(:div, content_tag(:p, "Hello world!"), class: "strong")
 # => <div class="strong"><p>Hello world!</p></div>
content_tag(:div, "Hello world!", class: ["strong", "highlight"])
 # => <div class="strong highlight">Hello world!</div>
content_tag("select", options, multiple: true)
 # => <select multiple="multiple">...options...</select>

<%= content_tag :div, class: "strong" do -%>
  Hello world!
<% end -%>
 # => <div class="strong">Hello world!</div>
भागने_ऑनसे (html) स्रोत दिखाएँ
# File actionview/lib/action_view/helpers/tag_helper.rb, line 303
def escape_once(html)
  ERB::Util.html_escape_once(html)
end

मौजूदा बची हुई संस्थाओं को प्रभावित किए बिना html का एक बचा हुआ संस्करण लौटाता है।

escape_once("1 < 2 &amp; 3")
# => "1 &lt; 2 &amp; 3"

escape_once("&lt;&lt; Accept & Checkout")
# => "&lt;&lt; Accept &amp; Checkout"
टैग (नाम = शून्य, विकल्प = शून्य, खुला = गलत, बचना = सत्य) स्रोत दिखाएं
# File actionview/lib/action_view/helpers/tag_helper.rb, line 235
def tag(name = nil, options = nil, open = false, escape = true)
  if name.nil?
    tag_builder
  else
    "<#{name}#{tag_builder.tag_options(options, escape) if options}#{open ? ">" : " />"}".html_safe
  end
end

एक HTML टैग देता है।

HTML टैग्स का निर्माण

टैग प्रॉक्सी के साथ HTML5 अनुरूप टैग बनाता है। हर टैग के साथ बनाया जा सकता है:

tag.<tag name>(optional content, options)

जहाँ टैग का नाम उदाहरण के लिए br, div, अनुभाग, लेख या कोई भी टैग हो सकता है।

पासिंग कंटेंट

टैग इसके भीतर एम्बेड करने के लिए सामग्री पास कर सकता है:

tag.h1 'All titles fit to print' # => <h1>All titles fit to print</h1>

tag.div tag.p('Hello world!')  # => <div><p>Hello world!</p></div>

सामग्री को एक ब्लॉक के साथ भी कैप्चर किया जा सकता है, जो टेम्प्लेट में उपयोगी है:

<%= tag.p do %>
  The next great American novel starts here.
<% end %>
# => <p>The next great American novel starts here.</p>

विकल्प

जनरेट किए गए टैग में विशेषताओं को जोड़ने के लिए प्रतीक कुंजी वाले विकल्पों का उपयोग करें।

tag.section class: %w( kitties puppies )
# => <section class="kitties puppies"></section>

tag.section id: dom_id(@post)
# => <section id="<generated dom id>"></section>

किसी भी गुण के लिए true पास करें जो बिना किसी मान के साथ प्रस्तुत कर सकता है, जैसे disabled और आसानी से।

tag.input type: 'text', disabled: true
# => <input type="text" disabled="disabled">

एचटीएमएल 5 data-* विशेषताओं को उप-विशेषताओं के हैश की ओर इशारा करते हुए एकल data कुंजी के साथ सेट किया जा सकता है।

जावास्क्रिप्ट सम्मेलनों के साथ अच्छी तरह से खेलने के लिए, उप-विशेषताओं को डैशराइज़ किया जाता है।

tag.article data: { user_id: 123 }
# => <article data-user-id="123"></article>

इस प्रकार data-user-id को dataset.userId . dataset.userId रूप में एक्सेस किया जा सकता है।

स्ट्रिंग, प्रतीकों और BigDecimals के अपवाद के साथ डेटा विशेषता मान JSON से एन्कोड किए गए हैं। 1.4.3 से jQuery के HTML5- अवगत .data() का उपयोग करते समय यह काम आ सकता है।

tag.div data: { city_state: %w( Chicago IL ) }
# => <div data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]"></div>

उत्पन्न विशेषताएँ डिफ़ॉल्ट रूप से बच जाती हैं। यह escape_attributes का उपयोग करके अक्षम किया जा सकता है।

tag.img src: 'open & shut.png'
# => <img src="open &amp; shut.png">

tag.img src: 'open & shut.png', escape_attributes: false
# => <img src="open & shut.png">

यदि कोई सामग्री पारित नहीं होती है, तो टैग बिल्डर HTML5 शून्य तत्वों का सम्मान करता है, और उन तत्वों के लिए बंद टैग को छोड़ देता है।

# A standard element:
tag.div # => <div></div>

# A void element:
tag.br  # => <br>

लिगेसी सिंटेक्स

निम्न स्वरूप विरासत सिंटैक्स समर्थन के लिए है। इसे रेल के भविष्य के संस्करणों में पदावनत किया जाएगा।

tag(name, options = nil, open = false, escape = true)

यह टाइप name का एक खाली HTML टैग देता है जो डिफ़ॉल्ट रूप से XHTML अनुरूप है। HTML 4.0 और नीचे के साथ संगत एक खुले टैग बनाने के लिए open टू ट्रू सेट करें। options एक हैश पास करके HTML विशेषताएँ जोड़ें। escape लिए विशेषता मूल्य को निष्क्रिय करने के लिए झूठ से escape लिए सेट करें।

विकल्प

आप विशेषता नामों के लिए प्रतीकों या तारों का उपयोग कर सकते हैं।

बूलियन विशेषताओं के साथ true उपयोग करें, जो बिना किसी मूल्य के, जैसे disabled और आसानी से प्रस्तुत कर सकते हैं।

एचटीएमएल 5 data-* विशेषताओं को उप-विशेषताओं के हैश की ओर इशारा करते हुए एकल data कुंजी के साथ सेट किया जा सकता है।

उदाहरण

tag("br")
# => <br />

tag("br", nil, true)
# => <br>

tag("input", type: 'text', disabled: true)
# => <input type="text" disabled="disabled" />

tag("input", type: 'text', class: ["strong", "highlight"])
# => <input class="strong highlight" type="text" />

tag("img", src: "open & shut.png")
# => <img src="open &amp; shut.png" />

tag("img", {src: "open &amp; shut.png"}, false, false)
# => <img src="open &amp; shut.png" />

tag("div", data: {name: 'Stephen', city_state: %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />