Localized Input
View in LexiconA text input variation used in fields that can be translated into multiple languages.
| install | yarn add @clayui/localized-input |
|---|---|
| version |  |
| use | import LocalizedInput from '@clayui/localized-input'; |
Example
Snippet
<div className="form-group"> <label for="localizableInput1">Liferay</label> <div className="form-text">http://www.liferay.com</div> <div className="input-group"> <div className="input-group-item input-group-item-shrink input-group-prepend" > <span className="input-group-text">/</span> </div> <div className="input-group-append input-group-item"> <input className="form-control" id="localizableInput1" placeholder="es-es/clay" type="text" value="es-es/clay" /> </div> <div className="input-group-item input-group-item-shrink"> <button aria-expanded="false" aria-haspopup="true" className="btn btn-monospaced btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" > <span className="inline-item"> <svg className="lexicon-icon lexicon-icon-es-es" focusable="false" role="presentation" > <use href="/icons.svg#es-es"></use> </svg> </span> <span className="btn-section">es-ES</span> </button> <ul className="dropdown-menu dropdown-menu-right"> <li> <a className="autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-en-us" focusable="false" role="presentation" > <use href="/icons.svg#en-us"></use> </svg> </span> en-US </span> </span> <span className="autofit-col"> <span className="label label-info"> <span className="label-item label-item-expand">Default</span> </span> </span> </a> </li> <li> <a className="autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-en-gb" focusable="false" role="presentation" > <use href="/icons.svg#en-gb"></use> </svg> </span> en-GB </span> </span> <span className="autofit-col"> <span className="label label-success"> <span className="label-item label-item-expand">Translated</span> </span> </span> </a> </li> <li> <a className="active autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-es-es" focusable="false" role="presentation" > <use href="/icons.svg#es-es"></use> </svg> </span> es-ES </span> </span> <span className="autofit-col"> <span className="label label-success"> <span className="label-item label-item-expand">Translated</span> </span> </span> </a> </li> <li> <a className="autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-fr-fr" focusable="false" role="presentation" > <use href="/icons.svg#fr-fr"></use> </svg> </span> fr-FR </span> </span> <span className="autofit-col"> <span className="label label-warning"> <span className="label-item label-item-expand" >Not Translated</span > </span> </span> </a> </li> </ul> </div> </div> <div className="form-text">http://www.liferay.com/en-us/clay</div> </div>
Textarea
Snippet
<div className="form-group"> <label for="basicInputTypeTextarea">Product Description</label> <div className="input-group"> <div className="input-group-item"> <textarea className="form-control" id="basicInputTypeTextarea" placeholder="Placeholder" ></textarea> </div> <div className="input-group-item input-group-item-shrink"> <button aria-expanded="false" aria-haspopup="true" className="btn btn-monospaced btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" > <span className="inline-item"> <svg className="lexicon-icon lexicon-icon-es-es" focusable="false" role="presentation" > <use href="/icons.svg#es-es"></use> </svg> </span> <span className="btn-section">es-ES</span> </button> <ul className="dropdown-menu dropdown-menu-right"> <li> <a className="autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-en-us" focusable="false" role="presentation" > <use href="/icons.svg#en-us"></use> </svg> </span> en-US </span> </span> <span className="autofit-col"> <span className="label label-info"> <span className="label-item label-item-expand">Default</span> </span> </span> </a> </li> <li> <a className="autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-en-gb" focusable="false" role="presentation" > <use href="/icons.svg#en-gb"></use> </svg> </span> en-GB </span> </span> <span className="autofit-col"> <span className="label label-success"> <span className="label-item label-item-expand">Translated</span> </span> </span> </a> </li> <li> <a className="active autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-es-es" focusable="false" role="presentation" > <use href="/icons.svg#es-es"></use> </svg> </span> es-ES </span> </span> <span className="autofit-col"> <span className="label label-success"> <span className="label-item label-item-expand">Translated</span> </span> </span> </a> </li> <li> <a className="autofit-row dropdown-item" href="#1"> <span className="autofit-col autofit-col-expand"> <span className="autofit-section"> <span className="inline-item inline-item-before"> <svg className="lexicon-icon lexicon-icon-fr-fr" focusable="false" role="presentation" > <use href="/icons.svg#fr-fr"></use> </svg> </span> fr-FR </span> </span> <span className="autofit-col"> <span className="label label-warning"> <span className="label-item label-item-expand" >Not Translated</span > </span> </span> </a> </li> </ul> </div> </div> <div className="form-text">.form-text</div> </div>