Как работает Bulma CSS в React
Development | Комментировать запись
Bulma – это CSS-фреймворк, в котором есть вспомогательные классы, элементы и компоненты. При помощи классов Bulma и HTML-структур можно создавать надежные и расширяемые дизайны для проектов.
В этом мануале вы научитесь использовать react-bulma-components, одну из наиболее популярных реализаций CSS-фреймворка Bulma в React.
Требования
- Локальная установка Node.js. Инструкции по установке зависят от дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
- Базовое знакомство с React.
Это руководство было проверено на версиях Node v16.2.0, npm v7.14.0, react v17.0.2 и react-bulma-components v4.0.4
Подготовка проекта
Для начала давайте сгенерируем простое приложение React и установим его зависимости с помощью create-react-app:
npx create-react-app react-bulma-components-example
Перейдите в каталог нового проекта:
cd react-bulma-components-example
Запустите приложение:
npm start
Если при запуске вы видите какие-либо ошибки или проблемы, исправьте их. Затем посетите localhost:3000 в веб-браузере.
Теперь у вас есть работающее приложение React, и вы можете добавить компоненты response-bulma:
npm install react-bulma-components@4.0.4
На данный момент у вас есть новый проект React с поддержкой react-bulma-components.
Элементы и компоненты Bulma
Библиотека react-bulma-components поддерживает элементы, компоненты, формы и макеты.
Рассмотрим пример использования компонента Button. Но сначала нам нужно будет импортировать таблицу стилей Bulma, а затем можно импортировать компонент. Это делается в файле src/App.js:
import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';
function App() {
return (
<div className="App">
<Button>Example</Button>
</div>
);
}
export default App;
Этот код создаст кнопку Button со стилями Bulma.
Примечание: В предыдущих версиях react-bulma-components можно было указать полные и индивидуальные версии компонентов (full и lib соответственно). С версии 4.0 Bulma поддерживает одноранговую зависимость, и теперь нужно импортировать таблицу стилей
Как и большинство других фреймворков CSS, Bulma поставляется со стилями для общих компонентов и с настройками, которые можно внедрить путем добавления различных классов к вашим элементам.
react-bulma-components упрощает ситуацию еще больше – эта библиотека предоставляет компоненты для каждого из основных элементов и тем самым устраняет необходимость управлять именами классов.
Давайте попробуем сделать большую кнопку цвета danger с закругленными углами и контуром?
<Button color="danger" size="large" rounded outlined > Example </Button>
Все компоненты react-bulma-components могут принимать свойство renderAs, которое определяет, какой тип элемента следует использовать для визуализации компонента.
По умолчанию компонент Button отображается как кнопка. Используйте свойство renderAs, чтобы отобразить его как ссылку.
Вместе со свойством renderAs также нужно включить href, чтобы сообщить приложению, куда отправлять людей, когда они нажимают на ссылку:
<Button renderAs="a" href="https://www.example.com" color="danger" size="large" rounded outlined > Example </Button>
На самом деле все компоненты Bulma могут принимать любые свойства, которые вы им можете передать. Следовательно, вы всегда можете создать расширенный стиль с помощью свойств style или добавить несколько дополнительных классов CSS с помощью className.
При использовании className все предоставленные вами классы будут добавлены в список имен классов Bulma, созданный библиотекой.
Цвета и темы
Подобно большинству современных фреймворков CSS, Bulma поставляется с цветовой темой, которая следует соглашениям о семантическом именовании цветов. Таким образом, эта тема включает цвета primary, link, info, success, warning и danger. Кроме того, еще несколько цветов доступны по обычным названиям: black, dark, light и white.
Компоненты, поддерживающие цвета, принимают свойство color:
<Button color="success">Example</Button>
Это присваивает визуализируемому элементу требуемый цветовой класс. Поскольку это свойство присваивает классы отображаемому элементу, вы не можете присваивать произвольное значение цвета.
Управление размерами
Некоторые компоненты принимают свойство size, но они могут принимать значения разных типов.
Это связано с тем, что некоторые компоненты (например, Heading) используют числовые значения:
<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>
В то время как другие (например, Button) используют для определения размеров текстовые значения:
<Button size="large">Large Button</Button> <Button size="small">Small Button</Button>
Для компонентов, которые принимают текстовые определения размеров, доступны значения small, normal, medium и large. Размер normal используется по умолчанию, если не указано другое.
Использование сетки
Также для согласования размещения контента Bulma поддерживает сетку. По умолчанию Bulma использует макет с 12 столбцами. Определить разметку можно в числах или в процентах.
Для начала нужно импортировать компонент:
import { Columns } from 'react-bulma-components';
Если вы хотите определить сетку при помощи чисел, свойству size нужно установить числовые значения от 1 до 12:
<Columns>
<Columns.Column size={1}>One</Columns.Column>
<Columns.Column>Eleven</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={2}>Two</Columns.Column>
<Columns.Column>Ten</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={3}>Three</Columns.Column>
<Columns.Column>Nine</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={4}>Four</Columns.Column>
<Columns.Column>Eight</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={5}>Five</Columns.Column>
<Columns.Column>Seven</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={6}>Six</Columns.Column>
<Columns.Column>Six</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={7}>Seven</Columns.Column>
<Columns.Column>Five</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={8}>Eight</Columns.Column>
<Columns.Column>Four</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={9}>Nine</Columns.Column>
<Columns.Column>Three</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={10}>Ten</Columns.Column>
<Columns.Column>Two</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={11}>Eleven</Columns.Column>
<Columns.Column>One</Columns.Column>
</Columns>
Чтобы определить размер в процентах, для свойства size можно использовать значения one-fifth, one-quarter, one-third, half, two-thirds или three-quarters:
<Columns> <Columns.Column size="one-fifth">20%</Columns.Column> <Columns.Column>80%</Columns.Column> </Columns> <Columns> <Columns.Column size="one-quarter">25%</Columns.Column> <Columns.Column>75%</Columns.Column> </Columns> <Columns> <Columns.Column size="one-third">33.333333333%</Columns.Column> <Columns.Column>66.666666667%</Columns.Column> </Columns> <Columns> <Columns.Column size="half">50%</Columns.Column> <Columns.Column>Also 50%</Columns.Column> </Columns> <Columns> <Columns.Column size="two-thirds">66.666666667%</Columns.Column> <Columns.Column>33.333333333%</Columns.Column> </Columns> <Columns> <Columns.Column size="three-quarters">75%</Columns.Column> <Columns.Column>25%</Columns.Column> </Columns>
Эти два варианта дают в сумме 12 столбцов или 100% соответственно.
Заключение
В этом мануале мы рассмотрели некоторые особенности Bulma на примере библиотеки react-bulma-components.
Этот надежный и хорошо поддерживаемый CSS-фреймворк поможет вам быстро и эффективно разрабатывать свои проекты, а также сэкономить время.
Дополнительную информацию вы найдете в документации Bulma.
Tags: Bulma, Bulma CSS, CSS, Node.js, React