ZF2 양식의 버튼 내용

Question

(ZF2 양식의) Button 요소의 버튼 내용을 편집하는 방법은 무엇입니까? 레이블을 설정할 수 있지만 그 안에 html 코드를 삽입하고 싶습니다.

$this->add(array(
     'type' => 'Button', 
     'name' => 'submit', 
     'options' => array(
      'label' => 'Modifica', 
     ), 
     'attributes' => array(
      'type' => 'submit', 
      'class' => 'btn btn-warning' 
     ) 
    )); 

감사

Answer 1

disable_html_escape 레이블 옵션을 사용하면됩니다. 그것은 나를 위해 작동합니다. 당신이 필요로하는 모든 그냥 아이콘, CSS를 사용하는 것이 훨씬 더 간단한 방법입니다 경우

$this->add(array(
     'type' => 'Button', 
     'name' => 'submit', 
     'options' => array(
      'label' => '<i class="icon icon-foo"></i> Submit', 
      'label_options' => array(
       'disable_html_escape' => true, 
      ) 
     ), 
     'attributes' => array(
      'type' => 'submit', 
      'class' => 'btn btn-success' 
     ) 
    )); 

Answer 2

@Sam가 정확하게 언급 한 것처럼 자동으로 버튼의 HTML 콘텐츠를 탈출 것 FormButton보기 도우미.

이 문제를 피하는 유일한 방법은 사용자 지정 양식 단추보기 도우미를 사용하는 것입니다. 이스케이프 기능을 제거하는 대신 (버튼 텍스트 내용을 이스케이프해야 함); 뷰 도우미를 확장하고 html을 렌더링 할 수있는 추가 옵션을 추가 할 수 있습니다 (이것은 부트 스트랩 아이콘이라고 가정합니다). 예를

다음

use Zend\Form\View\Helper\FormButton as ZendFormButton; 

class FormButton extends ZendFormButton 
{ 

    public function render(ElementInterface $element, $buttonContent = null) 
    { 
     $content = (isset($buttonContent)) ? $buttonContent : $element->getLabel(); 
     $icon = isset($element->getOption('icon')) ? $element->getOption('icon') : ''; 

     $escape = $this->getEscapeHtmlHelper(); 

     return $this->openTag($element) . $icon . $escape($content) . $this->closeTag(); 
    } 

} 

서비스 관리자에서 단추보기 도우미의 기본 등록 된 이름 ('form_button')를 사용하여 '호출 가능한'구성 항목을 작성을 위해

. 그러면 은 기본값 Zend\Form\View\Helper\FormButton 대신 뷰 헬퍼가 사용될 것임을 의미합니다.

// Module.php 
public function getViewHelperConfig() 
{ 
    return array(
     'invokables' => array(
      'form_button' => 'MyModule\Form\View\Helper\FormButton', 
     ) 
    ); 
} 

마지막으로, 새로운 '아이콘'옵션을

$this->add(array(
    'type' => 'Button', 
    'name' => 'submit', 
    'options' => array(
     'label' => 'Modifica', 
     'icon' => '<i class="icon icon-foo">', 
    ), 
    'attributes' => array(
     'type' => 'submit', 
     'class' => 'btn btn-warning' 
    ) 
)); 

몇 가지 다른 점

• 당신의 다음 버튼 위의 코드에 대한 번역을 사용하는 경우를 추가 할 버튼 요소 규격 변경 해당 기능을 제거합니다. 이것은 쉽게 다시 추가 될 수 있습니다 (버튼보기 도우미를 살펴보십시오). 예제를 더 명확하게하기 위해 제거했습니다.
• 다른 옵션을 요소에 추가 할 수 있습니다 (버튼 텍스트 앞이나 뒤에있는 아이콘 위치 일 수도 있음). 뷰 도우미는이 옵션을 읽고 올바른 HTML을 출력해야합니다.

Answer 3

, 형태의 파일에서 당신은 당신의 버튼에 사용자 정의 CSS 클래스를 추가 한 다음 스타일 시트에있는 아이콘을 추가 이 같은 이전 및 콘텐츠 사용 클래스 : CSS에서 다음

$this->add(array(
     'type' => 'Button', 
     'name' => 'submit', 
     'options' => array(
      'label' => 'Modifica', 
     ), 
     'attributes' => array(
      'type' => 'submit', 
      'class' => 'btn btn-warning custom-btn-with-icon' 
     ) 
    )); 

는 :

.custom-btn-with-icon:before { 
    content: '\uxf005'; // this is the unicode of the custom-char you need for your icon 
    font-family: 'fontAwesome'; // and this is the icon font of your project 
}