From aa62428cdf574cd42c105d966e7153dd69d80101 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 26 Jan 2016 13:19:03 -0800 Subject: [PATCH] Add docs for custom file input's text and $custom-file-text [skip sauce] --- docs/components/forms.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/components/forms.md b/docs/components/forms.md index 58fd41ac05..b8e9b6214e 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -812,3 +812,22 @@ Here's how it works: - We declare a `height` on the `` for proper spacing for surrounding content. In other words, it's an entirely custom element, all generated via CSS. + +#### Translating or customizing the strings + +The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`): + +{% highlight scss %} +$custom-file-text: ( + placeholder: ( + en: "Choose file...", + es: "Seleccionar archivo..." + ), + button-label: ( + en: "Browse", + es: "Navegar" + ) +); +{% endhighlight %} + +You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.